Hace unos años, era relativamente fácil diseñar y construir sitios web. Los sitios web son más simples y se ven en computadoras de escritorio y portátiles con poca variación en los tamaños de pantalla. Hoy, con los dispositivos móviles tomando el tiempo de navegación de los espectadores, un sitio web se puede ver en una pantalla de teléfono inteligente de 4.8 ", una tableta de 7", una tableta de 7 "o cualquier tamaño intermedio.
Entonces, ¿cómo se asegura de que su sitio web se muestre correctamente en todos los tipos de dispositivos y tamaños de pantalla?
La solución fue propuesta por primera vez por Ethan Marcotte, cuando exploró formas de hacer que los diseños de sitios web respondan, es decir, hacer que cambien de acuerdo con el tamaño de la pantalla. Un diseño de sitio web receptivo es aquel que hace un uso inteligente de CSS para garantizar que las páginas web rindan bien en una amplia gama de tamaños de pantalla, sin recurrir a la redirección de URL o servir dinámicamente diferentes códigos HTML y CSS, según el UserAgent. No es realmente una tecnología o un estándar, sino más bien un conjunto de principios de diseño que ayudan a lograr el resultado.
En los últimos años, han surgido muchas plantillas receptivas, marcos de CSS y temas de WordPress. Por ejemplo, es posible crear un sitio web receptivo en WordPress sin escribir una sola línea de código.
Pero un diseñador web real no está satisfecho con solo usar las plantillas. Hará el esfuerzo de comprender los elementos del diseño web receptivo, para usarlos de manera efectiva.
Así que hoy, vamos a ver las 3 técnicas fundamentales que necesitas dominar, ser un diseñador receptivo eficaz.
Las consultas de medios le permiten diseñar diferentes diseños para diferentes tipos de medios como pantalla, impresión, TV, dispositivos de mano, etc. Dependiendo del tipo de medio, puede configurar el estilo, la fuente y otros elementos de la página.
Introducido en CSS3, las consultas de medios permiten que el diseñador personalice la presentación del contenido para adaptarlo a un rango específico de tipos de dispositivos de salida. Consisten en una declaración de tipo de medio y una o más expresiones de características de medios que se evalúan como verdaderas o falsas.
La gama de tipos de medios incluye computadora de mano, pantalla, televisión, impresión y proyección. Las características de los medios incluyen, pero no están limitadas a la altura, el ancho, la relación de aspecto, la resolución, el índice de color, así como también la altura y el ancho de la ventana del navegador.
Tomemos un ejemplo básico; Imagine que desea que su tamaño de texto se reduzca en dispositivos más pequeños, como teléfonos. La consulta para eso sería algo así como:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Ahora, el tamaño de fuente de sus párrafos se establecerá en 1em, a menos que el ancho del navegador sea menor a 400px, en cuyo caso se reducirá a 0.8em.
En mi experiencia, la mejor manera de diseñar un diseño receptivo es crear primero una hoja de estilo maestra predeterminada con los elementos estructurales principales. Luego puede agregar consultas de medios para personalizar elementos según el diseño u otros elementos del dispositivo. Si se trata de más de un puñado de reglas, podría ser mejor moverlas a una hoja secundaria separada, que luego puede cargar selectivamente. Así es como funcionaría eso:
Este fragmento de código verifica si el dispositivo es una computadora de mano en modo horizontal con un ancho de dispositivo inferior a 720 px, y si es así, carga la hoja de estilos de tablet_layout.css .
Tenga en cuenta que las características ancho, alto, ancho mínimo / máximo, alto mínimo / máximo se refieren al ancho y alto de la ventana del navegador. El ancho y el alto del dispositivo están controlados por el ancho del dispositivo, la altura del dispositivo, min / max- device-width, min / max- device-height . Si quieres mirar hacia arriba más ejemplos utilizando consultas de medios MDN tiene una buena ronda.
"Cuadrícula de fluido" es un término utilizado para describir un diseño que se codifica en proporciones relativas de los diversos elementos, en lugar de con valores de píxel fijos.
Los diseños CSS tradicionales usaban cuadrículas de ancho fijo para posicionar los elementos. El enfoque de ancho fijo ya no funciona hoy en día, ya que tenemos pantallas de dispositivos que van desde 3 pulgadas hasta unos pocos pies. En un diseño de rejilla fluida, todo se codifica en términos de su proporción relativa al elemento base, es decir, en lugar de especificar la altura y el ancho de cada elemento; se le da un porcentaje o tamaño relativo.
Imagina que tienes cuatro columnas. Para hacer esto fluido, en lugar de especificar cada uno como 200 píxeles de ancho, tendría que especificarlos 0.2083% (es decir, como 200/960). Al menos, ese es el principio. Crear una red totalmente fluida requiere mucho cuidado. Es uno de esos casos excepcionales que preferiría recomendar con herramientas personalizadas. Rejilla de fluido pequeña , Sistema de rejilla variable y Cuadrícula base fluida son algunas de las mejores alternativas para escribir su propia grilla fluida desde cero.
Las imágenes se consideran flexibles cuando la imagen se representa en tamaño nativo, siempre que el contenedor HTML lo admita, pero cuando la ventana del navegador se reduce, la imagen se adapta para ajustarse.
Incluso si el resto del diseño es fluido y receptivo, no va a rendir bien, si todos los componentes no se escalan. Esto puede ser complicado con imágenes y videos. Una imagen de 700 píxeles de ancho se verá genial en un escritorio, pero se cortará cuando se vea en una tableta de 320 píxeles. La mayoría de los diseños responsivos modernos usan la propiedad CSS max-width para hacer que las imágenes escalen. (Este método fue primero propuesto por Richard Butler .)
img {max-width: 100%;}Estas pocas líneas asegurarán que la imagen no se corte, estableciendo el ancho máximo de la imagen al 100% del contenedor. Si la ventana o la pantalla del navegador se vuelve más pequeña, este fragmento de código CSS reducirá la imagen proporcionalmente. La altura se ajusta automáticamente, manteniendo la relación de aspecto bloqueada.
En su lugar, puede bloquear la imagen para ocupar una cierta proporción de pantalla vertical como esta
img {max-height: 75%;}(Asegúrese de no usar las propiedades de altura máxima y máxima anchura juntas).
El tamaño de la imagen también se puede vincular al tamaño del texto en lugar del elemento principal usando em , como este:
img {width: 30em;}Si la imagen contiene texto, puede limitar el tamaño mínimo / máximo para garantizar que el texto sea legible. Puedes especificarlo así:
img {width: 30em;max-width: 500px;min-width: 100px;}Las mismas técnicas se pueden usar para escalar videos, por ejemplo:
.video embed, .video object, .video iframe { width: 100%; height: auto; }El diseño receptivo es el futuro de nuestra industria, pero con tantas técnicas diferentes volando, a menudo es difícil mantenerse al día. Domina estas 3 técnicas simples, y estarás en el 90% del camino para ser un diseñador receptivo.
Imagen / miniatura destacada, imagen elástica a través de Shutterstock.