Diseño web adaptativo: cómo hacer que un sitio web se vea bien en teléfonos y tabletas

Original article: Responsive Web Design – How to Make a Website Look Good on Phones and Tablets

En el panorama de los dispositivos conectados evolucionando rápidamente, el diseño web adaptativo (adaptable a cualquier dispositivo) sigue siendo crucial en el desarrollo web.

No hace mucho tiempo, el término "diseño web adaptativo" no existía. Pero hoy, la mayoría de nosotros hemos tenido que adoptarlo hasta cierto punto.

Según (las estadísticas) Statistica, a partir de 2019, el 61% de todas las visitas de búsqueda de Google se realizan en un dispositivo móvil. En septiembre de 2020, Google cambiará su algoritmo de búsqueda para priorizar los sitios web compatibles con dispositivos móviles.

En esta publicación cubriré lo siguiente:

• ¿Qué es el diseño web adaptativo?
• La metaetiqueta viewport y lo que hace
• Técnicas efectivas utilizadas en el diseño web responsive para adaptarse a dispositivos móviles y tabletas
• Herramientas para ayudar a simular y monitorizar la experiencia del usuario de dispositivos móviles y tabletas

¿Qué es el diseño web adaptativo? (RWD)

El diseño web adaptativo se enfoca en el entorno del usuario de un sitio web. El entorno del usuario dependerá de qué dispositivo tenga conectado a Internet.

Hay muchas características de los dispositivos que proporcionan oportunidades para un enfoque centrado en el usuario. Algunas de estas incluyen:

• conexión de red
• tamaño de pantalla
• tipo de interacción (pantallas táctiles, almohadillas táctiles)
• resolución de pantalla.

Antes de que el diseño web adaptativo fuera popular, muchas empresas administraban un sitio web completamente separado que recibía el tráfico reenviado en función del agente de usuario.

Pero en el diseño web adaptativo, el servidor siempre envía el mismo código HTML a todos los dispositivos, y se usa CSS para alterar la representación de la página en el dispositivo.

Independientemente de las dos estrategias anteriores, el primer paso para crear un sitio web para teléfono o tableta es asegurarse de que el navegador conozca la intención. Aquí es donde entra en juego la metaetiqueta viewport.

La metaetiqueta Viewport para identificar un sitio web móvil

La metaetiqueta 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 páginas web con la configuración de escritorio predeterminada. Esto da como resultado una experiencia aparentemente alejada y no adaptativo.

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

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

Ahora que el navegador sabe lo que sucede, ¿Podemos utilizar técnicas populares para hacer nuestro sitio web adaptativo?

Consultas @media CSS para diferentes tamaños y orientaciones de pantalla

Si eres nuevo en el diseño web adaptativo, las consultas @media son la primera y más importante característica de CSS que debes aprender. Las consultas @media te permiten diseñar elementos según el ancho de la ventana gráfica. Una estrategia popular de CSS es escribir estilos móviles primero y construir sobre ellos con estilos más complejos y específicos de escritorio.

Las consultas @media son una parte importante del diseño web adaptativo que se usa comúnmente para diseños de cuadrícula, tamaños de fuente, márgenes y relleno que difieren entre el tamaño y la orientación de la pantalla.

A continuación, se muestra un ejemplo de un caso de uso común de estilo móvil primero en el que una columna tiene un ancho del 100 % para dispositivos más pequeños, pero en viewports más grandes es del 50 %.

.column {
  width: 100%;
}

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

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

1. Al considerar el móvil primero, el elemento "columna" se configura para tener un ancho del 100%;
2. Al usar una consulta @media de min-width, definimos reglas específicamente para viewports con un ancho mínimo de 600px (ventanas de visualización más anchas que 600px). Por lo tanto, para viewports de más de 600px, nuestro elemento de columna tendrá un ancho del 50 % de su elemento principal.

Si bien las consultas @media son esenciales para el diseño web adaptativo, muchas otras características nuevas de CSS también se están adoptando ampliamente y son compatibles con los navegadores. Flexbox es una de estas nuevas e importantes características de CSS en términos de diseño web responsive.

