En el panorama de rápida evolución de dispositivos conectados, el diseño web responsive continúa siendo crucial en el desarrollo web.

Hasta hace poco, el término “desarrollo web responsive” era inexistente. Actualmente la mayoría de nosotros hemos tenido que adoptarlo de alguna manera.

De acuerdo a Statista, desde el 2019, 61% de todas las visitas a la búsqueda de Google se realizan desde un dispositivo móvil. En septiembre de 2020, Google cambió su algoritmo de búsqueda para priorizar sitios web que sean amigables con la navegación desde dispositivos móviles.

En este post abordaré lo siguiente:

  • ¿Qué es el diseño web responsive?
  • El meta tag viewport y lo que hace
  • Técnicas efectivas usadas en el diseño web responsive para adaptarse a dispositivos móviles y tabletas
  • Herramientas que ayudan a simular y monitorear la experiencia del usuario en dispositivos móviles y tabletas

¿Qué es el Diseño Web Responsive? (RWD)

El diseño web responsive es un enfoque que se centra en el entorno del usuario dentro de un sitio web. El entorno del usuario dependerá del dispositivo que tenga conectado a internet.

Existen múltiples características de un dispositivo que brindan oportunidades para hacer un enfoque centrado en el usuario. Algunas de estas incluyen:

  • Conexión de red
  • Tamaño de la pantalla
  • Tipos de interacción (pantallas táctiles, track pads)
  • Resolución gráfica.

Antes que el diseño web responsive fuese popular, muchas compañías manejaban un sitio web completamente separado, el cual recibía tráfico reenviado basándose en el agente de usuario (user-agent).

Pero en el diseño web responsive, el servidor siempre manda el mismo código HTML a todos los dispositivos y se hace uso de CSS para alterar la renderización de la página en el dispositivo.

Independientemente de las dos estrategias previas, el primer paso en la creación un sitio web para teléfonos o tabletas, es asegurarse que el navegador conozca la intención. Aquí es donde el meta tag viewport entra en juego.

El Meta Tag Viewport para identificar un sitio web móvil

El meta tag viewport le indica al navegador cómo ajustar la página al ancho de cada dispositivo.

Cuando el elemento meta viewport está ausente, los navegadores móviles mostrarán las páginas con su configuración de escritorio por defecto. Esto resulta en una experiencia que parece ser no responsive y de vista reducida.

A continuación una implementación estándar:

<meta name="viewport" content="width=device-width,initial-scale=1"/>
Ejemplo de meta tag viewport

Ahora que el navegador sabe lo que está pasando, podemos utilizar técnicas populares para hacer que nuestro sitio web sea responsive.

Media Queries de CSS para Tamaños de Pantalla y Orientaciones Diferentes

Si eres nuevo al diseño web responsive, las Media Queries son la primera y más importante característica de CSS por aprender. Las Media Queries te permiten estilizar elementos basado en el ancho del viewport (área visible de un navegador). Una estrategia popular de CSS consiste en escribir los estilos móviles primero y construir sobre estos los estilos más complejos, específicos de escritorio.

Las Media Queries son una parte importante del diseño web responsive comúnmente usadas para grid layouts, tamaños de texto, márgenes y padding que difieren según el tamaño de pantalla y la orientación.

A continuación un ejemplo de un caso de uso común en estilización Mobile First, en donde una columna tiene 100% de ancho para dispositivos pequeños, pero en viewports más amplios tiene un 50% de ancho.

.column {
  width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 50%;
  }
}
Ejemplo CSS Mobile First

El código anterior es un ejemplo simple, pero lo que realmente hace es bastante interesante.

  1. Considerando Mobile First, el elemento "column" se le definió un ancho de 100%;
  2. Usando una Media Query min-width, definimos reglas específicamente para viewports con un ancho mínimo de 600px (área visible más anchas que 600px). De esta manera, para viewports más anchos que 600px, nuestro elemento "column" tendrá un ancho correspondiente al 50% de su elemento padre.

Si bien, las Media Queries son esenciales para el diseño web responsive, muchas otras características de CSS también están siendo adoptadas a gran escala y reciben soporte en los navegadores. Caja Flexible (Flexbox) es una de esas nuevas e importantes características de CSS cuando de diseño web responsive se trata.

¿Qué es Flexbox?

Te estarás preguntando — "¿Qué hace Flexbox?" La mejor pregunta sería — "¿Hay algo que Flexbox no pueda hacer?" ¿Cuál es la manera más fácil de centrar verticalmente con CSS? La respuesta: Flexbox. ¿Cómo se crea un diseño de cuadrícula (grid layout) responsive? Flexbox.

