Conceptos básicos de diseño web responsivo

• Establecer el viewport
• dimensionar el contenido en el viewport
• Utilizar consultas de medios CSS para la capacidad de respuesta
• Cómo elegir puntos de interrupción
• Ver puntos de interrupción de consultas de medios en Chrome DevTools

el uso de dispositivos móviles para navegar por la web sigue creciendo a un ritmo astronómico, y estos dispositivos a menudo están limitados por el tamaño de la pantalla y requieren un enfoque diferente de cómo se presenta el contenido en la pantalla.,

El diseño web Responsive, originalmente definido por Ethan Marcotte en una lista aparte, responde a las necesidades de los usuarios y los dispositivos que están utilizando. El diseño cambia según el tamaño y las capacidades del dispositivo. Por ejemplo, en un teléfono, los usuarios verían el contenido en una vista de una sola columna; una tableta podría mostrar el mismo contenido en dos columnas.

existen multitud de tamaños de pantalla diferentes en teléfonos, «phablets», tabletas, computadoras de escritorio, consolas de juegos, televisores e incluso wearables., Los tamaños de pantalla siempre están cambiando, por lo que es importante que su sitio pueda adaptarse a cualquier tamaño de pantalla, Hoy o en el futuro. Además, los dispositivos tienen diferentes características con las que interactuamos con ellos. Por ejemplo, algunos de tus visitantes usarán una pantalla táctil. El diseño responsivo moderno considera todas estas cosas para optimizar la experiencia para todos.

Set the viewport #

las páginas optimizadas para una variedad de dispositivos deben incluir una Etiqueta meta viewport en el encabezado del documento.Una Etiqueta meta viewport le da instrucciones al navegador sobre cómo controlar las dimensiones y el escalado de la página.,

para intentar proporcionar la mejor experiencia, los navegadores móviles renderizan la página a un ancho de pantalla de escritorio (generalmente alrededor de 980px, aunque esto varía entre dispositivos), y luego intentan hacer que el contenido se vea mejor aumentando los tamaños de fondo y escalando el contenido para que se ajuste a la pantalla.Esto significa que los tamaños de fuente pueden parecer inconsistentes para los usuarios, que pueden tener que tocar dos veces o pellizcar para hacer zoom para ver e interactuar con el contenido.,

utilizando el valor Meta viewport width=device-width indica a la página que coincida con el ancho de la pantalla en píxeles independientes del dispositivo. Un dispositivo (o densidad) píxel independiente es una representación de un solo píxel, que en una pantalla de alta densidad puede consistir en muchos píxeles físicos. Esto permite que la página vuelva a reflejar el contenido para que coincida con diferentes tamaños de pantalla, ya sea renderizado en un teléfono móvil pequeño o en un monitor de escritorio grande.,

Algunos navegadores mantienen constante el ancho de la página cuando giran a landscapemode, y hacen zoom en lugar de reflujo para llenar la pantalla., Agregar el valorinitial-scale=1 indica a los navegadores que establezcan una relación 1: 1 entre los píxeles Cssp y los píxeles independientes del dispositivo, independientemente de la orientación del dispositivo, y permite que la página aproveche el ancho horizontal completo.

El no tiene una etiqueta <meta name="viewport"> con width o initial-scaleLighthouse audit puede ayudarlo a automatizar el proceso de asegurarse de que sus documentos HTML estén utilizando la Etiqueta meta viewport correctamente.,

garantizar una vista accesible #

Además de establecer un initial-scale,también puede establecer los siguientes atributos en la vista:

• minimum-scale
• maximum-scale
• user-scalable

cuando se establece, estos pueden deshabilitar la capacidad del usuario para hacer zoom en la vista,lo que podría causar problemas de accesibilidad.Por lo tanto, no recomendamos el uso de estos atributos.,

Tamaño del contenido a la ventana #

tanto en dispositivos de escritorio como móviles,los usuarios están acostumbrados a desplazar sitios web verticalmente pero no horizontalmente;obligando al usuario a desplazarse horizontalmente o a alejarse para ver toda la página resulta en una mala experiencia de usuario.

Cuando se desarrolla un sitio móvil con una Etiqueta meta viewport,es fácil crear accidentalmente contenido de página que no encaja en la vista especificada.Por ejemplo, una imagen que se muestra a un ancho más ancho que la vista puede hacer que la vista se desplace horizontalmente.,Debe ajustar este contenido para que se ajuste al ancho de la ventana,de modo que el Usuario no tenga que desplazarse horizontalmente.

el contenido no tiene el tamaño correcto para viewportLighthouse audit puede ayudarlo a automatizar el proceso de detección de contenido desbordante.

Images #

Una imagen tiene dimensiones fijas y si es más grande que el viewport causará una barra de desplazamiento.Una forma común de tratar este problema es dar a todas las imágenes un max-width de 100%.,Esto hará que la imagen se reduzca para ajustarse al espacio que tiene,en caso de que el tamaño de la ventana sea más pequeño que la imagen.Sin embargo, debido a que max-width, en lugar de width es 100%, la imagen no se extenderá más size.It generalmente es Seguro agregar lo siguiente a su lista de estilos para que nunca tenga un problema con las imágenes que causan una barra de desplazamiento.,

