Cómo crear sitios que respondan a las necesidades y capacidades del dispositivo en el que se los visualiza
El uso de dispositivos móviles para navegar en 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 respecto de la forma en que el contenido se presenta en la pantalla.
El diseño web adaptable, definido originalmente por Ethan Marcotte en A List Apart, responde a las necesidades de los usuarios y a los dispositivos que utilizan. 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 que se muestra en una vista de una sola columna; una tableta puede mostrar el mismo contenido en dos columnas.
Existe una multitud de diferentes tamaños de pantalla en los teléfonos, "phablets", tablets, computadoras de escritorio, consolas de juegos, televisores e incluso wearables. Los tamaños de pantalla cambian constantemente, por lo que es importante que tu sitio pueda adaptarse a cualquier tamaño de pantalla, hoy o en el futuro. Además, los dispositivos cuentan con diferentes funciones con las que interactuamos con ellos. Por ejemplo, algunos de tus visitantes usarán una pantalla táctil. El diseño adaptable moderno tiene en cuenta todas estas cosas a fin de optimizar la experiencia para todos.
Configura el viewport
Las páginas optimizadas para diferentes dispositivos deben incluir una etiqueta meta viewport en el encabezado del documento. Una etiqueta meta viewport da al navegador instrucciones sobre cómo controlar las dimensiones y el ajuste a escala de la página.
Para proporcionar la mejor experiencia, los navegadores para dispositivos móviles renderizan la página en el ancho de la pantalla de una computadora de escritorio (por lo general, aproximadamente 980px, aunque esto varía según el dispositivo) y, luego, intentan mejorar el aspecto del contenido aumentando los tamaños de la fuente y ajustando el contenido para que se ajuste a la pantalla.
Esto significa que los tamaños de fuente pueden parecer inconsistentes para los usuarios, que quizás tengan que presionar dos veces o pellizcar para acercar 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>
…
El uso del valor de meta viewport width=device-width le indica a la página que coincida con el ancho de la pantalla en píxeles independientes del dispositivo. Un píxel independiente de dispositivo (o densidad) es una representación de un solo píxel, que en una pantalla de alta densidad puede constar de muchos píxeles físicos. Esto permite que la página ajuste automáticamente el contenido para que coincida con diferentes tamaños de pantalla, ya sea que se renderice en un teléfono móvil pequeño o un monitor de computadora grande.
Algunos navegadores mantienen el ancho de la página constante cuando rotan al modo horizontal y hacen zoom en lugar de reprocesamiento para llenar la pantalla. Agregar el valor initial-scale=1 indica a los navegadores que establezcan una relación de 1:1 entre los píxeles CSS y los píxeles independientes del dispositivo, independientemente de su orientación, y 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 de asegurarte de que tus documentos HTML usen la metaetiqueta de viewport correctamente.
Asegúrate de tener un viewport accesible
Además de configurar un initial-scale, también puedes configurar los siguientes atributos en el viewport:
minimum-scalemaximum-scaleuser-scalable
Cuando se configuran, estos pueden inhabilitar la capacidad del usuario para hacer zoom en el viewport, lo que podría causar problemas de accesibilidad. Por lo tanto, no recomendamos usar estos atributos.
Cómo ajustar el tamaño del contenido a la vista del puerto
Tanto en computadoras de escritorio como en dispositivos móviles, los usuarios están acostumbrados a desplazarse por los sitios web de forma vertical, pero no horizontal. Cuando se lo obliga a desplazarse de forma horizontal o a alejarse para ver la página completa, la experiencia del usuario será deficiente.
Cuando se desarrolla un sitio móvil con una etiqueta meta viewport, es fácil crear accidentalmente contenido de página que no se ajuste del todo al viewport especificado. Por ejemplo, una imagen que se muestra con un ancho más ancho que el viewport puede hacer que este se desplace horizontalmente. Debes ajustar este contenido para que se adapte al ancho del viewport, de modo que el usuario no tenga que desplazarse horizontalmente.
La auditoría de El contenido no tiene el tamaño correcto para el viewport en la auditoría de Lighthouse puede ayudarte a automatizar el proceso de detección de contenido desbordado.
Imágenes
Una imagen tiene dimensiones fijas y, si es más grande que el viewport, aparecerá una barra de desplazamiento.
Una forma común de abordar este problema es asignar a todas las imágenes un max-width de 100%.
Esto hará que la imagen se reduzca para adaptarse al espacio que tiene en caso de que el tamaño del viewport sea menor que la imagen.
Sin embargo, debido a que max-width, en lugar de width, es 100%, la imagen no se estirará más grande que su tamaño natural.
Por lo general, es seguro agregar lo siguiente a tu hoja de estilo para que nunca tengas problemas con las imágenes que generen una barra de desplazamiento.
img {
max-width: 100%;
display: block;
}
Agrega las dimensiones de la imagen al elemento img
Cuando usas max-width: 100%, anulas las dimensiones naturales de la imagen. Sin embargo, debes seguir usando los atributos width y height en tu 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, lo que ayudará a evitar cambios de diseño a medida que se cargue el contenido.
Diseño
Dado que las dimensiones de la pantalla y el ancho en píxeles de CSS varían ampliamente entre dispositivos (por ejemplo, entre teléfonos y tablets, o incluso entre diferentes teléfonos), el contenido no debe depender de un ancho de viewport en particular para renderizarse correctamente.
En el pasado, este método de configuración requería elementos de configuración utilizados para crear el diseño en porcentajes. En el siguiente ejemplo, puedes ver un diseño de dos columnas con elementos flotantes, dimensionados mediante píxeles. Una vez que el viewport se vuelve más pequeño que el ancho total de las columnas, debemos desplazarnos horizontalmente para ver el contenido.
Al utilizar porcentajes para los anchos, las columnas siempre conservan un porcentaje determinado 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 de CSS, como Flexbox, Grid Layout y Multicol, facilitan mucho la creación de estas cuadrículas flexibles.
Caja flexible
Este método de diseño es ideal cuando tienes un conjunto de elementos de diferentes tamaños y deseas que se ajusten cómodamente en una fila o filas, con elementos más pequeños que ocupan menos espacio y que los más grandes ocupan más espacio.
.items {
display: flex;
justify-content: space-between;
}
En un diseño responsivo, puedes usar Flexbox para mostrar elementos como una sola fila o unirlos a varias filas a medida que disminuya el espacio disponible.
Obtén más información sobre Flexbox.
Diseño de cuadrícula de CSS
El diseño de cuadrícula de CSS permite la creación directa de cuadrículas flexibles.
Si consideramos el ejemplo flotante anterior, en lugar de crear las columnas con porcentajes, podríamos usar el 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;
}
La cuadrícula también se puede usar para crear diseños de cuadrícula regulares,
con tantos elementos como quepan.
A medida que se reduzca el tamaño de la pantalla, se reducirá la cantidad de segmentos disponibles.
En la siguiente demostración, tenemos todas las tarjetas que 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 puede crear números responsivos de columnas con la propiedad column-width.
En la siguiente demostración, puedes ver que las columnas se agregan si hay espacio para otra columna 200px.
Más información sobre las multicolecciones
Usa consultas de medios de CSS para la capacidad de respuesta
A veces, tendrás que realizar cambios más significativos en tu diseño para admitir un tamaño de pantalla determinado de los que permiten las técnicas anteriores. Aquí es donde las consultas de medios se vuelven útiles.
Las consultas de medios son filtros simples que se pueden aplicar a estilos de CSS. Facilitan el cambio de estilos según los tipos de dispositivos que renderizan el contenido o las funciones de ese dispositivo (por ejemplo, el ancho, la altura, la orientación, la capacidad de colocar el cursor sobre un elemento y si el dispositivo se usa como pantalla táctil).
Para proporcionar diferentes estilos de impresión, debes orientar un tipo de resultado para poder incluir una hoja de estilo con estilos de impresión de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Como alternativa, puedes incluir estilos de impresión en tu hoja de estilo principal mediante una consulta de medios:
@media print {
/* print styles go here */
}
En el caso del diseño web responsivo, por lo general, consultamos las funciones del dispositivo con el fin de proporcionar un diseño diferente para las pantallas más pequeñas o cuando detectamos que el visitante usa una pantalla táctil.
Consultas de medios basadas en el tamaño del viewport
Las consultas de medios nos permiten crear una experiencia responsiva en la que se aplican estilos específicos a pantallas pequeñas, grandes y en cualquier lugar intermedio. Por lo tanto, la función que detectamos aquí es el tamaño de la pantalla, y podemos probar lo siguiente.
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Todas estas funciones tienen una excelente compatibilidad con navegadores. Para obtener más detalles, incluida la información de compatibilidad con navegadores, consulta ancho, altura, orientación y relación de aspecto en MDN.
Consultas de medios basadas en la capacidad del dispositivo
Dada la variedad de dispositivos disponibles, no podemos suponer que cada dispositivo grande es una computadora de escritorio o laptop normal, o que las personas solo están usando una pantalla táctil en un dispositivo pequeño. Con algunas adiciones más recientes a la especificación de consultas de medios, podemos probar funciones como el tipo de puntero que se usa para interactuar con el dispositivo y si el usuario puede colocar el cursor sobre los elementos.
hoverpointerany-hoverany-pointer
Intenta ver esta demostración en diferentes dispositivos, como una computadora de escritorio común y un teléfono o una tablet.
Estas nuevas funciones son compatibles con todos los navegadores modernos. Obtén más información en las páginas de MDN sobre el hover, cualquier puntero, puntero y cualquier puntero.
Usa any-hover y any-pointer
Las funciones any-hover y any-pointer comprueban si el usuario puede colocar el cursor sobre un elemento o utilizar ese tipo de puntero, incluso si no es la forma principal en la que interactúa con su dispositivo.
Ten mucho cuidado cuando las uses.
¡Forzar a un usuario a cambiar a un mouse cuando usa su pantalla táctil no es muy fácil!
Sin embargo, any-hover y any-pointer pueden resultar útiles si es importante averiguar qué tipo de dispositivo tiene un usuario.
Por ejemplo, una laptop con pantalla táctil y panel táctil debe coincidir con punteros groseros y finos, además de la capacidad de colocar el cursor sobre él.
Cómo elegir los puntos de interrupción
No definas puntos de interrupción según las clases de dispositivos. La definición de puntos de interrupción en dispositivos, productos, nombres de marcas o sistemas operativos específicos que se usan actualmente puede generar una pesadilla en el mantenimiento. En cambio, el contenido en sí debe determinar cómo se ajusta el diseño a su contenedor.
Elige los principales puntos de interrupción comenzando de a poco y luego ampliando el alcance
Diseña el contenido para que primero se ajuste a un tamaño de pantalla pequeño y, luego, expande la pantalla hasta que sea necesario un punto de interrupción. De esta manera, puedes optimizar las interrupciones según el contenido y mantener la menor cantidad posible de interrupciones.
Veamos el ejemplo que vimos al principio: el pronóstico del tiempo. 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 y la previsión simplemente no se vea tan bien.
La decisión es un poco subjetiva, pero sobre 600px es sin duda demasiado amplia.
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 esté 600px en adelante, y otra para cuando sea más ancho que 600px.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Por último, refactoriza la CSS. Dentro de la consulta de medios de un max-width de 600px, agrega el CSS que se usa solo para 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 menores cuando sea necesario
Además de elegir los puntos de interrupción principales cuando el diseño cambia de manera significativa, también es útil realizar ajustes para 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 bien aumentar el tamaño de la fuente para que parezca más natural en el diseño.
Comencemos por optimizar el diseño de pantalla pequeña.
En este caso, aumentemos la fuente cuando el ancho del viewport sea mayor que 360px.
En segundo lugar, cuando haya suficiente espacio, podemos separar las temperaturas alta y baja para que estén en la misma línea, en lugar de una encima de la otra.
También agrandaremos un poco 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;
}
}
Del mismo modo, para pantallas grandes, es mejor limitar el ancho máximo del panel de previsión a fin de que no ocupe todo el ancho de la pantalla.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Optimiza el texto para la lectura
La teoría de la legibilidad clásica sugiere que una columna ideal debería contener entre 70 y 80 caracteres por línea (entre 8 y 10 palabras en inglés). Por lo tanto, considera agregar un punto de interrupción cada vez que el ancho de un bloque de texto supere alrededor de 10 palabras.
Analicemos con más detalle el ejemplo anterior de una entrada de blog.
En pantallas más pequeñas, la fuente Roboto en 1em funciona a la perfección con 10 palabras por línea, pero las pantallas más grandes requieren un punto de interrupción.
En este caso, si el ancho del navegador es mayor que 575px, el ancho ideal del contenido será 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Evita ocultar el contenido
Ten cuidado cuando elijas qué contenido ocultar o mostrar según el tamaño de la pantalla. No ocultes el contenido solo porque no encaje en la pantalla. El tamaño de la pantalla no es un indicio definitivo de lo que un usuario puede desear. Por ejemplo, eliminar el recuento de polen del pronóstico del tiempo podría ser un problema grave para las personas alérgicas en primavera, que necesitan esta información para determinar si pueden salir o no.
Ver los puntos de interrupción de consultas de medios en las Herramientas para desarrolladores de Chrome
Una vez que hayas configurado los puntos de interrupción de consultas de medios, querrás ver cómo se ve tu sitio con ellos. Puedes 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 facilita la visualización de cómo se ve una página en diferentes puntos de interrupción.
Para ver tu página bajo diferentes puntos de interrupción:
Abre Herramientas para desarrolladores y, luego, activa Device Mode. Este se abre en el modo responsivo de forma predeterminada.
Para ver tus consultas de medios, abre el menú Device Mode y selecciona Mostrar consultas de medios para mostrar los puntos de interrupción como barras de colores 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 saltar a la definición de la consulta de medios.