Diseño receptivo

This translation is incomplete. Please help translate this article from English

En los primeros días del diseño web, las páginas se construyeron para llenar un tamaño de pantalla en particular. Si el usuario tenía una pantalla más grande o más pequeña que la del diseñador, los resultados esperados iban desde barras de desplazamiento no deseadas, hasta longitudes de línea excesivamente largas y un mal uso del espacio. A medida que los tamaños de pantalla más diversos estuvieron disponibles, apareció el concepto de diseño web receptivo (RWD), un conjunto de prácticas que permite a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma en que diseñamos para una web multidispositivo, y en este artículo te ayudaremos a comprender las principales técnicas que necesitas saber para dominarlo.

Prerrequisitos: Los conceptos básicos de HTML (véase Introducción al HTML) y una idea de cómo funciona el CSS (véase Primeros pasos de CSS y Bloques de construcción en CSS).
Objetivo: Comprender los conceptos fundamentales y la historia del diseño receptivo.

Diseños de sitios web históricos

En un momento de la historia, solo tenías dos opciones al diseñar un sitio web:

  • Podías crear un sitio líquido, que se estiraría para llenar la ventana del navegador
  • o un sitio de ancho fijo, que sería un tamaño fijo en píxeles.

¡Estos dos enfoques tendían a dar como resultado un sitio web que se veía mejor en la pantalla de la persona que diseñaba el sitio! El sitio líquido dio como resultado un diseño aplastado en pantallas más pequeñas (como se ve a continuación) y longitudes de línea indescifrablemente largas en pantallas más grandes.

Un diseño con dos columnas aplastadas en una ventana gráfica de tamaño móvil.

Nota: Mira este ejemplo de código fuente de un diseño líquido simple. Cuando veas el ejemplo, arrastra la ventana del navegador hacia adentro y afuera para ver cómo se ve esto en diferentes tamaños.

El sitio de ancho fijo arriesgaba una barra de desplazamiento horizontal en pantallas más pequeñas que el ancho del sitio (como se ve a continuación), y mucho espacio en blanco en los bordes del diseño en pantallas más grandes.

Un diseño con una barra de desplazamiento horizontal en una ventana móvil.

Nota: Mira este ejemplo de código fuente de un diseño de ancho fijo simple. Nuevamente, observa el resultado mientras cambias el tamaño de la ventana del navegador.

Nota: Las capturas de pantalla anteriores se toman usando el Modo de diseño receptivo en Firefox DevTools.

A medida que la web móvil comenzó a hacerse realidad con los primeros teléfonos con funciones, las empresas que deseaban adoptar los dispositivos móviles generalmente creaban una versión móvil especial para su sitio, con una URL diferente (a menudo algo como m.example.com o example.mobi). Esto significaba que dos versiones separadas del sitio tenían que ser desarrolladas y actualizadas.

Además, estos sitios móviles a menudo ofrecían una experiencia muy reducida. A medida que los dispositivos móviles se volvieron más potentes y capaces de mostrar sitios web completos, esto fue frustrante para los usuarios móviles que se vieron atrapados en la versión móvil del sitio y no pudieron acceder a la información que sabían que estaba en la versión de escritorio con todas las funciones del sitio.

Diseño flexible antes del diseño receptivo

Se desarrollaron varios enfoques para tratar de resolver las desventajas de los métodos líquidos o de ancho fijo para crear sitios web. En 2004, Cameron Adams escribió una publicación titulada Diseño dependiente de la resolución, que describe un método para crear un diseño que podría adaptarse a diferentes resoluciones de pantalla. Este enfoque requería JavaScript para detectar la resolución de la pantalla y cargar el CSS correcto.

Zoe Mickley Gillenwater fue instrumental en su trabajo para describir y formalizar las diferentes formas en que se podían crear sitios flexibles, intentando encontrar un medio entre llenar la pantalla o tener un tamaño completamente fijo.

Diseño de respuesta

