Diseño web responsivo

Cuando diseñanos una web, y la destinamos a diferentes dispositivos, tenemos dos alternativas:

  • Hacer varias versiones, cada una destinada a un dispositivo con una pantalla diferente.
  • Hacer un diseño "responsivo" (que es una mala traducción del término "responsive" -adaptativo- del inglés).

Consejos para para un diseño web responsivo

Para que un diseño responsivo sea fácil de mantener, hay algunos consejos prácticos a tener en cuenta:

  • No usar estilos incrustados en el código: Los estilos deben estar definidos de forma separada a los contenidos.
  • La web no se ve igual en todos los dispositivos y navegadores: La experiencia del usuario debe ser buena en cualquier dispositivo y navegador. Pero intentar que la página se vea igual en Google Chrome que en IE, es echarnos sobre nuestras espaldas las diferencias que los fabricantes deciden aplicar.
  • No diseñar para una u otra plataforma: no es una buena idea descubrir qué navegador nos visita, y en tal caso aplicar una u otra técnica. Esto nos dejará fuera de juego conforme vayan apareciendo nuevas plataformas.
  • Usar medidas relativas: Las medidas absolutas son torpes adaptándose.

Enfoque de los estilos

Cuando hablamos de estilos, podemos dividirlos en dos grupos principales:

  • Recursos estéticos: Son los que mejoran la estética de un sitio, como fuentes tipográficas, esquinas redondeadas, sombras, animaciones, etc... Debemos garantizar que si estos estilos no se aplican (por limitaciones de la plataforma), el contenido de la página sigue siendo accesible (aunque no sea tan bonito).
  • Layout: El layout estructura la información para que el usuario pueda determinar a simple vista la importancia de cada cosa por su posición. Aunque estemos en diferentes dispositivos, la ubicación de cada parte de la página debe ser adecuado (teniendo en cuenta el tamaño de la pantalla), y desde luego, no deben pasar cosas como cajas que se montan unas encima de otras.

La interpretación de CSS según el navegador

Nuestro sitio puede ser visitado desde navegadores antiguos que no comprendan el estándar CSS3, y por otros que sí lo comprendan. La cuestión es esta: Siempre partimos del mismo código html

¿Cómo empezar con nuestras reglas CSS? Parece una locura escribir una hoja de estilos compatible con navegadores que no comparten la misma idea de CSS, y aprovechar las mejores características de ésta. Las solución se puede enfocar de dos formas:

  • Progressive enhancement
    1. Empezar diseñando unos estilos centrados en sistemas más antiguos.
    2. Una vez que un sistema anticuado pueda ver correctamente nuestro sitio, pasamos a añadir características propias de navegadores actuales.
    3. Finalmente añadimos las características más novedosas o experimentales que solo implementan ciertos navegadores.

    Este enfoque tiene como inconveniente que puede ser complicado adaptar un diseño pensado para desktop a un dispositivo como un móvil.

  • Graceful degradation
    1. Empezamos diseñando para las plataformas más actuales.
    2. Cuando hemos visto que se ve como esperábamos en dichas plataformas, vamos probando en navegadores más antiguos. Así, vamos corrigiendo los problemas de visualización.

    Este enfoque tiene como inconveniente que puede dar lugar a un parcheo de los estilos para adaptarse a plataformas antiguas.

Los estilos se pueden ir refinando en capas diferentes de dos maneras:

  • Mediante diferentes archivos css que se enlazarán uno a uno desde el código de cada página. Los estilos más actuales serán los últimos en cargarse.
  • Dentro de la misma hoja de estilos, añadiendo los estilos más actuales al final

El siguiente ejemplo, importa varias hojas de estilos que incorporan capas con diferente nivel de actualización:

<link rel="stylesheet" type="text/css" href="layout_clasico.css"/> <link rel="stylesheet" type="text/css" href="layout_actual.css"/>

Hay que tener en cuenta que las capas no se pisarán entre sí si no hay conflictos en las reglas. Además, los navegadores antiguos ignorarán las características que no conozcan.

¿Merece la pena perder tiempo en soportar antiguos navegadores?

Mobile First

Se trata de una filosofía de diseño que se centra en que las páginas se vean bien en plataformas actuales, incluyendo el móvil. Esta filosofía incluye algunos aspectos destacables, que se citan a continuación.

En lo relativo a plataformas antiguas, esta filosofía se ajusta más a un enfoque "Graceful degradation".

Contenidos

Los contenidos que caben en la pantalla de un móvil no son los mismos que caben en una pantalla de 21 pulgadas. Hay que elegir qué elementos se mostrarán en una página y qué elementos no, dejando sólo los más importantes.

Estilo

Una vez que hemos elegido los contenidos, podemos podemos ir partiendo de una ventana de navegador reducida, y así ir comprobando si el resultado es adecuado para una pantalla de móvil. Después, iremos aumentando el tamaño de la ventana hasta que observemos que el aspecto no es el adecuado, momento en que podemos introducir un "punto de ruptura" mediante un "media query".

Media queries

Mediante las "media queries" podemos hacer que se apliquen unos estilos u otros según:

  • si la página se va a ver en pantalla o se va a imprimir.
  • el espacio disponible para la vistualización
  • Otros criterios

En developer.mozilla.org/es/docs/CSS/Media_queries hay una completa descripción sobre cómo usar las media queries.

Las media queries se pueden utilizar de dos formas. Por ejemplo, supongamos que tenemos la siguiente "media query":

(min-width: 700px) and (orientation: landscape)
  • Podemos aplicarla desde la etiqueta link
  • <link rel="stylesheet" href="estilo-pantallas-medianas.css" media="(min-width: 700px) and (orientation: landscape)">
  • O bien, podemos aplicarla dentro de la misma hoja de estilos
  • @media (min-width: 700px) and (orientation: landscape){ ... estilos aquí ... }

El orden de las media queries es importante. Si seguimos el principio de "Mobile first", deberemos utilizar el siguiente criterio:

  1. Primero colocaremos los estilos comunes a todos los dispositivos, sin utilizar ningún media query
  2. Después iremos colocando MQ (Media Queries) de tamaño ascendente, con rangos como los siguientes:
@media (min-width: 700px) and (max-width: 800px){ ... estilos aquí ... }

Orientar los puntos de ruptura a dispositivos

Esto es un error. Los puntos de ruptura mediante MQ deben orientarse a contenido. Por ello, no debemos pensar en medidas estándar de dispositivos sino en cambios progresivos en el tamaño de la pantalla.

Podemos poner tantos puntos de ruptura como queramos, siempre que la forma en que el contenido se presenta no nos parece el adecuado.

Las unidades de medida tipográficas

Habitualmente se utiliza la medida em para establecer el tamaño de la fuente. Sin embargo, puede ser más conveniente utilizar rem (root-em), que no se basa en el contenedor, sino en el tamaño predifinido por el navegador. Esto nos quita muchos inconvenientes a la hora de recordar cuál es el tamaño de fuente del contenedor.

Los navegadores antiguos no comprenderén esta medida. Por eso, podemos utilizar un "fallback":

font-size: 2em; font-size: 10rem;

De este modo, los navegadores más antiguos descartarán la segunda línea, ya que no sabrán interpretarla.

El viewport

El viewport es el área disponible para mostrar una página. A priori, puede parecer que es lo mismo que el tamaño de la ventana, pero no.

El navegador del móvil miente

Los navegadores de los móviles simulan tener un tamaño superior al que tienen, para que quepa el contenido de las páginas en su pantalla. De este modo, si estamos visitando una página antigua, que exprese sus medidas en píxeles, no se verá solo una fracción de la página, sino que el contenido se comprimirá para que quepa en la pantalla. Esto es así, porque viewport del navegador coincide con un tamaño de pantalla de escritorio.

Si hacemos un diseño responsivo, con MQ para tamaños de como el de nuestro móvil, veremos que el móvil toma la versión para pantalla grande. La razón, es que el tamaño del viewport es superior al tamaño real del dispositivo.

Restableciendo el viewport

Para que el viewport del móvil coincida con el tamaño real de pantalla, debemos incluir la etiqueta "meta viewport":

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

Para conocer más sobre la etiqueta viewport, podemos consultar en developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag. En general, las opciones más habituales son:

  • width=device-width hace que la anchura real de la pantalla coincida con el viewport.
  • initial-scale=1 indica que no se debe hacer zoom sobre la pantalla.
  • user-scalable=no impide que el usuario pueda hacer zoom. Esto puede ser algo negativo si el usuario necesita ver algún elemento concreto de la pantalla mejor.
  • maximum-scale=2 permite que se puede hacer un zoom de 2 aumentos como máximo.
  • minimum-scale=0.5 indica qué nivel de zoom inverso se puede hacer como máximo. Es menos usado, ya que mediante la MQ ajustamos la estructura al dispositivo.

Tamaños relativos al viewport

Además de las medidas habituales, como "px", "em" o "%" existen medidas relativas al viewport.

  • vh (viewport height): 100vh equivale a la altura de la pantalla.
  • vw (viewport width): 100vw equivale a la anchura de la pantalla.

Debemos tener en cuenta que algunos navegadores de escritorio antiguos no entenderán estas medidas, por lo que debemos hacer un fallback para que posea las medidas correctas.

La ventaja de utilizar las medidas vh y vw es que se puede aplicar al texto. De este modo, podemos conseguir que la letra se vea igual en cualquier pantalla. Por ejemplo, si probamos este código en una ventana cuyo tamaño vamos cambiando, veremos como el tamaño de la tipografía cambia, y la estructura del texto siempre es la misma:

<!DOCTYPE html> <html> <head> <title></title> <style> .estilo_simple{ width:50vw; background-color:gray; font-size:10vw; } </style> </head> <body> <p class="estilo_simple">Hola mundo!</p> </body> </html>

Y con esto, terminamos nuestra introducción al diseño responsivo.