El módulo Diseño de Caja Flexible (Flexible Box Layout) proporciona una manera más eficiente de diseñar, alinear y distribuir espacio entre los ítems en un contenedor, incluso cuando su tamaño es dinámico — De ahí la palabra "flex".

En el ejemplo a continuación, combinamos Media Queries como se explica arriba para crear un Grid responsive.

<style>
  main {
    background: #d9d7d5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  div {
    background: #767775;
    flex-basis: 100%;
    height: 100px;
    margin-bottom: 0.5rem;
  }

  @media (min-width: 600px) {
    main {
      flex-wrap: nowrap;
    }

    div {
      flex-basis: 33%;
    }
  }
</style>
<main>
  <div></div>
  <div></div>
  <div></div>
</main>
Ejemplo CSS de Flexbox

Con este código logramos lo siguiente:

  1. Establecer un diseño Flexbox con display: flex en nuestro elemento contenedor llamado main.
  2. Estilizar para Mobile First. Definimos  flex-wrap: wrap al elemento main que permite a los elementos hijo acomodarse dentro de nuestro diseño Flexbox como se ilustra en la Figura 1. Definimos flex-basis: 100% en nuestro elemento div para asegurarnos que ocupe el 100% del ancho del elemento padre en el diseño Flexbox (Figura 1).
  3. Estilizar para dispositivos más grandes como las tabletas y computadores de escritorio. Utilizamos una Media Query similar a nuestro ejemplo en la sección anterior para establecerle flex-wrap: nowrap a nuestro elemento contenedor  main. Esto asegura que los elementos hijo no fluyan y el diseño se mantenga como columnas dentro de una sola fila. Al definir  flex-basis: 33% a div dentro de la Media Query — establecemos columnas que corresponden al 33% de ancho del elemento padre.
  4. En este ejemplo, la magia se vería en dispositivos más grandes con reglas combinadas de las Media Query y de Flexbox. Debido a que definimos  display: flex y, además, no anulamos la regla dentro de la Media Query, tenemos un diseño Flexbox para móviles, tabletas y escritorio. La Media Query flex-basis: 33% y la regla heredada display: flex nos da un diseño Flexbox reconocible como se puede observar en la Figura 2. En el pasado, hacer este tipo de diseño de columna era trabajo duro, siendo necesario escribir muchos enredos en CSS para lograrlo.
grid-mobile-1
Figura 1: Ejemplo de diseño flexbox grid para móviles
grid-desktop
Figura 2: Ejemplo de diseño flexbox grid para escritorio

Flexbox proporciona una buena manera de lograr diseños variados y fluidos. En algunos casos, puede que no tengamos este tipo de libertad en espacios verticales. Es posible que sea necesario adaptar un elemento a un valor de alto fijo. En dicha situación, existe otra técnica a nuestra disposición — desplazamiento horizontal.

Desplazamiento horizontal con Overflow Scroll

Podría llegar el momento en donde haya contenido se desborda del viewport sin una manera atractiva de resolverlo. He aquí... ¡Overflow Scroll al rescate!

Los usos comunes de esta técnica incluyen menús desplegables y tablas. A continuación un ejemplo de un menú desplazable.

Responsive Web Design RWD Responsive menu Overflow scroll example This is a lot of content! Yes we have another item
<style>
  menu {
    background: #d9d7d5;
    padding: 0.25rem;
    overflow-y: scroll;
    white-space: nowrap;
  }

  span {
    background: #767775;
    color: #ffffff;
    display: inline-block;
    margin: 0.25rem;
    padding: 0.5rem;
  }
</style>
<menu>
  <span>Deseño Responsive Web</span>
  <span>RWD</span>
  <span>menú Responsive</span>
  <span>Ejemplo Overflow scroll</span>
  <span>¡Esto es mucho contenido!</span>
  <span>Si</span>
  <span>Nosotros</span>
  <span>tenemos</span>
  <span>otro</span>
  <span>elemento</span>
</menu>
Ejemplo de menú con desplazamiento horizontal 

¿¡Pero cómo hiciste eso!? Profundicemos:

  • overflow-y: scroll es el ingrediente clave de esta receta. Al definirlo, los elementos hijo se desbordarán sobre el eje horizontal con comportamiento de desplazamiento.
  • ¡No tan rápido! Aunque pienses que  overflow-y es suficiente, también debemos hacerle saber al navegador que no envuelva a los elementos hijos con  white-space: nowrap.

Ahora que tenemos unas cuantas técnicas de RWD bajo nuestra manga, veamos elementos que suponen retos específicos por su naturaleza visual — imágenes y videos.

Imágenes Responsive

Al usar atributos de tag modernos para imágenes, podemos acomodar un rango de dispositivos y resoluciones. A continuación, un ejemplo de una imagen responsive.

