Conceptos básicos del diseño web responsivo

A medida que aumenta la cantidad de usuarios de teléfonos celulares en Internet, es cada vez más importante que los diseñadores web diseñen el contenido de manera que funcione bien en una variedad de tamaños de pantalla. El diseño web responsivo, que originalmente definió Ethan Marcotte en A List Apart, es una estrategia de diseño que responde a las necesidades de los usuarios y a las funciones de sus dispositivos cambiando el diseño de un sitio para que se adapte al dispositivo que se usa. 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.

A medida que la pantalla se hace más ancha, el widget cambia de forma en respuesta.

Debido a que los dispositivos compatibles con Internet tienen muchos tamaños de pantalla posibles, es importante que tu sitio se adapte a cualquier tamaño de pantalla existente o futuro. El diseño responsivo 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 el viewport

Las páginas optimizadas para diferentes dispositivos deben incluir la etiqueta meta viewport en el encabezado del documento. Esta etiqueta le indica al navegador cómo controlar las dimensiones y el ajuste a escala de la página.

Para brindar la mejor experiencia, los navegadores para dispositivos móviles renderizan la página con un ancho de pantalla de 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 fuente y ajustando 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 contenido para verlo 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 debe coincidir con el ancho de la pantalla en píxeles independientes del dispositivo (DIP), una unidad de píxeles visuales estándar (que puede estar compuesta por muchos píxeles físicos en una pantalla de alta densidad). Esto permite que la página reprocese el contenido para que coincida con diferentes tamaños de pantalla.

Captura de pantalla de una página con el texto difícil de leer porque está muy alejado.
Una página sin la metaetiqueta de viewport se carga muy reducida, lo que dificulta la lectura del texto. Consulta este ejemplo en Glitch.
Captura de pantalla de la misma página con el texto en un tamaño legible.
Con la metaetiqueta de la vista del puerto configurada, puedes leer la página sin acercar la imagen. Consulta este ejemplo en Glitch.

Algunos navegadores mantienen el ancho de la página constante cuando se rota al modo horizontal y aplican zoom para llenar la pantalla en lugar de reprocesar el contenido. Agregar el valor initial-scale=1 les 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 la orientación del dispositivo, lo que permite que la página aproveche todo el ancho del modo horizontal.

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 metaetiqueta de viewport de forma correcta.

Adapta 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. Forzar al usuario a desplazarse horizontalmente o a alejarse para ver la página completa genera una experiencia del usuario deficiente.

Cuando se desarrolla un sitio móvil con una etiqueta de viewport meta, es común crear accidentalmente contenido de página que no se ajusta bien al viewport especificado. Por ejemplo, una imagen que se muestra más ancha que el viewport puede provocar un desplazamiento horizontal. Para evitar esto, ajusta el contenido para que se ajuste al 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 de visualización. Te recomendamos que todas las imágenes tengan un max-width de 100%, que las reduce para que se ajusten al espacio disponible y, al mismo tiempo, evita que se estiren más allá de su tamaño inicial.

En la mayoría de los casos, puedes hacerlo si agregas 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

Debido a que las dimensiones de la pantalla y el ancho en píxeles CSS varían ampliamente entre dispositivos (por ejemplo, entre teléfonos, tablets e incluso entre diferentes teléfonos), el contenido no debe depender de un ancho de viewport en particular para renderizarse correctamente.

En el pasado, esto requería configurar elementos de diseño en porcentajes. El uso de mediciones de píxeles requiere que el usuario se desplace horizontalmente en pantallas pequeñas:

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 que usa píxeles. Consulta este ejemplo en Glitch.

En cambio, usar 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 modernas de CSS, como Flexbox, Grid Layout 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 se ajusten cómodamente en una o varias filas, de modo que los elementos más pequeños ocupen menos espacio y los más grandes, más.

.items {
  display: flex;
  justify-content: space-between;
}

Puedes usar Flexbox para mostrar elementos como una sola fila o unirlos a 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 de CSS crea cuadrículas flexibles. Puedes mejorar el ejemplo de número de punto flotante anterior usando 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;
}

También puedes usar el diseño de cuadrícula para crear diseños de cuadrícula regulares con la mayor cantidad de elementos posible. 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 se ajusten 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 (multicolumna), que crea cantidades responsivas de columnas con la propiedad column-width. En la siguiente demostración, la página agrega columnas cuando hay lugar para otra columna 200px.

Más información sobre Multicol

Usa consultas de medios de CSS para ofrecer receptividad

A veces, es posible que debas realizar cambios más extensos en tu diseño para admitir ciertos tamaños de pantalla que no permiten las técnicas descritas anteriormente. Aquí es donde las consultas de medios resultan útiles.

