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:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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:

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

3. Media Queries

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

#contenedor {
    width: 980px;
    margin: 0 auto;
}
#cabecera {
    height: 150px;
}
#contenido {
    width: 600px;
    float: left;
}
#lateral {
    width: 300px;
    float: right;
}
#pie {
    clear: both;
    height: 150px;
}

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

a) Para resoluciones inferiores a 980px:

@media screen and (max-width: 980px) {
	
    #contenedor { width: 100%; }
    #contenido { width: 70%; }
    #lateral {width: 30%; }
}

b) Para resoluciones inferiores a 700px:

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

    #contenido, #lateral {
        width: auto;
        float: none;
    }

}

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.