Diseño web adaptado a cualquier dispositivo (CSS3)

El Responsive Web Design consiste en crear las páginas web de forma que se adapten al dispositivo con el que accede el usuario, ya sea una pantalla de PC, un smartphone, una tableta,… Esto se consigue con un diseño fluído, con medidas en %, y las Media Queries de CSS3.

Un ejemplo de la utilización de las Media Queries lo puedes ver en nuestra web http://www.soydig.it (acortador url), ábrela con cualquier navegador actual (menos IE8, 7 o 6) y cambia el tamaño horizontal de tu pantalla.

Es un diseño que seguimos mejorando Al final de nuestra hoja de estilo incluimos el siguiente código donde se indica el ancho máximo de la pantalla y dentro especificamos el estilo para ese ancho en concreto.

@media screen and (max-width: 1024px) {
    #global {width:70%}
}

Otro gran ejemplo es la web http://robot-or-not.com, de Ettan Marcotte, autor del libro “Responsive Web Design”, imprescindible.

Recomendable también la lectura del artículo “Introducción al Diseño Web Adaptable o Responsive Web Design” donde se explican más en detalle las técnicas a usar.