Las consultas de medios son filtros simples que puedes aplicar a los estilos de CSS para cambiar esos estilos según los tipos de dispositivos que procesan el contenido. También pueden cambiar el diseño según las funciones 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 y incluir una hoja de estilo 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 responsivo, las consultas más comunes son las de las funciones del dispositivo, de modo que puedes personalizar tu diseño para pantallas táctiles o pantallas más pequeñas.

Consultas de medios según el tamaño de la ventana de visualización

Las consultas de medios te permiten crear una experiencia responsiva que aplica estilos específicos a un tamaño de pantalla específico. Las consultas de tamaño de pantalla pueden probar lo siguiente:

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

Todas estas funciones tienen una excelente compatibilidad con los navegadores. Para obtener más detalles, incluida la información de compatibilidad con navegadores, consulta width, height, orientation y aspect-ratio en MDN.

Consultas de medios basadas en la capacidad del dispositivo

Dado el rango de dispositivos disponibles, los desarrolladores no pueden suponer que todos los dispositivos grandes son computadoras de escritorio o portátiles normales, o que todos los dispositivos pequeños usan una pantalla táctil. Algunas incorporaciones más recientes a la especificación de las 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.

  • hover
  • pointer
  • any-hover
  • any-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 con 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 colocar el cursor sobre) 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 el tipo de dispositivo que tiene un usuario. Por ejemplo, una laptop con una pantalla táctil y un panel táctil debe admitir punteros gruesos y finos, además de la capacidad de colocar el cursor sobre un elemento.

Cómo elegir los puntos de interrupción

No definas los 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 su lugar, deja que el contenido determine cómo cambia su diseño para que se ajuste al contenedor.

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

Diseña el contenido para que primero se ajuste a un tamaño de pantalla reducido y luego expande la pantalla hasta que se necesite 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 muestra el ejemplo del widget de pronóstico del tiempo al comienzo de esta página. El primer paso es que el pronóstico se vea bien en una pantalla pequeña:

Captura de pantalla de una app meteorológica con el ancho de un dispositivo móvil
La app tiene un ancho estrecho.

Luego, 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 ancho.

Captura de pantalla de una app del clima con grandes espacios entre los elementos
Con este tamaño, es probable que el diseño de la app deba cambiar.

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 es 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 puntos de interrupción mayores cuando el diseño cambie de manera significativa, también resulta útil aplicar ajustes para cambios de menor importancia. Por ejemplo, entre los puntos de interrupción principales, puede resultar útil ajustar los márgenes o el relleno en un elemento, o bien aumentar el tamaño de la fuente para que esta quede más natural en el diseño.

Este ejemplo sigue el mismo patrón que el anterior, comenzando por optimizar los diseños de pantallas más pequeñas. Primero, aumenta la fuente cuando el ancho de la ventana de visualización sea superior a 360px. Después de eso, cuando haya suficiente espacio, puedes separar las temperaturas altas y bajas para que estén en la misma línea y hacer que los íconos del clima sean más grandes.

@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, te recomendamos que limites el ancho máximo del panel del pronóstico para 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 debe tener entre 70 y 80 caracteres por línea (entre 8 y 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.

Captura de pantalla de una página de texto en un dispositivo móvil
Enviar SMS en un dispositivo móvil
Captura de pantalla de una página de texto en un navegador de escritorio
El mismo texto en un navegador para computadoras de escritorio con un punto de interrupción agregado para restringir la longitud de la línea.

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 ideal del contenido es 550px.

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

Evita ocultar contenido (:#avoid-hiding-content)

Ten cuidado cuando elijas qué contenido quieres ocultar o mostrar en función del tamaño de pantalla. No ocultes contenido solo porque no se ajuste a 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 tiempo podría ser un problema serio para las personas alérgicas en primavera, que necesitan esa información para decidir si pueden salir.

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 consultas de medios, verifica cómo afectan la apariencia de tu sitio. Puedes cambiar el tamaño de la ventana del navegador para activar los puntos de interrupción, pero Chrome DevTools tiene una función integrada que muestra cómo se ve una página en diferentes puntos de interrupción.

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

Para ver tu página bajo diferentes puntos de interrupción, sigue estos pasos:

  1. Abre las Herramientas para desarrolladores.
  2. Activa Device Mode. Se abrirá en el modo responsivo de forma predeterminada.
  3. Para ver tus consultas de medios, abre el menú del modo de dispositivo y selecciona Mostrar consultas de medios. Se mostrarán los puntos de interrupción como barras de color sobre tu página.
  4. Haz clic en una de las barras para ver tu página mientras que esa consulta de medios está activa. Haz clic con el botón secundario en una barra para saltar a la definición de esa consulta de medios.