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.
Fuente: http://www.bufa.es/responsive-design/
