Conceptos básicos del diseño web responsivo

Cómo crear sitios que respondan a las necesidades y capacidades del dispositivo en el que los usuarios los visualizan

El uso de dispositivos móviles para navegar en la Web continúa creciendo a un ritmo astronómico, y estos dispositivos con frecuencia están limitados por el tamaño de la pantalla y requieren un enfoque diferente respecto de la disposición del contenido en la pantalla.

El diseño web responsivo, originalmente definido por Ethan Marcotte en A List Apart, responde a las necesidades de los usuarios y 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 en una vista de una sola columna; una tablet podría mostrar el mismo contenido en dos columnas.

En este video, el diseño se mueve de una viewport estrecha a una ancha, lo que responde al espacio disponible en pantalla.

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 tienen diferentes funciones con las que interactuamos con ellos. Por ejemplo, algunos de tus visitantes usarán una pantalla táctil. El diseño responsivo moderno tiene en cuenta todos estos aspectos para 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 escalamiento de la página.

Para tratar de proporcionar la mejor experiencia, los navegadores para dispositivos móviles procesan la página con un ancho de pantalla de computadora de escritorio (por lo general, alrededor de 980px, aunque esto varía según el dispositivo) y, luego, aumentan los tamaños de las fuentes y ajusta el contenido para que se ajuste a la pantalla para que el contenido se vea mejor. Por lo tanto, los tamaños de fuente pueden parecer inconsistentes para los usuarios, quienes podrían tener que presionar dos veces o pellizcar para acercar a fin de ver el contenido y poder 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 indica a la página que coincida con el ancho de la pantalla en píxeles independientes del dispositivo. Un píxel independiente del dispositivo (o densidad) que 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 de escritorio grande.

Captura de pantalla de una página con el texto difícil de leer, ya que está muy alejado.
Ejemplo de cómo se carga la página en un dispositivo sin la metaetiqueta de viewport. Consulta este ejemplo en Glitch.
Captura de pantalla de la misma página con el texto en un tamaño que se puede leer.
Ejemplo de cómo se carga la página en un dispositivo con la metaetiqueta de viewport. Consulta este ejemplo en Glitch.

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 1:1 entre los píxeles CSS y los independientes del dispositivo, independientemente de su orientación, y permite que la página aproveche todo el ancho horizontal.

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 los documentos HTML usen la metaetiqueta de viewport de forma correcta.

Cómo garantizar un viewport accesible

Además de configurar un initial-scale, también puedes establecer los siguientes atributos en el viewport:

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

Cuando se establecen, 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.

Ajusta 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. Si se lo obliga a desplazarse horizontalmente o a alejarse para ver toda la página, se perjudica la experiencia del usuario.

Cuando se desarrolla un sitio móvil con una etiqueta meta viewport, se puede crear por accidente 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 de forma horizontal. Debes ajustar este contenido para que se adapte al ancho del viewport, para que el usuario no necesite desplazarse horizontalmente.

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 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 más pequeño que la imagen. Sin embargo, debido a que max-width, en lugar de width, es 100%, la imagen no se estirará más que su tamaño natural. En general, es seguro agregar lo siguiente a tu hoja de estilo para que nunca tengas problemas con imágenes que causen una barra de desplazamiento.

img {
  max-width: 100%;
  display: block;
}

Agrega las dimensiones de la imagen al elemento img

Cuando usas max-width: 100%, se anulan 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 cual ayudará a evitar los cambios de diseño a medida que se carga el contenido.

Diseño

Debido a 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, e incluso entre diferentes teléfonos), el contenido no debe depender de un ancho de viewport en particular para mostrarse bien.

Antes, este requería de los 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, dimensionadas con 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.

Captura de pantalla de un diseño de dos columnas con la mayor parte de la segunda columna fuera del viewport
Un diseño flotante con píxeles. Consulta este ejemplo en Glitch.

Al usar 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 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 quepan 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 en varias filas a medida que disminuya el espacio disponible.

Más información sobre Flexbox

Diseño de la 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;
}