<style>
  img {
    max-width: 100%;
  }
</style>

<picture>
  <source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
  <source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
  <img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>

Esto hace bastantes cosas. Vamos a desglosarlo:

  1. Al definir max-width: 100% la imagen se va a ampliar o reducir basada en el ancho de su contenedor.
  2. Al usar la combinación de los tags  picture, source e img, en realidad estamos renderizando solo una imagen y cargando la que mejor se adapte al dispositivo del usuario.
  3. WebP es un formato de imagen moderno que brinda compresión superior para imágenes en la web. Al utilizar  source podemos hacer referencia a una imagen WebP para usar en navegadores que cuenten con el soporte y agregar otro tag  source para referenciar una versión PNG de las imágenes que no tienen soporte WebP.
  4. srcset es usado para decirle al navegador qué imagen utilizar basada en la resolución del dispositivo.
  5. Establecemos native lazy loading (carga diferida nativa) mediante el uso del par atributo / valor (attribute / value)  loading="lazy".

Videos Responsive

El video Responsive es otro tema que ha inspirado un gran número de artículos y documentación.

Una estrategia clave para establecer imágenes, videos, iframes responsive y otros elementos implica el uso de relación de aspecto (aspect-ratio). La caja de relación de aspecto no es una técnica nueva y además es muy útil de tener bajo la manga para los Desarrolladores Web.

Este artículo brinda una demostración sólida acerca de cómo lograr vídeos de ancho "fluido". Veamos el código y desglosemos:

<style>
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }

  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

En este ejemplo tenemos un video embebido de YouTube cómo iframe y un contenedor div con la clase videoWrapper. Este código está haciendo bastante... profundicemos:

  • position: relative en el elemento contenedor le permite a los elementos hijos utilizar la posición absoluta, que es relativa a dicho elemento contenedor.
  • height: 0 combinado con padding-bottom: 56.25% es el ingrediente clave aquí, el cual establece un comportamiento dinámico, aplicando la relación de aspecto  16:9.
  • position: absolute, top: 0 y left: 0 definidos en el iframe, crean un comportamiento en el que los elementos se posicionan absolutamente relativos a su padre... fijándose en la parte superior izquierda.
  • Finalmente, width: 100% y height: 100%  hace que el elemento hijo iframe sea el 100% de su padre. El padre  .videoWrapper toma control completo de establecer la relación de aspecto.

Lo sé... es bastante. Hay más que podemos hacer para lograr que videos e imágenes se vean lo mejor posible en teléfonos y tabletas. Les animo a que investiguen estos temas por su cuenta en adición a esto.

Bien, ahora que somos los amos del diseño web responsive, ¿cómo podemos poner a prueba lo que hemos hecho? Afortunadamente, tenemos un número de herramientas para simular y monitorear la experiencia de usuario en una variedad de dispositivos.

Herramientas para simular y monitorear sitios web responsive

Existe una variedad de herramientas útiles para ayudarnos a crear sitios web con diseño responsive. A continuación encontramos un par de estas que me parecen especialmente útiles.

Emulación móvil en Chrome DevTools

Las Chrome DevTools (Herramientas para Desarrolladores de Chrome) proporcionan emulación móvil para un rango de tabletas y dispositivos móviles. También ofrece una opción "Responsive" que te permite definir un tamaño personalizado del viewport.

Screen-Shot-2020-07-12-at-6.19.18-PM
Figura 3: Emulación móvil y de tableta de Chrome DevTools

Monitoreando el desempeño de un Sitio Web Móvil con Foo

Lighthouse es una herramienta de código abierto (open-source) que brinda una manera de analizar el desempeño de un sitio específico a cada dispositivo.

Foo usa Lighthouse detrás de escena para monitorear el desempeño de un sitio web y brindar feedback para su análisis. Se puede configurar el monitoreo para ambos escritorio y dispositivos móviles y obtener feedback continuo acerca de qué tan responsive es tu sitio web.

Por ejemplo, un reporte de Lighthouse mostrará las imágenes que son cargadas inapropiadamente basada en el dispositivo.

Screen-Shot-2020-07-12-at-6.31.09-PM
Figura 4: Reporte de Lighthouse emulando un sitio web móvil

Conclusión

El diseño web responsive continuará evolucionando rápidamente, pero si nos mantenemos al tanto de las tendencias actuales, podremos brindar la mejor experiencia para nuestros usuarios. ¡Espero que estas herramientas y técnicas sean de gran utilidad!

No solo nuestros usuarios se beneficiarán de un diseño versátil, también los motores de búsqueda le darán a nuestra página una clasificación superior.

Traducido del artículo Responsive Web Design – How to Make a Website Look Good on Phones and Tablets de Adam Henson