3 fundamentos del diseño receptivo que debes dominar

Hace unos años, era relativamente fácil diseñar y construir sitios web. Los sitios web eran más simples y se veían en computadoras de escritorio y portátiles con poca variación en los tamaños de pantalla. Hoy en día, con los dispositivos móviles que se apoderan del tiempo de navegación de los espectadores, un sitio web se puede ver en una pantalla de teléfono inteligente de 4.8 «, un phablet de 5», 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 sean receptivos, 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 se muestren bien en una amplia gama de tamaños de pantalla, sin recurrir a la redirección de URL o sin 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 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. Se esforzará por comprender los elementos del diseño web adaptable para poder utilizarlos de forma eficaz.

Así que hoy, vamos a ver las 3 técnicas fundamentales que necesita dominar, sea un diseñador receptivo eficaz.

1. Consultas de medios

Las consultas de medios le permiten diseñar diferentes diseños para diferentes tipos de medios como pantalla, impresión, TV, dispositivos portátiles, etc. Dependiendo del tipo de medio, puede configurar el estilo, la fuente y otros elementos de la página.

Introducidas en CSS3, las consultas de medios permiten que un diseñador personalice la presentación del contenido para adaptarse 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 verdadero o falso.

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, entre otras, la altura, el ancho, la relación de aspecto, la resolución, el índice de color, así como la altura y el ancho de la ventana del navegador del dispositivo.

Tomemos un ejemplo básico; Imagine que desea que el tamaño de su texto se reduzca en dispositivos más pequeños, como teléfonos. La consulta para eso se vería así:

p {
    font-size:1em;
}

@media all and (max-width:400px) {
    p {
        font-size:0.8em;
    }
}

Ahora, el tamaño de fuente de los párrafos se establecerá en 1 em, a menos que el ancho del navegador sea inferior a 400 px, en cuyo caso se reducirá a 0,8 em.

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, sería mejor moverlas a una hoja secundaria separada, que puede cargar de forma selectiva más tarde. Así es como funcionaría eso:

<link rel="stylesheet" type="text/css" media="handheld and (orientation:landscape) and (max-device-width: 720px)" href="https://www.webdesignerdepot.com/2014/10/3-fundamentals-of-responsive-design-you-have-to-master/tablet_layout.css" />

Este fragmento de código verifica si el dispositivo es una computadora de mano en modo horizontal con un ancho de dispositivo menor a 720px, y si es así, carga el tablet_layout.css hoja de estilo.

Tenga en cuenta que las características ancho, alto, ancho min / max, min / max-height todos se refieren al ancho y alto de la ventana del navegador. El ancho y la altura del dispositivo están controlados por el ancho del dispositivo, altura del dispositivo, min / max- ancho del dispositivo, min / max- altura del dispositivo. Si quieres mirar hacia arriba más ejemplos que utilizan consultas de medios MDN tiene un buen resumen.

2. Rejillas fluidas

“Cuadrícula fluida” es un término que se utiliza para describir un diseño que está codificado en proporciones relativas de los diversos elementos, en lugar de con valores de píxeles fijos.

Los diseños tradicionales de CSS utilizaban cuadrículas de ancho fijo para colocar los elementos. El enfoque de ancho fijo ya no funciona hoy en día ahora que tenemos pantallas de dispositivos que van desde 3 pulgadas hasta unos pocos pies. En un diseño de cuadrícula fluida, todo está codificado 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 este fluido, en lugar de especificar cada uno como 200 píxeles de ancho, tendría que especificar un 0.2083% (es decir, como 200/960). Al menos, ese es el principio. Crear una rejilla completamente fluida requiere mucho cuidado. Es uno de esos casos raros que prefiero recomendar el uso de herramientas personalizadas. Diminuta rejilla fluida, Sistema de cuadrícula variable y Cuadrícula de línea base fluida son algunas excelentes alternativas para escribir su propia cuadrícula fluida desde cero.

3. Imágenes flexibles

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 escala para ajustarse a ella.

Incluso si el resto del diseño es fluido y receptivo, no se renderizará bien, si todas los componentes no escalan. Esto puede complicarse con imágenes y videos. Una imagen de 700 píxeles de ancho se verá genial en una computadora de escritorio, pero se cortará cuando se vea en una tableta de 320 píxeles. La mayoría de los diseños receptivos modernos usan CSS anchura máxima propiedad para hacer que las imágenes escalen. (Este método fue propuesto por primera vez 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 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 que ocupe una cierta proporción de pantalla vertical como esta

img {
     max-height: 75%;
}

(Asegúrate de no usar ambos Altura máxima y anchura máxima propiedades juntas. )

El tamaño de la imagen también se puede vincular al tamaño del texto en lugar del elemento principal mediante em, como esto:

img {
     width: 30em;
}

Si la imagen contiene texto, es posible que desee limitar el tamaño mínimo / máximo para asegurarse de que el texto sea legible. Puede especificarlo así:

img {
     width: 30em;
     max-width: 500px;
     min-width: 100px;
}

Las mismas técnicas se pueden utilizar para escalar videos, por ejemplo:

.video embed, .video object, .video iframe {     width: 100%;     height: auto; }

Pensamientos finales

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 destacada / miniatura, imagen elástica a través de Shutterstock.