Responsive Design

En español sería algo así como: “diseño web adaptable” o “diseño web flexible“.

Esta actualmente muy de moda en la web, y consiste en adaptar fácilmente el diseño de una web a los diferentes dispositivos que usamos para visitarla, como un ipad, iphone, smartphone, notebook, etc… utilizando los media queries de CSS3.

A continuación los pasos necesarios para adaptar nuestra web a un diseño flexible:

1. Meta tag

Usaremos el meta tag “viewport” para adaptar nuestra web a las diferentes resoluciones de los dispositivos móviles (Android, IOS, Blackberry OS…). De esta manera le decimos al navegador, que fuerze el ancho de la web al ancho de la pantalla:

2. Compatibilidad con IE

Internet Explorer 8 y inferiores no es compatible con los media queries de CSS3, pero podemos utilizar alguno de los framework media-queries.js or respond.js para que si lo soporten. En este ejemplo voy a utilizar media-queries.js y ya será compatible con las versiones inferiores de IE 9:

3. Media Queries

Un ejemplo “básico” de estructura css de una web sería por ejemplo este:

Bien, ahora 2 sencillos ejemplos de media queries utilizando @media screen de css3:

a) Para resoluciones inferiores a 980px:

b) Para resoluciones inferiores a 700px:

Todo esto es muy personalizable…, pero os servirá de base si estais empezando.

En el primer ejemplo adaptamos nuestro diseño a resoluciones inferiores de 980 pixeles, donde nuestros div principales se ajustan basados en porcentajes de ancho.
Y en el segundo ejemplo es para resoluciones inferiores a 700 pixeles, y lo que hacemos es quitar el flotamiento entre divs para que se coloquen uno encima del otro.