Responsive Web Design

Por Ernesto Jiménez · 22 febrero, 2012
Publicado en Libros

Responsive Web Design
Ethan Marcotte
A Book Apart
París 2011
150 páginas
20 €
Es la tendencia del momento, las palabras de moda en cualquier conversación sobre diseño web, en cualquier solicitud de presupuesto y en cualquier CV actualizado: diseño web que se adapta al medio en el que se muestra.

Responsive Web Design, de Ethan Marcotte

De hecho este libro, clásico desde el momento que vio la luz, lleva meses publicado y estamos viendo su aplicación práctica en numerosos sitios. Ethan Marcotte escribió un artículo en A List Apart que supuso el comienzo de esta tendencia que ha cambiado la forma de diseñar para la web. Ya sé que Marcotte no inventa ninguna tecnología nueva, todo estaba ya ahí. Pero el mérito no es ése. El mérito reside en haber sabido cómo combinarlas para obtener un resultado de éxito, eficaz y sólido.

Responsive Web Design es un manual de trabajo bien estructurado que describe los pilares técnicos sobre los que se levanta este método de desarrollar nuestros diseños:

  1. La rejilla flexible
  2. Imágenes flexibles
  3. Uso de media queries

Sí, es francés, me equivoqué

La idea original detrás de todo este sistema es la de definir valores relativos a los elementos de nuestra maqueta. Empieza por lo más simple: después de reiniciar los estilos, indicar los tamaños de letra en relación al tamaño por defecto del navegador, al contexto.

La fórmula que plantea es bien sencilla:

tamaño objetivo / tamaño del contexto = tamaño relativo resultante

Sin entrar en pormenores y a modo de ejemplo: si nuestra etiqueta body tiene un tamaño de letra de 16 píxeles –tamaño por defecto en la mayoría de navegadores– y escribimos un párrafo que queremos mostrar con un cuerpo de 14 píxeles haremos:

14 / 16 = 0.875

esa será la unidad en em que asignaremos a nuestra etiqueta de párrafo.

Esta es la fórmula sobre la que viene todo lo demás. Para crear la rejilla flexible Marcotte nos indica que debemos usar el tamaño del elemento contenedor como contexto del elemento contenido. Así si tenemos una columna de 900 píxeles que contiene una noticia de 550 píxeles en nuestro diseño haremos:

550 / 900 = 0.6111111

que será el ancho expresado en porcentaje (sin despreciar ningún decimal, los navegadores interpretan esta cifra sin problemas).

Así conseguimos un diseño fluido que es la base del proceso. Como podemos observar no hay nada nuevo hasta el momento. El diseño fluido es tan antiguo como el diseño web mismo. Lo que sí es novedoso es el enfoque del autor, cómo nos anima a ser conscientes de las relaciones espaciales entre los elementos, forzándonos a pensar nuestra maqueta, empujándonos a ir más allá de la traducción de nuestros dibujos a código.

Cuando tenemos una maqueta fluida pasamos al siguiente capítulo el de hacer flexibles también las imágenes. Recuerdo la primera vez que vi este comportamiento en la web de ejemplo que acompañaba al artículo original de A List Apart. Era ciencia ficción. Mis clientes arquitectos podían ponerse muy contentos si por fin accedía a poner imágenes gigantes a sabiendas de que se escalarían en pantallas más pequeñas. En el capítulo dedicado a esta técnica el autor nos da las pautas generales (uso de max-width:100%), nos enseña cómo contener el tamaño de las imágenes a las dimensiones adecuadas, nos advierte de algunos problemas y nos ayuda a superar los problemas del siempre graciosillo Internet Explorer. Puede que este sea el capítulo más árido del libro. Pero estudiar magia es muy duro, si no que se lo pregunten a Kvothe.

Una vez que tenemos nuestra maqueta y las imágenes adaptándose como por hechizo a las medidas de todo tipo de navegadores y ventanas, llega el momento de divertirnos con los media queries. Los media queries son unas instrucciones de CSS que nos permiten declarar valores de estilo en función de unos parámetros. El uso de media queries junto con la rejilla fluida es una de las principales causas del éxito de este sistema que, como ya hemos dicho, usa tecnologías que ya existían. Aquí está el gran acierto. Si definimos que un artículo se extiende a lo ancho del 25% de la superficie de la pantalla, puede verse bien en dispositivos medianos o grandes pero es posible que sea un ancho ridículo en la pantallita de nuestro móvil. Así que nos serviríamos de los media queries para puntualizar que si la pantalla es inferior a un ancho, 400 px, pongamos, el artículo tendrá un ancho del 60% en lugar del 25%. Burdamente sería algo así:

.articulo{
width: 25%;
}

@media screen and (max-width: 400px){
.articulo{
width: 60%;
}
}

Perdonad la simplificación pero sirve para ilustrar.

Ejemplos del método en acción

Llegados  a este punto el autor ya nos ha enseñado a manejar las herramientas necesarias. El último capítulo recoge una serie de pautas para que apliquemos los conocimientos adquiridos, algunos consejos y buenas prácticas muy inspiradoras que consiguen el mayor acierto del libro: que variemos nuestra forma de mirar, de entender el diseño web y que analicemos mejor el contenido para darle una forma que sabemos que va a estar viva, que va a reaccionar dependiendo del contexto en el que se muestre. Es un clásico de obligada lectura.

Como punto negativo algo desgraciadamente habitual en libros técnicos: algunos fallos en los fragmentos de código o cantidades de píxeles que no cuadran con lo que explica el texto. En cualquier caso son deslices leves. Nada grave.

PD: Creo que es prioritario encontrar la mejor manera de traducir la expresión Resposive Web Design antes de que algún lumbreras vaya diciendo por ahí diseño web responsivo, algo tan trágico que no deberíamos permitir que ocurra. Lo de diseño sensible me parece horrible y cursi… Quizá tengamos que esperar a que Kvothe aprenda el nombre de esto.

PD2: Vigilad bien cuando compréis en Amazon no os vayáis a llevar un libro en francés pensando que estaba en inglés.

[Actualización] PD3: Una de las ventajas de tener el libro en francés es ver cómo nuestros primos idiomáticos han resuelto la traducción del concepto. Ellos hablan de diseño web reactivo que no es que sea una maravilla pero lo prefiero a sensible.

Enlaces relacionados

Responsive Web Design, artículo en A List Apart
A book apart
, editorial del libro
Unstoppable Robot Ninja, web de Ethan Marcotte

También de interés

LessFramework
Las trampas del diseño web adaptable

¿Te ha gustado el post? Puedes seguirme en Twitter o en Facebook donde seguimos hablando de diseño web