A medida que aumenta la cantidad de usuarios de teléfonos móviles en Internet, se ha vuelto cada vez más importante que los diseñadores web presenten el contenido de manera que funcione bien en una variedad de tamaños de pantalla. El diseño web adaptable, definido originalmente por Ethan Marcotte en A List Apart, es una estrategia de diseño que responde a las necesidades de los usuarios y a las capacidades de sus dispositivos cambiando el diseño de un sitio para que se adapte al dispositivo que se está usando. Por ejemplo, un sitio responsivo puede mostrar contenido en una vista de una sola columna en un teléfono, dos columnas en una tablet y tres o cuatro columnas en una computadora de escritorio.
Dado que los dispositivos con acceso a Internet tienen tantos tamaños de pantalla posibles, es importante que tu sitio se adapte a cualquier tamaño de pantalla existente o futuro. El diseño adaptable moderno también tiene en cuenta los modos de interacción, como las pantallas táctiles. El objetivo es optimizar la experiencia para todos.
Configura la ventana gráfica
Las páginas optimizadas para una variedad de dispositivos deben incluir una etiqueta meta viewport en el encabezado del documento. Esta etiqueta indica al navegador cómo controlar las dimensiones y el escalamiento de la página.
Para intentar brindar la mejor experiencia, los navegadores para dispositivos móviles renderizan la página con un ancho de pantalla de escritorio (por lo general, alrededor de 980px, aunque esto varía según el dispositivo) y, luego, intentan mejorar el aspecto del contenido aumentando los tamaños de fuente y adaptando el contenido para que se ajuste a la pantalla. Esto puede hacer que las fuentes se vean inconsistentes y que los usuarios deban acercar el zoom para ver el contenido e interactuar con él.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Usar el valor del viewport meta width=device-width le indica a la página que debe coincidir con el ancho de la pantalla en píxeles independientes del dispositivo (DIP), una unidad de píxel visual estándar (que puede estar compuesta por muchos píxeles físicos en una pantalla de alta densidad). Esto permite que la página redistribuya el contenido para que coincida con los diferentes tamaños de pantalla.
Algunos navegadores mantienen el ancho de la página constante cuando se rota al modo horizontal y acercan la imagen para llenar la pantalla en lugar de reorganizar el contenido. Agregar el valor initial-scale=1 indica a los navegadores que establezcan una relación 1:1 entre los píxeles de CSS y los píxeles independientes del dispositivo, independientemente de la orientación del dispositivo, lo que permite que la página aproveche el ancho horizontal completo.
La auditoría de Lighthouse No tiene una etiqueta <meta name="viewport"> con width o initial-scale puede ayudarte a automatizar el proceso para asegurarte de que tus documentos HTML usen la etiqueta meta de viewport correctamente.
Cómo adaptar el contenido al viewport
Tanto en computadoras como en dispositivos móviles, los usuarios están acostumbrados a desplazarse por los sitios web de forma vertical, pero no horizontal. Obligar al usuario a desplazarse horizontalmente o a alejar el zoom para ver toda la página genera una mala experiencia del usuario.
Cuando se desarrolla un sitio para dispositivos móviles con una etiqueta meta de viewport, es común crear accidentalmente contenido de la página que no se ajusta del todo al viewport especificado. Por ejemplo, una imagen que se muestra más ancha que la ventana gráfica puede provocar un desplazamiento horizontal. Para evitar esto, ajusta tu contenido para que quepa dentro del viewport.
La auditoría de Lighthouse El contenido no tiene el tamaño correcto para el viewport puede ayudarte a automatizar el proceso de detección de contenido desbordado.
Imágenes
Una imagen con dimensiones fijas hace que la página se desplace si es más grande que la ventana gráfica. Te recomendamos que les asignes a todas las imágenes un max-width de 100%, lo que reduce las imágenes para que se ajusten al espacio disponible y evita que se estiren más allá de su tamaño inicial.
En la mayoría de los casos, puedes hacerlo agregando lo siguiente a tu hoja de estilo:
img {
max-width: 100%;
display: block;
}
Agrega las dimensiones de la imagen al elemento img
Incluso cuando configuras max-width: 100%, te recomendamos que agregues los atributos width y height a tus etiquetas <img> para que el navegador pueda reservar espacio para las imágenes antes de que se carguen. Esto ayuda a evitar los cambios de diseño.
Diseño
Dado que las dimensiones y el ancho de la pantalla en píxeles CSS varían mucho entre los dispositivos (por ejemplo, entre teléfonos y tablets, e incluso entre diferentes teléfonos), el contenido no debe depender de un ancho de viewport en particular para renderizarse bien.
En el pasado, esto requería establecer elementos de diseño en porcentajes. El uso de medidas en píxeles requiere que el usuario se desplace horizontalmente en pantallas pequeñas:
El uso de porcentajes hace que las columnas sean más estrechas en pantallas más pequeñas, ya que cada columna siempre ocupa el mismo porcentaje del ancho de la pantalla:
Las técnicas de diseño de CSS modernas, como flexbox, diseño de cuadrícula y multicol, facilitan mucho la creación de estas cuadrículas flexibles.
Flexbox
Usa Flexbox cuando tengas un conjunto de elementos de diferentes tamaños y quieras que queden cómodamente en una o varias filas, con los elementos más pequeños ocupando menos espacio y los más grandes ocupando más espacio.
.items {
display: flex;
justify-content: space-between;
}
Puedes usar Flexbox para mostrar elementos como una sola fila o ajustados en varias filas a medida que disminuye el espacio disponible.
Obtén más información sobre Flexbox.
Diseño de cuadrícula de CSS
El diseño de cuadrícula CSS crea cuadrículas flexibles. Puedes mejorar el ejemplo anterior con diseño de cuadrícula y la unidad fr, que representa una parte del espacio disponible en el contenedor.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
También puedes usar la cuadrícula para crear diseños de cuadrícula regulares con la cantidad de elementos que quepan. La cantidad de pistas disponibles se reduce a medida que disminuye el tamaño de la pantalla. En la siguiente demostración, se muestra una cuadrícula que contiene tantas tarjetas como caben en cada fila, con un tamaño mínimo de 200px.
Más información sobre el diseño de cuadrícula de CSS
Diseño de varias columnas
Para algunos tipos de diseño, puedes usar el diseño de varias columnas (multicol), que crea cantidades de columnas responsivas con la propiedad column-width.
En la siguiente demostración, la página agrega columnas cuando hay espacio para otra columna 200px.
Más información sobre Multicol
Usa consultas de medios CSS para la capacidad de respuesta
A veces, es posible que debas realizar cambios más extensos en tu diseño para admitir ciertos tamaños de pantalla que las técnicas descritas anteriormente permiten. Aquí es donde las consultas de medios se vuelven útiles.
Las consultas de medios son filtros simples que puedes aplicar a los estilos CSS para cambiarlos según los tipos de dispositivos que renderizan el contenido. También pueden cambiar el diseño según las características del dispositivo, como el ancho, la altura, la orientación y si se usa como pantalla táctil.
Para proporcionar diferentes estilos de impresión, puedes segmentar un tipo de salida e incluir una hoja de diseño para los estilos de impresión:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
También puedes usar una consulta de medios para incluir estilos de impresión en tu hoja de estilo principal:
@media print {
/* print styles go here */
}
En el caso del diseño web adaptable, las consultas más comunes son las de funciones del dispositivo, por lo que puedes personalizar tu diseño para pantallas táctiles o pantallas más pequeñas.
Consultas de medios basadas en el tamaño de la ventana gráfica
Las consultas de medios te permiten crear una experiencia responsiva que aplica estilos específicos a tamaños de pantalla específicos. Las consultas sobre el tamaño de la pantalla pueden probar los siguientes aspectos:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Consultas de medios basadas en la capacidad del dispositivo
Dado el rango de dispositivos disponibles, los desarrolladores no pueden suponer que cada dispositivo grande es una computadora de escritorio o laptop normal, ni que cada dispositivo pequeño usa una pantalla táctil. Algunas incorporaciones más recientes a la especificación de consultas de medios te permiten probar funciones como el tipo de puntero que se usa para interactuar con el dispositivo y si el usuario puede mantener un puntero sobre los elementos.
hoverpointerany-hoverany-pointer
Intenta ver esta demostración en diferentes dispositivos, como una computadora de escritorio normal y un teléfono o una tablet.
Estas funciones más recientes tienen una buena compatibilidad en todos los navegadores modernos. Obtén más información en las páginas de MDN sobre hover, any-hover, pointer y any-pointer.
Pueden usar any-hover y any-pointer
Las funciones any-hover y any-pointer prueban si el usuario puede mantener un puntero sobre los elementos (a menudo llamado desplazamiento) o usar un puntero, incluso si no es la forma principal en que interactúa con su dispositivo. Ten mucho cuidado cuando los uses, por ejemplo, para evitar obligar a un usuario de pantalla táctil a cambiar a un mouse.
Sin embargo, any-hover y any-pointer pueden ser útiles si es importante determinar qué tipo de dispositivo tiene un usuario. Por ejemplo, una laptop con pantalla táctil y panel táctil debe coincidir con los punteros gruesos y finos, además de la capacidad de mantener el cursor sobre un elemento.
Cómo elegir los puntos de interrupción
No definas puntos de interrupción según las clases de dispositivos, ni ningún producto, nombre de marca o sistema operativo. Esto dificulta el mantenimiento de tu código. En cambio, deja que el contenido determine cómo cambia su diseño para ajustarse al contenedor.
Elige los puntos de interrupción principales. Para ello, comienza con una pequeña cantidad y, luego, aumenta la cantidad.
Primero, diseña el contenido para que quepa en un tamaño de pantalla pequeño y, luego, expande la pantalla hasta que sea necesario un punto de interrupción. Esto te permite minimizar la cantidad de puntos de interrupción en tu página y optimizarlos según el contenido.
En el siguiente ejemplo, se explica el widget de previsión meteorológica que se muestra al principio de esta página. El primer paso es hacer que la previsión se vea bien en una pantalla pequeña:
A continuación, cambia el tamaño del navegador hasta que haya demasiado espacio en blanco entre los elementos para que el widget se vea bien. La decisión es subjetiva, pero más de 600px es, sin duda, demasiado ancha.
Para insertar un punto de interrupción en 600px, crea dos consultas de medios al final de tu CSS para el componente: una para usar cuando el navegador sea 600px o más estrecho, y otra para cuando sea más ancho que 600px.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Por último, refactoriza el CSS. Dentro de la consulta de medios para un max-width de 600px, agrega el CSS que solo se aplica a pantallas pequeñas. Dentro de la consulta de medios para un min-width de 601px, agrega CSS para pantallas más grandes.
Elige puntos de interrupción secundarios cuando sea necesario
Además de elegir los puntos de interrupción principales cuando el diseño cambia de forma significativa, también es útil realizar ajustes para los cambios menores. Por ejemplo, entre los puntos de interrupción principales, puede ser útil ajustar los márgenes o el padding de un elemento, o aumentar el tamaño de la fuente para que se vea más natural en el diseño.
Este ejemplo sigue el mismo patrón que el anterior, comenzando con la optimización de diseños de pantallas más pequeñas. Primero, aumenta la fuente cuando el ancho de la ventana gráfica sea mayor que 360px. Después de eso, cuando haya suficiente espacio, puedes separar las temperaturas altas y bajas para que queden en la misma línea y agrandar los íconos del clima.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
Para pantallas grandes, recomendamos limitar el ancho máximo del panel de previsión para que no use todo el ancho de la pantalla.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Optimiza el texto para la lectura
La teoría clásica de legibilidad sugiere que una columna ideal debe contener entre 70 y 80 caracteres por línea (alrededor de 8 a 10 palabras en inglés). Considera agregar un punto de interrupción cada vez que el ancho de un bloque de texto supere las 10 palabras aproximadamente.
En este ejemplo, la fuente Roboto en 1em produce 10 palabras por línea en la pantalla más pequeña, pero las pantallas más grandes necesitan un punto de interrupción. En este caso, si el ancho del navegador es mayor que 575px, el ancho de contenido ideal es 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Evita ocultar contenido (:#avoid-hiding-content)
Ten cuidado al elegir qué contenido ocultar o mostrar según el tamaño de la pantalla. No ocultes contenido solo porque no cabe en la pantalla. El tamaño de la pantalla no predice lo que un usuario podría querer ver. Por ejemplo, quitar el recuento de polen del pronóstico del clima podría ser un problema grave para las personas que sufren alergias en primavera y necesitan esa información para decidir si pueden salir.
Cómo ver los puntos de interrupción de consultas de medios en las Herramientas para desarrolladores de Chrome
Después de configurar los puntos de interrupción de tus consultas de medios, verifica cómo afectan la apariencia de tu sitio. Podrías cambiar el tamaño de la ventana del navegador para activar los puntos de interrupción, pero las Herramientas para desarrolladores de Chrome tienen una función integrada que muestra cómo se ve una página en diferentes puntos de interrupción.
Sigue estos pasos para ver tu página en diferentes puntos de interrupción:
- Abre las Herramientas para desarrolladores.
- Activa el Modo dispositivo. De forma predeterminada, se abre en modo responsivo.
- Para ver tus consultas de medios, abre el menú Modo de dispositivo y selecciona Mostrar consultas de medios. Esto muestra tus puntos de interrupción como barras de color sobre tu página.
- Haz clic en una de las barras para ver tu página mientras esa consulta de medios está activa. Haz clic con el botón derecho en una barra para ir a la definición de esa consulta de medios.