agregue las dimensiones de la imagen al elemento img #

Cuando use max-width: 100% está anulando las dimensiones naturales de la imagen,sin embargo, aún debe usar width y en la etiqueta <img>.Esto se debe a que los navegadores modernos usarán esta información para reservar espacio para la imagen antes de que se cargue,esto ayudará a evitar cambios de diseño a medida que se cargue el contenido.,

Layout #

dado que las dimensiones y el ancho de la pantalla en píxeles CSS varían ampliamente entre dispositivos(por ejemplo, entre teléfonos y tabletas, e incluso entre diferentes teléfonos),el contenido no debe depender de un ancho de vista particular para renderizar bien.

en el pasado, esto requería elementos de configuración utilizados para crear percentages.In en el siguiente ejemplo, puede ver un diseño de dos columnas con elementos flotantes, dimensionados con píxeles.Una vez que el viewport se vuelve más pequeño que el ancho total de las columnas, tenemos que desplazarnos horizontalmente para ver el contenido.,

al usar porcentajes para los anchos, las columnas siempre permanecen un cierto porcentaje del contenedor.Esto significa que las columnas se vuelven más estrechas, en lugar de crear una barra de desplazamiento.

las técnicas modernas de diseño CSS como Flexbox, Grid Layout y Multicol hacen que la creación de estas rejillas flexibles sea mucho más fácil.,

Flexbox #

Este método de diseño es ideal cuando tienes un conjunto de elementos de diferentes tamaños y te gustaría que encajaran cómodamente en una fila o filas,con los elementos más pequeños ocupando menos espacio y los más grandes obteniendo más espacio.

en un diseño responsivo, puede usar Flexbox para mostrar elementos como una sola fila, o envueltos en varias filas a medida que disminuye el espacio disponible.

Más información sobre Flexbox.

CSS Grid Layout #

CSS Grid Layout permite la creación directa de cuadrículas flexibles.,Si consideramos el ejemplo flotante anterior,en lugar de crear nuestras columnas con porcentajes,podríamos usar el diseño de cuadrícula y la unidad fr, que representa una porción del espacio disponible en el contenedor.

Grid también se puede usar para crear diseños de cuadrícula regulares,con tantos elementos como quepan.El número de pistas disponibles se reducirá a medida que el tamaño de la pantalla shrinks.In la demostración a continuación, tenemos tantas tarjetas como quepan en cada fila, con un tamaño mínimo de 200px.,

Leer más sobre CSS Grid Layout

Multiple-column layout #

para algunos tipos de layout puedes usar Multiple-column Layout (Multicol), que puede crear números responsivos de columnas con el column-width property.In la demostración a continuación, puede ver que las columnas se agregan si hay espacio para otra columna 200px.,

Leer más sobre Multicol

Use CSS media queries para la capacidad de respuesta #

a veces tendrá que hacer cambios más extensos en su diseño para soportar un cierto tamaño de pantalla que las técnicas mostradas anteriormente permitirán.Aquí es donde las consultas de medios se vuelven útiles.

Media queries son filtros simples que se pueden aplicar a estilos CSS.,Facilitan el cambio de estilos en función de los tipos de dispositivos que representan el contenido o las características de ese dispositivo,por ejemplo, ancho, altura, orientación, capacidad de flotar y si el dispositivo se utiliza como pantalla táctil.,

para proporcionar diferentes estilos para la impresión,debe dirigirse a un tipo de salida para que pueda incluir una hoja de estilos con estilos de impresión de la siguiente manera:

alternativamente, puede incluir estilos de impresión dentro de su hoja de estilos principal utilizando una consulta de medios:

para el diseño web responsivo, normalmente estamos consultando las características del dispositivo para proporcionar un diseño diferente para pantallas más pequeñas,o cuando detectamos que nuestro visitante está utilizando una pantalla táctil.

Media queries based on viewport size #

Media queries nos permite crear una experiencia responsiva donde se aplican estilos específicos a pantallas pequeñas, pantallas grandes y en cualquier lugar intermedio.La característica que estamos detectando aquí es, por lo tanto, el tamaño de la pantalla, y podemos probar las siguientes cosas.,

• width (min-width, max-width)
• height (min-height, max-height)
• orientation
• aspect-ratio

All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.

Media queries based on device capability #

dada la gama de dispositivos disponibles, no podemos asumir que cada dispositivo grande es un escritorio normal o una computadora portátil, o que la gente solo está usando una pantalla táctil en un dispositivo pequeño.,Con algunas adiciones más recientes a la especificación media queries podemos probar características como el tipo de puntero utilizado para interactuar con el dispositivo y si el usuario puede pasar el cursor sobre los elementos.

• hover
• pointer
• any-hover
• any-pointer

Trate de ver esta demostración en diferentes dispositivos,tal como una computadora de escritorio normal y un teléfono o tablet.

Estas nuevas características tiene un buen soporte en todos los navegadores modernos., Obtenga más información en las páginas MDN parahover, any-hover,pointer, any-pointer.

usando any-hover y any-pointer #

las características any-hover y any-pointer prueban si el usuario tiene la capacidad de pasar el cursor, o usar ese tipo de puntero, incluso si no es la forma principal en que interactúan con su device.Be muy cuidadoso al usar estos.¡Forzar a un usuario a cambiar a un mouse cuando está usando su pantalla táctil no es muy amigable!,Sin embargo, any-hover y any-pointer pueden ser útiles si es importante averiguar qué tipo de dispositivo tiene un usuario.Por ejemplo, una computadora portátil con pantalla táctil y trackpad debe coincidir con punteros gruesos y finos,además de la capacidad de flotar.

Cómo elegir puntos de interrupción #

no defina puntos de interrupción en función de las clases de dispositivo.Definir puntos de interrupción basados en dispositivos, productos, marcas o sistemas operativos específicos que se utilizan hoy en día puede resultar en una pesadilla de mantenimiento.,En su lugar, el contenido en sí debe determinar cómo se ajusta el diseño a su contenedor.

Elija los puntos de interrupción principales comenzando con pequeños, luego trabajando #

Diseñe el contenido para que quepa en un tamaño de pantalla pequeño primero, luego expanda la pantalla hasta que sea necesario un punto de interrupción.Esto le permite optimizar los puntos de interrupción en función del contenido y mantener el menor número posible de puntos de interrupción.

vamos a trabajar a través del ejemplo que vimos al principio: el pronóstico del tiempo.El primer paso es hacer que el pronóstico se vea bien en una pantalla pequeña.,

a continuación, cambie el tamaño del navegador hasta que haya demasiado espacio en blanco entre los elementos,y el pronóstico simplemente no se vea tan bien.La decisión es algo subjetiva, pero por encima 600px es sin duda demasiado amplia.

para insertar un punto de interrupción en 600px, cree dos consultas de medios al final de su CSS para el componente,una para usar cuando el navegador es 600px y por debajo, y otra para cuando es más ancho que 600px.

finalmente, refactoriza el CSS. Dentro de la consulta de medios para un max-width de 600px, agregue el CSS que es solo para pantallas pequeñas., Dentro de la consulta de medios para un min-width de 601px agregue CSS para pantallas más grandes.

elija puntos de interrupción menores cuando sea necesario #

Además de elegir puntos de interrupción mayores cuando el diseño cambia significativamente, también es útil ajustar los cambios menores.Por ejemplo,entre los puntos de interrupción principales puede ser útil ajustar los márgenes o el relleno de un elemento, o aumentar el tamaño de la fuente para que se sienta más natural en el diseño.

comencemos por optimizar el diseño de la pantalla pequeña.,En este caso, vamos a aumentar la fuente cuando el ancho de la ventana es mayor que 360px.En segundo lugar,cuando hay suficiente espacio, podemos separar las temperaturas altas y bajas para que estén en la misma línea en lugar de una encima de la otra.Y vamos a hacer también los iconos del tiempo un poco más grandes.

del mismo modo, para las pantallas grandes es mejor limitar al ancho máximo del panel de pronóstico para que no consuma todo el ancho de la pantalla.,

Optimize text for reading #

La teoría de legibilidad clásica sugiere que una columna ideal debe contener de 70 a 80 caracteres por línea(aproximadamente de 8 a 10 palabras en inglés).Por lo tanto,cada vez que el ancho de un bloque de texto supere las 10 palabras, considere agregar un punto de interrupción.

echemos un vistazo más profundo al ejemplo de la publicación de blog anterior.En pantallas más pequeñas, la fuente Roboto en 1em funciona perfectamente dando 10 palabras por línea,pero las pantallas más grandes requieren un breakpoint.In en este caso, si el ancho del navegador es mayor que 575px, el ancho de contenido ideal es 550px.,

Evitar simplemente ocultar contenido #

tenga cuidado al elegir qué contenido para ocultar o mostrar dependiendo del tamaño de la pantalla.Don «t simplemente ocultar el contenido solo porque usted puede»t caber en la pantalla.El tamaño de la pantalla no es una indicación definitiva de lo que un usuario puede querer.Por ejemplo, eliminar el recuento de polen del Pronóstico del tiempo podría ser un problema serio para las personas alérgicas de primavera que necesitan la información para determinar si pueden salir o no.,

ver puntos de interrupción de media query en Chrome DevTools #

Una vez que haya configurado los puntos de interrupción de media query,querrá ver cómo se ve su sitio con ellos.Puede cambiar el tamaño de la ventana del navegador para activar los puntos de interrupción,pero Chrome DevTools tiene una función incorporada que facilita ver cómo se ve una página bajo diferentes puntos de interrupción.

para ver su página en diferentes puntos de interrupción:

abra DevToolsand luego encienda el modo de dispositivo.Esto se abre en modo de respuesta de forma predeterminada.

para ver sus consultas de medios, abra el menú Modo dispositivo y seleccione Mostrar consultas de medios para mostrar sus puntos de interrupción como barras de colores sobre su página.

Haga clic en una de las barras para ver su página mientras esa consulta de medios está activa.,Haga clic derecho en una barra para saltar a la definición de media query.

---