El término diseño receptivo fue acuñado por Ethan Marcotte en 2010, y describió el uso de tres técnicas en combinación.

  1. La primera fue la idea de redes fluidas, algo que ya estaba siendo explorado por Gillenwater, y puede leerse en el artículo de Marcotte, Fluid Grids (publicado en 2009 en A List Apart).
  2. La segunda técnica fue la idea de imágenes fluidas. Usando una técnica muy simple de establecer la propiedad de max-width al 100%, las imágenes se reducirían si su columna de contención se volvía más estrecha que el tamaño intrínseco de la imagen, pero nunca se haría más grande. Esto permite que una imagen se reduzca para ajustarse a una columna de tamaño flexible, en lugar de desbordarse, pero no se agrande y se pixele si la columna se ensancha más que la imagen.
  3. El tercer componente clave fue la consulta de medios. Las consultas de medios habilitan el tipo de cambio de diseño que Cameron Adams había explorado previamente usando JavaScript, usando solo CSS. En lugar de tener un diseño para todos los tamaños de pantalla, el diseño podría cambiarse. Las barras laterales se pueden reposicionar para una pantalla más pequeña, o se puede mostrar una navegación alternativa.

Es importante comprender que el diseño web receptivo no es una tecnología separada: es un término utilizado para describir un enfoque para el diseño web, o un conjunto de mejores prácticas, utilizado para crear un diseño que pueda responder al dispositivo que se está utilizando para ver el contenido En la exploración original de Marcotte, esto significaba cuadrículas flexibles (mediante flotadores) y consultas de medios, sin embargo, en los casi 10 años desde que se escribió ese artículo, trabajar de manera receptiva se ha convertido en el valor predeterminado. Los métodos modernos de diseño CSS son inherentemente receptivos, y tenemos nuevas cosas integradas en la plataforma web para facilitar el diseño de sitios receptivos.

El resto de este artículo te indicará las diversas características de la plataforma web que quizás desees utilizar al crear un sitio receptivo.

La consulta de medios

El diseño receptivo solo pudo surgir debido a la consulta de medios. La especificación de Nivel 3 de Consultas de Medios se convirtió en una Recomendación de Candidatos en 2009, lo que significa que se consideró lista para su implementación en los navegadores. Las consultas de medios nos permiten ejecutar una serie de pruebas (por ejemplo, si la pantalla del usuario es mayor que un cierto ancho o una determinada resolución) y aplicar CSS selectivamente para diseñar la página de manera adecuada para las necesidades del usuario.

Por ejemplo, la siguiente consulta de medios experimenta para ver si la página web actual se muestra como un medio de pantalla (por lo tanto, no es un documento impreso) y la ventana tiene al menos 800 píxeles de ancho. El CSS para el selector .container solo se aplicará si estas dos cosas son ciertas.

@media screen and (min-width: 800px) { 
  .container { 
    margin: 1em 2em; 
  } 
} 

Puedes añadir múltiples consultas de medios dentro de una hoja de estilo, ajustando todo tu diseño o partes de él para que se adapte mejor a los diferentes tamaños de pantalla. Los puntos en los que se introduce una consulta de medios y se cambia el diseño, se conocen como puntos de interrupción.

Un enfoque común cuando se usan las consultas de medios es crear un diseño simple de una sola columna para dispositivos de pantalla estrecha (por ejemplo, teléfonos móviles), luego buscar pantallas más grandes e implementar un diseño de múltiples columnas cuando se sabe que tiene suficiente ancho de pantalla para manejarlo . Esto a menudo se describe como primer diseño móvil.

Obtén más información en la documentación de MDN para consultas de medios.

Cuadrículas flexibles

Los sitios receptivos no solo cambian su diseño entre puntos de interrupción, sino que se crean en cuadrículas flexibles. Una cuadrícula flexible significa que no necesitas apuntar a todos los tamaños de dispositivo posibles que existen y construir un diseño perfecto de píxeles para ello. Ese enfoque sería imposible dada la gran cantidad de dispositivos de diferentes tamaños que existen, y el hecho de que al menos en el escritorio, las personas no siempre tienen la ventana de su navegador maximizada.

Al usar una cuadrícula flexible, solo necesitas añadir un punto de interrupción y cambiar el diseño en el punto donde el contenido comienza a verse mal. Por ejemplo, si las longitudes de las líneas se vuelven indescifrablemente largas a medida que aumentas el tamaño de la pantalla, o un cuadro se aplasta con dos palabras en cada línea a medida que se estrecha.

En los primeros días del diseño receptivo, nuestra única opción para realizar el diseño era usar flotantes. Los diseños flotantes flexibles se lograron dando a cada elemento un ancho porcentual y asegurando que no fueran de más del 100%. En su pieza original sobre cuadrículas fluidas, Marcotte detalló una fórmula para tomar un diseño diseñado usando píxeles y convertirlo en porcentajes.

target / context = result 

Por ejemplo, si el tamaño de nuestra columna de destino es de 60 píxeles y el contexto (o contenedor) en el que se encuentra es de 960 píxeles, dividimos 60 por 960 para obtener un valor que podamos usar en nuestro CSS, después de mover el punto decimal dos lugares a la derecha.

.col { 
  width: 6.25%; /* 60 / 960 = 0.0625 */ 
} 

Este enfoque se encontrará en muchos lugares en la web hoy, y está documentado aquí en la sección de diseño de nuestro artículo sobre métodos de diseño heredados. Es probable que encuentres sitios web que utilicen este enfoque en su trabajo, por lo que vale la pena entenderlo, a pesar de que no construirás un sitio moderno utilizando una cuadrícula flexible basada en flotantes.

El siguiente ejemplo muestra un diseño receptivo sencillo utilizando consultas de medios y una cuadrícula flexible. En pantallas estrechas, el diseño muestra los cuadros apilados uno encima del otro:

Una vista móvil del diseño con cuadros apilados uno encima del otro verticalmente.

En pantallas más anchas se mueven a dos columnas:

Una vista de escritorio de un diseño con dos columnas.

Nota: Puedes encontrar el ejemplo en vivo y el código fuente de este ejemplo en GitHub.

Tecnologías modernas de diseño

Los métodos de diseño modernos, como el diseño de múltiples columnas, Flexbox y Grid responden de manera predeterminada. Todos asumen que estás tratando de crear una cuadrícula flexible y te brindan formas más fáciles de hacerlo.

Multicol

El más antiguo de estos métodos de diseño es multicol. Cuando especificas un column-count, esto indica en cuántas columnas deseas dividir tu contenido. El navegador entonces calcula el tamaño de estos, un tamaño que cambiará de acuerdo con el tamaño de la pantalla.

.container { 
  column-count: 3; 
} 

Si en su lugar especificas column-width, estás especificando un ancho mínimo. El navegador creará tantas columnas de ese ancho como quepan cómodamente en el contenedor, luego compartirá el espacio restante entre todas las columnas. Por lo tanto, el número de columnas cambiará según la cantidad de espacio que haya.

.container { 
  column-width: 10em; 
} 

Flexbox

En Flexbox, los elementos flexibles se encogerán y distribuirán espacio entre los elementos según el espacio en su contenedor, como su comportamiento inicial. Al cambiar los valores de flex-grow y flex-shrink, puedes indicar cómo desees que se comporten los elementos cuando encuentran más o menos espacio a su alrededor.

En el siguiente ejemplo, los elementos de flexión ocuparán cada uno la misma cantidad de espacio en el contenedor de flex, utilizando la abreviatura flex: 1 como se describe en el artículo Flexbox: Dimensionamiento flexible de artículos flexibles.

.container { 
  display: flex; 
} 

.item { 
  flex: 1; 
} 

Nota: Como ejemplo, hemos reconstruido el diseño receptivo simple anterior, esta vez usando flexbox. Puedes ver cómo ya no necesitamos usar valores de porcentaje extraños para calcular el tamaño de las columnas: ejemplo, código fuente.

Cuadrículas CSS

En Diseñar cuadrículas en CSS la unidad fr permite la distribución del espacio disponible en las pistas de la cuadrícula. El siguiente ejemplo crea un contenedor de cuadrícula con tres pistas dimensionadas a 1fr. Esto creará tres columnas, cada una de las cuales ocupará una parte del espacio disponible en el contenedor. Puedes obtener más información sobre este enfoque para crear una cuadrícula en el módulo Aprender a diseñar cuadrículas en Cuadrículas flexibles con la unidad fr.

.container { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
} 

Nota: La versión del diseño de la cuadrícula es aún más simple, ya que podemos definir las columnas de .wrapper: ejemplo, código fuente.

Imágenes receptivas

El enfoque más simple para las imágenes receptivas fue como se describe en los primeros artículos de Marcotte sobre diseño receptivo. Básicamente, tomaría una imagen que tuviera el tamaño más grande que pudiera necesitar, y la reduciría. Este sigue siendo un enfoque utilizado hoy en día, y en la mayoría de las hojas de estilo encontrarás el siguiente CSS en alguna parte:

img {
  max-width: 100%:
} 

