Responsive Web Design, o el diseño web adaptativo en la traducción al español que más se usa, es una técnica de diseño y desarrollo web cuyo objetivo es dar al usuario una experiencia óptima, adaptándose a los diferentes dispositivos, desde ordenadores de sobremesa hasta teléfonos inteligentes.

Un buen ejemplo de diseño adaptativo es la web thenextweb.com cuando el tamaño de pantalla se reduce al de un móvil la interfaz cambia para permitir un acceso adecuado al contenido. En la página Media Queries hay otros muchos ejemplos de diseños adaptativos geniales.

La principal herramienta para crear sitios web adaptativos son las media queries. Las media queries son parte de la versión 3 de la especificación de CSS y permiten definir estilos condicionales que se aplican en función de parámetros de la pantalla en la que se está visualizando el sitio web. Los parámetros más usados son los que hacen referencia al ancho de la pantalla. Es una herramienta sencilla pero muy poderosa para cambiar el diseño de los sitios web adaptándolos al dispositivo que esté usando el usuario.

Como siempre, la mejor forma de aprender es haciendo, así que he modificado el diseño del blog para que al verlo en un teléfono móvil tenga esta pinta:

Otros recursos: