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.

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

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%;
  }
}

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>

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.

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.

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

¿¡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.

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.

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