Introduccin al Diseo Web Adaptable

o Responsive Web Design

Escrito el 16 agosto, 2011 por Juan Daz-Bustamante
Share on facebookShare on twitterShare on emailShare on pinterest_shareMore
Sharing Services148
Hoy en da los usuarios de nuestras pginas web o tiendas online pueden acceder a
las mismas desde diferentes medios: un ordenador de sobremesa con pantalla
panormica, un mvil, una tableta Partiendo de la base de que el diseo de una
web, para que funcione, tiene que estar centrada en el usuario (y no en el
diseador, en el programador o en el dueo de la web), es importante que la
experiencia que tiene el usuario con nuestra web sea lo ms placentera posible con
independencia de qu medio est usando para verla. Es por ello que ltimamente
tantos sitios webs estn utilizando lo que se llama Responsive Web Design o
Diseo Web adaptable.
Nota: Actualizacin de este artculo: Diseo web adaptativo: mejores prcticas

Qu es el Responsive Web Design o Diseo Web

Adaptable?
Son una serie de tcnicas que permiten a nuestra pgina web adaptarse al medio
a travs del cual un usuario est accediendo a la misma. Los tamaos de pantalla
cambian segn el medio con el que se accede (no es lo mismo una pantalla de un
iPhone que la de un monitor panormico de sobremesa) pero el usuario cada vez ms
exige que su experiencia usando nuestra web sea la ptima en cada caso concreto.
Utilizando HTML y principalmente CSS podemos servir al usuario una versin de
nuestra web en funcin del ancho de pantalla utilizado. Es decir, nuestra web se
adapta al ancho de pantalla, responde ante los cambios del tamao la misma.
Adems podemos pensar en mejorar el acceso a formularios, botones, etc Eso es
Responsive Web Design o Diseo Web Adaptable.

Por qu es importante el Diseo Web Adaptable?

Como nos dice este artculo de InternetRetailing la web a travs del mvil est
defraudando a los usuarios. La razn? Los sitios no estn optimizados, no estn
pensados para verse a travs de una pantalla tan pequea como la del mvil. Como
decamos antes, si el usuario es lo ms importante no podemos permitr que esto
suceda con nuestra web.
Adems, tal y como explico en el artculo Haz una auditora SEO a tu web, la
experiencia de usuario debe ser prioritaria a la hora de pensar en tu estrategia
SEO. Las webs con mejor experiencia de usuario gustarn ms, sern ms
compartidas, mejor valoradas, ms populares. Y eso en SEO es muy importante.

Dado el gran nmero de medios y navegadores existentes no es factible crear una

versin 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,
optimizndose de manera automtica.

Primer paso: El diseo fluido

El principal concepto en el que se apoya el Diseo Web Adaptable es en abandonar
los anchos fijos de nuestra web. Estos debern ser fluidos. En lugar de disear
nuestra web basndonos en valores fijos (por ejemplo width: 960px), el diseo fluido
est pensado en trminos de proporciones. De esta manera cuando veamos
nuestra web a travs de la pequea pantalla de un mvil todos los elementos de la
web se harn ms pequeos guardando la proporcin 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:

En este ejemplo partamos 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 varan
en funcin 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 tamaos de las fuentes (por ejemplo, si el tamao
general es del 100%, que equivale a 16px, y tenemos un ttulo de 22px, su nuevo
tamao ser de 22/16 = 1.375em). Pero, qu pasa con las imgenes u otros
elementos que tienen un ancho fijo? Podemos adaptar su ancho as:
1

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, tambin 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 especfica:
1

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.
Esta ltima opcin est aplicada de manera general (no slo para IE) en nuestra
pgina de trabajos realizados. Probad a reducir el ancho de la ventana del navegador
y veris como se reduce el tamao de cada imagen.
Esto est muy bien hasta que nos encontramos con anchos de pantalla realmente
pequeos (por ejemplo un mvil). Si tenemos una web con tres columnas, montones
de botones, men horizontal a la derecha del logo, etc.. al comprimir tanto el tamao
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 decamos ningn diseo escala de manera adecuada cuando cambia el
contexto para el que fue pensado. Los Media Queries forman parte de CSS3 e
inspeccionan las caractersticas fsicas del medio que va a mostrar nuestro diseo (no
olvidemos que query equivale a pregunta, es como preguntar: qu medio se est
usando?). Si las caractersticas del medio utilizado por el usuario estn dentro de un
condicional establecido con los Media Queries, se aplicarn una serie de instrucciones
CSS contenidas dentro del mismo, de esta manera cuando nuestro diseo fluido
cambia de tamao podremos aplicar una serie de instrucciones CSS pensadas en
exclusiva para ese nuevo tamao. Vamos a ver un ejemplo.
El ancho de pantalla actual del iPhone es de 320px. Vamos a suponer que para ese
ancho nuestro diseo fluido presenta una serie de dificultades (puede ser desde
cambiar el logo, eliminar una columna, cambiar la organizacin de los elementos de la
pantalla, etc). Dentro de nuestra hoja de estilos haramos:
1
2
3

@media screen and (max-width: 320px) {

/* Aqu van las reglas CSS necesarias */
}

Como veis la instruccin 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) combinndolo 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 optimizacin. Investiga bien cuales sern (o son si tienes ya
datos histricos gracias por ejemplo a tu herramienta de analtica web) los anchos
usados por tus usuarios y cntrate en ellos. Lo ms habitual es, al menos, hacerlo
para 480 pxeles.
Tambin 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:
1
2
3

@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 diseo. Si queris incluso separar
las hojas de estilo podis tambin hacerlo. Por ejemplo, si queris cargar una hoja
de estilo independiente para anchos de pantalla inferiores a 480 pxeles:
O tambin:
1

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

Podis ir incluso ms all gracias al uso de and para poner un mnimo y un mximo
en los anchos de pantalla donde aplicar los estilos:
1

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

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

1

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css"

href="iphone4.css" />

O incluso detectar si estamos en un iPad y su orientacin (por Cloudfour):

1
2

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

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 podis ver (y traduzco)
respond.js proporciona un script rpido y ligero (3kb minified / 1kb gzipped) que
permite utilizar diseos web adaptables en navegadores que no soportan CSS3
Media Queries en concreto Internet Explorer 8 e inferiores.
Otra opcin (que es la que uso yo normalmente) es usar Modernizr.

Meta tags
Por ltimo, es importante aadir un meta-tag dentro del elemento header de nuestra
web que le diga al navegador que use el ancho del medio (por ejemplo, del mvil)
como ancho de la web, anulando la escala inicial:
1

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; userscalable=0;" />

Actualizacin: Ver comentarios ms abajo.

Puedo ver un ejemplo?

Hay muchos diseadores que estn ya realizando nuevas versiones de sus webs
utilizando media queries y diseo fluido. Creo que un buen ejemplo es el nuevo diseo
de CSS-Tricks. Si cargis la pgina, a medida que reducs el ancho de la ventana del
navegador veris cmo se va adaptando el diseo. Incluso ha introducido
animaciones para mover elementos de sitio (como el buscador) a medida que
reducimos el ancho de pantalla. Como podis leer en el artculo, Chris Coyier explica
su nuevo diseo, destacando:

Su diseo por defecto es para navegadores con un ancho superior a 1200px

Hay dos optimizaciones con media query a 1024 y 860px

Utiliza Respond.js para hacer funcionar los Media Queries en Internet Explorer
Otro gran ejemplo es Robot or Not?, utilizado por Ettan Marcotte como ejemplo de su
gran libro Responsive Web Design.
Otro ejemplo, quizs menos efectista que los anteriores, es esta web sobre Garret
Keizer.
En Media Queries podis ver una coleccin de sitios que usan Diseo web adaptable.

Artculos recomendados

Os recomiendo que leais el artculo de Ethan Marcotte en A List Apart. Es el que

empez a hablar del Responsive Web Design o Diseo Web Adaptable.
Tambin es interesante ver Frameworks que te ayudarn a acelerar tus desarrollos o
a aprender ms sobre el tema investigando cmo estn hechos, como el 320 and Up.
Otro conocido framework es Less Framework 4.
Using Media Queries in the Real World es tambin otro artculo interesante con
valiosos consejos.
Para testear tu diseo web adaptable con distintos anchos de pantalla en el mismo
navegador. Tambin te puede interesar esta plantilla con ejemplo para Photoshop de
Elliot Jay Stocks de 1000px para diseo web adaptable.
Otro interesante artculo es el de Cloud Four, en el que nos avisa de que los media
queries no son la solucin definitiva, especialmente debido al problema de las
imgenes y a la mayor lentitud de carga de los mviles.
En relacin a este ltimo artculo hay que decir que el Diseo Web Adaptable no es
siempre la mejor solucin para llevar un sitio web al mvil. Hay que pensar siempre
en el contexto en el que el usuario va a ver nuestra web y qu informacin va a
demandar. Es probable que a travs del mvil muchas veces busquemos una
informacin distinta que la que buscamos desde el ordenador de sobremesa, por lo
que no vale con servir la misma informacin a un tamao diferente. Adems, sitios
web con ms carga de imagen que de texto lo tendrn ms dificil, dada la menos
velocidad de descarga del mvil. Nota: Es interesante http://adaptive-images.com/,
que permite servir una imagen diferente segn el ancho de pantalla.