¿Qué es FlexBox?

Quizás te estés preguntando: "¿Qué hace Flexbox?" La mejor pregunta es: "¿Qué no puede hacer Flexbox?" ¿Cuál es la forma más fácil de centrar verticalmente con CSS? FlexBox. ¿Cómo se crea una grid layout adaptativo? Flexbox. ¿Cómo podemos lograr la paz mundial? Flexbox.

El módulo Flexbox Layout (Flexible Box) proporciona una forma más eficiente de diseñar, alinear y distribuir el espacio entre los elementos de un contenedor, incluso cuando su tamaño es dinámico (de ahí la palabra "flex").

En el siguiente ejemplo, combinamos consultas @media como se explicó anteriormente para crear una cuadrícula adaptativo.

<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>

Logramos lo siguiente con este código:

1. Establecer un diseño de flexbox con display: flex en nuestro elemento contenedor main.
2. Estilo para móvil primero. Configuramos el elemento main a flex-wrap: wrap lo que permite que los elementos secundarios se envuelvan dentro de nuestro diseño de caja flexible (flexbox layout) como se ilustra a continuación en la figura 1. Establecemos  flex-basis: 100% en nuestros elementos div para garantizar que abarquen el 100% del ancho principal en el diseño de flexbox (figura 1).
3. Estilo para dispositivos más grandes como tabletas y ordenadores de escritorio. Utilizamos una consulta @media similar a nuestro ejemplo de la sección anterior para configurar nuestro elemento main del contenedor a flex-wrap: nowrap. Esto asegura que los elementos secundarios no se ajusten y que mantengan una columna dentro de un tipo de diseño de fila.
   Al establecer div en  flex-basis: 33% dentro de la consulta @media, establecemos columnas que tienen un 33% del ancho del padre (parent).
4. En este ejemplo, la magia aparecería en dispositivos más grandes con nuestras reglas combinadas de consultas @media y flexbox. porque definimos display: flex , y debido a que no anulamos la regla dentro de la consulta @media, tenemos un diseño flexible para dispositivos móviles, tabletas y computadoras de escritorio. La consulta @media flex-basis: 33% y las reglas heredadas de display: flex nos darán un diseño de caja flexible reconocible como se ve en la figura 2. En el pasado, para lograr este tipo de diseño de columna, tendríamos que hacer un trabajo arduo y escribir enredos de CSS.

Flexbox proporciona una excelente manera de lograr diseños variados y fluidos. En algunos casos, es posible que no tengamos esa libertad en el espacio vertical. Es posible que necesitemos encajar un elemento dentro de una altura fija. En esta situación, tenemos otra técnica a nuestra disposición: el desplazamiento horizontal.

Desplazamiento horizontal con desplazamiento de desbordamiento

Puede llegar un momento en que tenga contenido que desborde la ventana gráfica (viewport) sin una forma elegante de manejarlo. He aquí... ¿Overflow scroll al rescate?

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

<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>Responsive Web Design</span>
  <span>RWD</span>
  <span>Responsive menu</span>
  <span>Overflow scroll example</span>
  <span>This is a lot of content!</span>
  <span>Yes</span>
  <span>we</span>
  <span>have</span>
  <span>another</span>
  <span>item</span>
</menu>

¿¡Cómo hiciste eso!? Hagamos una inmersión más profunda.

• overflow-y: scroll es el ingrediente clave de esta receta. Al especificarlo, los elementos hijos desbordarán el eje horizontal con un comportamiento de desplazamiento.
• ¡No tan rapido! Aunque puedas pensar que overflow-y sería suficiente, también tenemos que decirle al navegador que no envuelva los elementos hijos con white-space: nowrap

Ahora que tenemos algunas técnicas de diseño RWD bajo la manga, echemos un vistazo a los elementos que plantean desafíos específicos a su naturaleza visual: imágenes y video.

Imágenes adaptativas

Mediante el uso de atributos de etiquetas de imágenes, podemos acomodar una variedad de dispositivos y resoluciones. A continuación se muestra un ejemplo de una imagen adaptativa.

<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 está haciendo muchas cosas. Vamos a desglosarlo:

1. Configurando max-width: 100% la imagen se escalará hacia arriba o hacia abajo según el ancho de su contenedor.
2. Mediante el uso de una combinación de las etiquetas picture, source, e img en realidad, solo representamos una imagen y solo cargamos la imagen que mejor se ajusta según el dispositivo del usuario.
3. WebP es un formato de imagen moderno que proporciona una compresión superior para imágenes en la web. Utilizando source podemos hacer referencia a una imagen WebP para usarla en navegadores que la admitan, y otra etiqueta source para hacer referencia a una versión PNG de las imágenes que no son compatibles con WebP.
4. srcset se usa para decirle al navegador qué imagen usar según la resolución del dispositivo.
5. Establecemos la carga diferida nativa utilizando el par atributo/valor loading="lazy".

Vídeo adaptativo

El video adaptativo es otro tema que ha inspirado una gran cantidad de artículos y documentación.

Una estrategia clave para establecer imágenes, videos, iframes y otros elementos adaptativos implica el uso de la relación de aspecto. El cuadro de relación de aspecto no es una técnica nueva y es una herramienta bastante útil para tener bajo la manga como desarrollador web.

Este artículo proporciona una demostración sólida sobre cómo lograr videos de ancho "fluido". Echemos un vistazo al código y lo desglosamos.

<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 de YouTube incrustado como un iframe y un contenedor div con la clase videoWrapper. Este código está haciendo mucho... profundicemos.

• position: relative en el elemento contenedor permite que los elementos hijos utilicen el posicionamiento absoluto en relación con él.
• height: 0 combinado con padding-bottom: 56.25% es el ingrediente clave aquí que establece un comportamiento dinámico, imponiendo una relación de aspecto de 16:9.
• position: absolute, top: 0 y left: 0 establecido en el iframe crea un comportamiento en el que el elemento se posiciona absolutamente en relación con su raíz (parent)... pegándolo en la parte superior izquierda.
• Y finalmente, el ancho y la altura del 100% hacen que el elemento secundario, iframe sea el 100% de su raíz. La raíz, .videoWrapper toma el control total de establecer este diseño de relación de aspecto.

Lo sé... es mucho. Podemos hacer más para que los videos y las imágenes se vean mejor en teléfonos y tabletas. Fomentaría la investigación sobre esos temas de forma independiente además de esto.

Bien, ahora que somos expertos en diseño web adaptativo, ¿cómo podemos probar lo que hemos hecho? Afortunadamente, tenemos varias herramientas para simular y monitorizar la experiencia del usuario en una variedad de dispositivos.

Herramientas para simular y monitorizar sitios web adaptativos

Hay una variedad de herramientas útiles para ayudarnos a crear sitios web con un diseño web adaptativo. A continuación hay un par que me parecen especialmente útiles.

Emulación móvil de Chrome DevTools

Chrome's DevTools proporciona emulación móvil de una variedad de tabletas y dispositivos móviles. También proporciona una opción  "adaptativo" que te permite definir un tamaño de ventana (viewport) de visualización personalizado.

Monitorización del rendimiento del sitio web móvil con Foo

Lighthouse es una herramienta de código abierto que proporciona una forma de analizar el rendimiento del sitio web específico para un dispositivo.

Foo usa Lighthouse en segundo plano para monitorizar el rendimiento del sitio web y proporciona comentarios para el análisis. Puedes configura la monitorización para dispositivos móviles y de escritorio para obtener comentarios continuos sobre la capacidad de respuesta de tu sitio web.

Por ejemplo, un informe de Lighthouse destacará las imágenes que se cargaron incorrectamente según el dispositivo.

Conclusión

El diseño web adaptativo continuará evolucionando rápidamente, pero si nos mantenemos al tanto de las tendencias actuales, podemos brindar la mejor experiencia a nuestros usuarios. ¡Espero que estas herramientas y técnicas sean útiles!

Los usuarios de nuestro sitio web no solo se beneficiarán de un diseño versátil, sino que también los motores de búsqueda clasificarán nuestras páginas web más alto.