Cuadrícula también se puede utilizar para crear diseños de cuadrícula regulares, con tantos elementos como caben. A medida que se reduzca el tamaño de la pantalla, se reducirá la cantidad de segmentos disponibles. En la siguiente demostración, tenemos tantas tarjetas como quepan en cada fila, con un tamaño mínimo de 200px.

Obtén 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 (multicolección), que puede crear cantidades responsivas 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 multicolecciones

Usar consultas de medios de CSS para la capacidad de respuesta

En ocasiones, deberás realizar cambios más significativos en tu diseño para admitir un tamaño de pantalla determinado que 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 él y si el dispositivo se usa como pantalla táctil).

Para proporcionar diferentes estilos de impresión, debes orientarte a 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 para proporcionar un diseño diferente para pantallas más pequeñas o cuando detectamos que un visitante está usando una pantalla táctil.

Consultas de medios según 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. La característica 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)
  • orientation
  • aspect-ratio

Todas estas funciones tienen una excelente compatibilidad con navegadores. Si deseas obtener más detalles, como la información sobre compatibilidad del navegador, 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 todos los dispositivos grandes son computadoras de escritorio o laptops comunes, o que las personas solo usan una pantalla táctil en un dispositivo pequeño. Con algunas incorporaciones más recientes en 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.

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

Intenta ver esta demostración en diferentes dispositivos, como una computadora de escritorio común y un teléfono o tablet.

Estas nuevas funciones son compatibles con todos los navegadores modernos. Obtén más información en las páginas de MDN para 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 usar ese tipo de puntero, incluso si no es la forma principal en la que interactúa con su dispositivo. Ten mucho cuidado cuando los uses. ¡Forzar a un usuario a cambiar a un mouse cuando utiliza su pantalla táctil no es muy amistoso! 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 debería coincidir con los punteros generales y finos, además de la capacidad de colocar el cursor sobre ella.

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 función de 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 al contenedor.

Elige puntos de interrupción mayores comenzando de a poco y, luego, ampliando el alcance

Primero, diseña el contenido para que 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 los puntos de interrupción según el contenido y mantener la menor cantidad posible.

Veamos el 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.

Captura de pantalla de una app meteorológica en un ancho de dispositivo móvil
La app en un ancho estrecho

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.

Captura de pantalla de una app meteorológica con espacios amplios entre los elementos
La app en un punto en el que consideremos que deberíamos ajustar el diseño.

Para insertar una 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 y inferior, 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 para un max-width de 600px, agrega el CSS que sea 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 resultar ú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, aumentaremos la fuente cuando el ancho del viewport sea mayor que 360px. En segundo lugar, cuando hay suficiente espacio, podemos separar las temperaturas máxima 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.

Captura de pantalla de una página de texto en un dispositivo móvil
Es el texto tal como se leyó en un dispositivo móvil.
Captura de pantalla de una página de texto en un navegador para computadoras
Es el texto como se lee en un navegador para computadoras con un punto de interrupción agregado para restringir la longitud de la línea.

Analicemos con más detalle el ejemplo anterior de la 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 superior a 575px, el ancho ideal del contenido será 550px.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

Evita simplemente ocultar contenido

Ten cuidado cuando elijas qué contenido ocultar o mostrar en función del tamaño de la pantalla. No ocultes contenido solo porque no puedes caber en la pantalla. El tamaño de la pantalla no es un indicio definitivo de lo que un usuario puede querer. 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 la 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. 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 facilita ver cómo se ve una página en diferentes puntos de interrupción.

Captura de pantalla de Herramientas para desarrolladores con la app del clima abierta y un ancho de 822 píxeles seleccionado.
Herramientas para desarrolladores que muestran la app del clima mientras observa un tamaño de viewport más amplio
Captura de pantalla de Herramientas para desarrolladores con la app del clima abierta y un ancho de 436 píxeles seleccionado.
Herramientas para desarrolladores que muestran la app del clima mientras observa un tamaño de viewport más estrecho.

Para ver tu página bajo diferentes puntos de interrupción:

Abre las Herramientas para desarrolladores y, luego, activa Device Mode. Se abrirá 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 color sobre la 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.