Introducción al Diseño Web Adaptable o Responsive Web Design

 

01_Responsive_web_design

Hoy en día los usuarios de nuestras páginas web o tiendas online pueden acceder a las mismas desde diferentes medios: un ordenador de sobremesa con pantalla panorámica, un móvil, una tableta… Partiendo de la base de que el diseño de una web, para que funcione, tiene que estar centrada en el usuario (y no en el diseñador, en el programador o en el dueño de la web), es importante que la experiencia que tiene el usuario con nuestra web sea lo más placentera posible con independencia de qué medio esté usando para verla. Es por ello que últimamente tantos sitios webs están utilizando lo que se llama Responsive Web Design o Diseño Web adaptable.

¿Qué es el Responsive Web Design o Diseño Web Adaptable?

Son una serie de técnicas que permiten a nuestra página web adaptarse al medio a través del cual un usuario está accediendo a la misma. Los tamaños de pantalla cambian según el medio con el que se accede (no es lo mismo una pantalla de un iPhone que la de un monitor panorámico de sobremesa) pero el usuario cada vez más exige que su experiencia usando nuestra web sea la óptima en cada caso concreto. Utilizando HTML y principalmente CSS podemos servir al usuario una versión de nuestra web en función del ancho de pantalla utilizado. Es decir, nuestra web se adapta al ancho de pantalla, responde ante los cambios del tamaño la misma. Además podemos pensar en mejorar el acceso a formularios, botones, etc… Eso es Responsive Web Design o Diseño Web Adaptable.

¿Por qué es importante el Diseño Web Adaptable?

La web a través del móvil en muchos casos está defraudando a los usuarios. ¿La razón? Los sitios no están optimizados, no están pensados para verse a través de una pantalla tan pequeña como la del móvil. Como decíamos antes, si el usuario es lo más importante no podemos permitir que esto suceda con nuestra web.

Además, la experiencia de usuario debe ser prioritaria a la hora de pensar en tu estrategia SEO. Las webs con mejor experiencia de usuario gustarán más, serán más compartidas, mejor valoradas, más populares. Y eso en SEO es muy importante.

Dado el gran número de medios y navegadores existentes no es factible crear una versión de nuestra web para cada uno de ellos, por lo que necesitamos un sistema para que nuestra web se adapte al contexto en el que está siendo vista, optimizándose de manera automática.

Primer paso: El diseño fluido

El principal concepto en el que se apoya el Diseño Web Adaptable es en abandonar los anchos fijos de nuestra web. Estos deberán ser fluidos. En lugar de diseñar nuestra web basándonos en valores fijos (por ejemplo width: 960px), el diseño fluido está pensado en términos de proporciones. De esta manera cuando veamos nuestra web a través de la pequeña pantalla de un móvil todos los elementos de la web se harán más pequeños guardando la proporción entre ellos. Por ejemplo, para saber ahora el ancho de un elemento tendremos que dividir el ancho inicial del mismo entre el ancho del elemento “padre”, por llamarlo de alguna manera sencilla. Pongamos que tenemos por ejemplo esta estructura:

diseno-web-fluido

En este ejemplo partíamos de unos valores fijos: un contenedor de 960 pixels y dentro del mismo un elemento de 360 pixels de ancho. Si dividimos el segundo entre el primero y multiplicamos el resultado por 100 obtendremos el valor de 37,5%, que será el ancho que aplicaremos a dicho elemento. Es decir, el ancho del elemento interior será siempre el 37,5% del ancho del primero. De esta forma cuando el ancho del elemento “padre” se adapta, todos los anchos de los elementos interiores varían en función de su porcentaje. Ahora el elemento interno, en la hoja de estilos, tendrá en lugar de un width=”360px” un width=”37,5%”.

Lo mismo haremos con los tamaños de las fuentes (por ejemplo, si el tamaño general es del 100%, que equivale a 16px, y tenemos un título de 22px, su nuevo tamaño será de 22/16 = 1.375em). ¿Pero, qué pasa con las imágenes u otros elementos que tienen un ancho fijo? Podemos adaptar su ancho así:

img, video, object { max-width:100%; }

De esta manera su ancho nunca excederá del ancho del elemento que la contiene. Y si dicho elemento cambia de ancho, también lo hará la imagen en todos los navegadores modernos. ¿He dicho modernos? Efectivamente, IE7 e IE6 no lo soportan. Para estos navegadores lo mejor es incluir en su hoja de estilos específica:

img, video, object {width:100%; }