Hay inconvenientes obvios en este enfoque. La imagen puede mostrarse mucho más pequeña que su tamaño intrínseco, lo cual es una pérdida de ancho de banda: un usuario móvil puede descargar una imagen varias veces el tamaño de lo que realmente ve en la ventana del navegador. Además, es posible que no desees la misma relación de aspecto de la imagen en dispositivos móviles que en computadoras de escritorio. Por ejemplo, podría ser bueno tener una imagen cuadrada para dispositivos móviles, pero mostrar la misma escena que una imagen horizontal en el escritorio. O bien, reconociendo el tamaño más pequeño de una imagen en dispositivos móviles, es posible que desees mostrar una imagen completamente diferente, una que se entienda más fácilmente en un tamaño de pantalla pequeño. Estas cosas no se pueden lograr simplemente reduciendo una imagen.

Las imágenes receptivas, que utilizan el elemento <picture> y los atributos <img> srcsetsizes resuelven ambos problemas. Puedes proporcionar varios tamaños junto con «sugerencias» (metadatos que describen el tamaño de pantalla y la resolución para que la imagen sea la más adecuada), y el navegador elegirá la imagen más adecuada para cada dispositivo, asegurando que el usuario descargará un tamaño de imagen apropiado para el dispositivo que están utilizando.

También puedes crear imágenes directas utilizadas en diferentes tamaños, proporcionando así un recorte diferente o una imagen completamente diferente a diferentes tamaños de pantalla.

Puedes encontrar una guía detallada de imágenes receptivas en la sección Aprender HTML aquí en MDN.

Tipografía receptiva

Un elemento de diseño receptivo no cubierto en trabajos anteriores fue la idea de la tipografía receptiva. Esencialmente, esto describe el cambio de tamaños de letra dentro de las consultas de medios para reflejar cantidades menores o mayores de espacio en la pantalla.

En este ejemplo, queremos establecer que nuestro encabezado de nivel 1 sea 4rem, lo que significa que será cuatro veces nuestro tamaño de letra base. ¡Es un título muy grande! Solo queremos este encabezado gigante en tamaños de pantalla más grandes, por lo tanto, primero creamos un encabezado más pequeño y luego usamos consultas de medios para sobrescribirlo con el tamaño más grande si sabemos que el usuario tiene un tamaño de pantalla de al menos 1200px.

html { 
  font-size: 1em; 
} 

h1 { 
  font-size: 2rem; 
} 

@media (min-width: 1200px) { 
  h1 {
    font-size: 4rem; 
  }
} 

Hemos editado nuestro ejemplo de cuadrícula de respuesta anterior para incluir también el tipo de respuesta utilizando el método descrito. Puedes ver cómo el encabezado cambia de tamaño a medida que el diseño va a la versión de dos columnas.

En el móvil, el encabezado es más pequeño:

Un diseño apilado con un tamaño de encabezado pequeño.

Sin embargo, en el escritorio vemos un tamaño de encabezado más grande:

Un diseño de dos columnas con un título grande.

Nota: Mira este ejemplo en: ejemplo, el código fuente.

Como muestra este enfoque de la tipografía, no es necesario restringir las consultas de medios para que solo cambien el diseño de la página. Se pueden usar para ajustar cualquier elemento para hacerlo más útil o atractivo en tamaños de pantalla alternativos.

El uso de unidades de ventana gráfica para tipografía receptiva

Un enfoque interesante es utilizar la unidad de ventana gráfica vw para habilitar la tipografía receptiva. 1vw es igual al uno por ciento del ancho de la ventana gráfica, lo que significa que si configuras el tamaño de fuente usando vw, siempre se relacionará con el tamaño de la ventana gráfica.

h1 {
  font-size: 6vw;
}

El problema de hacer lo anterior es que el usuario pierde la capacidad de enfocar cualquier conjunto de texto usando la unidad vw, ya que ese texto siempre está relacionado con el tamaño de la ventana gráfica. Por lo tanto, nunca debe establecer texto utilizando solo unidades de ventana.

Hay una solución e implica el uso de calc(). Si añades la unidad vw a un conjunto de valores utilizando un tamaño fijo, como em o rem, el texto seguirá siendo ampliable. Esencialmente, la unidad vw añade además de ese valor ampliado:

h1 {
  font-size: calc(1.5rem + 3vw);
}

Esto significa que solo necesitamos especificar el tamaño de letra para el encabezado una vez, en lugar de configurarlo para dispositivos móviles y redefinirlo en las consultas de medios. La fuente luego aumenta gradualmente a medida que aumenta el tamaño de la ventana gráfica.

Mira un ejemplo en: ejemplo, el código fuente.

La metaetiqueta viewport

Si observas la fuente HTML de una página receptiva, generalmente verás la siguiente etiqueta <meta> en el encabezado del documento.

<meta name="viewport" content="width=device-width,initial-scale=1">

Esta metaetiqueta le dice a los navegadores móviles que deben establecer el ancho de la ventana gráfica al ancho del dispositivo y escalar el documento al 100% de su tamaño deseado, lo que muestra el documento en el tamaño optimizado para dispositivos móviles que deseas.

¿Por qué esto es necesario? Porqué los navegadores móviles tienden a mentir sobre el ancho de su ventana gráfica.

Esta metaetiqueta existe porque cuando se lanzó el iPhone original y la gente comenzó a ver sitios web en una pequeña pantalla de teléfono, la mayoría de los sitios no estaban optimizados para dispositivos móviles. Por lo tanto, el navegador móvil establecería el ancho de la ventana gráfica en 960 píxeles, representaría la página con ese ancho y mostraría el resultado como una versión reducida del diseño del escritorio. Otros navegadores móviles (por ejemplo, en Google Android) hicieron lo mismo. Los usuarios podían acercarse y desplazarse por el sitio web para ver los bits que les interesaban, pero se veía mal. Todavía verás esto hoy en día si tienes la desgracia de encontrarte con un sitio que no tiene un diseño receptivo.

El problema es que tu diseño receptivo con puntos de interrupción y consultas de medios no funcionará según lo previsto en los navegadores móviles. Si tienes un diseño de pantalla angosto que se inicia con un ancho de ventana de 480px o menos, y el puerto de visualización está configurado en 960px, nunca verás tu diseño de pantalla angosta en dispositivos móviles. Al configurar width=device-width estás anulando el ancho predeterminado width=960px de Apple con el ancho real del dispositivo, por lo que tus consultas de medios funcionarán según lo previsto.

Por lo tanto, siempre debes incluir la línea de HTML anterior en el encabezado de tus documentos.

Hay otras configuraciones que puedes usar con la metaetiqueta de ventana gráfica, sin embargo, en general, la línea anterior es lo que querrás usar.

  • initial-scale: Establece el zoom inicial de la página, que establecemos en 1.
  • height: Establece una altura específica para la ventana gráfica.
  • minimum-scale: Establece el nivel mínimo de zoom.
  • maximum-scale: Establece el nivel de zoom máximo.
  • user-scalable: Evita el zoom si se establece en no.

Debe evitar el uso de minimum-scale, maximum-scale y, en particular, establecer user-scalable en no. Se debe permitir a los usuarios hacer zoom tanto o tan poco como lo necesiten; prevenir esto provoca problemas de accesibilidad.

Nota: Hay una @regla CSS diseñada para reemplazar la metaetiqueta viewport: @viewport. Sin embargo, tiene poca compatibilidad con el navegador. Se implementó en Internet Explorer y Edge, sin embargo, una vez que se envíe el Edge basado en Chromium, ya no formará parte del navegador Edge.

Resumen

El diseño receptivo se refiere a un diseño de sitio o aplicación que responde al entorno en el que se visualiza. Abarca una serie de características y técnicas de CSS y HTML, y ahora es esencialmente cómo construimos sitios web de forma predeterminada. Piensa en los sitios que visitas con el teléfono; probablemente sea bastante inusual encontrar un sitio que tenga la versión de escritorio reducida o donde necesites desplazarse hacia los lados para encontrar cosas. Esto se debe a que la web se ha movido a este enfoque de diseño receptivo.

También se ha vuelto mucho más fácil lograr diseños receptivos con la ayuda de los métodos de diseño que has aprendido en estas lecciones. Si eres nuevo en el desarrollo web, hoy en día tienes muchas más herramientas a tu disposición que en los primeros días del diseño receptivo. Por lo tanto, vale la pena verificar la antigüedad de los materiales a los que haces referencia. Si bien los artículos históricos siguen siendo útiles, el uso moderno de CSS y HTML hace que sea mucho más fácil crear diseños elegantes y útiles, sin importar con qué dispositivo el visitante vea el sitio.

En este módulo