Esta regla es completamente distinta de la anterior: Ahora decimos que la imagen (por ejemplo) siempre tendrá el mismo ancho de su contenedor. Es por ello por lo que hay que tener cuidado sobre qué elemento se aplica.

Esto está muy bien hasta que nos encontramos con anchos de pantalla realmente pequeños (por ejemplo un móvil). Si tenemos una web con tres columnas, montones de botones, menú horizontal a la derecha del logo, etc.. al comprimir tanto el tamaño de la pantalla, por mucho que los anchos sean fluidos, puede acabar todo en un caos. Es probable que tengamos que prescindir de ciertos elementos de la web o situarlos en un lugar diferente. Para ello utilizaremos los Media Queries.

Segundo paso: Los Media Queries

Como decíamos ningún diseño escala de manera adecuada cuando cambia el contexto para el que fue pensado. Los Media Queries forman parte de CSS3 e inspeccionan las características físicas del medio que va a mostrar nuestro diseño (no olvidemos que “query” equivale a “pregunta”, es como preguntar: ¿qué medio se está usando?). Si las características del medio utilizado por el usuario están dentro de un condicional establecido con los Media Queries, se aplicarán una serie de instrucciones CSS contenidas dentro del mismo, de esta manera cuando nuestro diseño fluido cambia de tamaño podremos aplicar una serie de instrucciones CSS pensadas en exclusiva para ese nuevo tamaño. Vamos a ver un ejemplo.

El ancho de pantalla actual del iPhone es de 320px. Vamos a suponer que para ese ancho nuestro diseño fluido presenta una serie de dificultades (puede ser desde cambiar el logo, eliminar una columna, cambiar la organización de los elementos de la pantalla, etc…). Dentro de nuestra hoja de estilos haríamos:

@media screen and (max-width: 320px) {
   /* Aquí van las reglas CSS necesarias */
}

Como veis la instrucción se compone de dos partes: el tipo de medio utilizado (o Media Type, en este caso “screen”, que agrupa a todos los medios que se ven via una pantalla) combinándolo mediante un “and” con el Media Query (max-width: 320px). Estamos preguntando: ¿Es un medio con pantalla y tiene un ancho de 320px o menor? Entonces le aplicamos los estilos situados entre los corchetes correspondientes.

Podemos empezar desde este ancho e ir subiendo a otras posibles opciones. Algunos autores recomiendan optimizar estos anchos de pantalla:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

La mayor parte de las veces estos son demasiados anchos de pantalla, no hay tiempo suficiente para tanta optimización. Investiga bien cuales serán (o son si tienes ya datos históricos gracias por ejemplo a tu herramienta de analítica web) los anchos usados por tus usuarios y céntrate en ellos. Lo más habitual es, al menos, hacerlo para 480 píxeles.

También puedes, si quieres, dar una serie de reglas CSS para pantallas superiores a un ancho determinado, usando min-width. Por ejemplo, para anchos superiores a 1.200px:

@media screen and (min-width: 1200px) {
   /* Aquí van las reglas CSS necesarias */
}

Como veis podemos tener perfectamente separados los estilos de cada ancho de pantalla para el que queramos optimizar nuestro diseño. Si queréis incluso separar las hojas de estilo podéis también hacerlo. Por ejemplo, si queréis cargar una hoja de estilo independiente para anchos de pantalla inferiores a 480 píxeles:

O también:

@import url("style.css") screen and (max-device-width: 480px);

Podéis ir incluso más allá gracias al uso de “and” para poner un mínimo y un máximo en los anchos de pantalla donde aplicar los estilos:

@import url(style.css) screen and (min-width:800px) and (max-width:1280px);

O detectar si es un iPhone 4 (por Thomais Maier):

O incluso detectar si estamos en un iPad y su orientación (por Cloudfour):


¿Qué navegadores soportan los Media Query?

En general todos los navegadores modernos lo soportan. Eso quiere decir que Internet Explorer 8, 7 y 6 no lo soportan (qué raro!). Afortunadamente hay soluciones utilizando Javascript, por ejemplo respond.js. Tal y como podéis ver (y traduzco) “respond.js proporciona un script rápido y ligero (3kb minified / 1kb gzipped) que permite utilizar diseños web adaptables en navegadores que no soportan CSS3 Media Queries – en concreto Internet Explorer 8 e inferiores”.
Otra opción es usar Modernizr.

Meta tags

Por último, es importante añadir un meta-tag dentro del elemento header de nuestra web que le diga al navegador que use el ancho del medio (por ejemplo, del móvil) como ancho de la web, anulando la escala inicial: