¿Qué es Responsive Web Design?

Los que nos dedicamos a esto de las webs mantenemos en un constante y vertiginoso cambio en donde todos los días surgen nuevas formas de hacer las cosas, nuevas plataformas, tecnologías y un sinfin de información casi imposibles de digerir para un humano normal. Y es aquí donde se empieza a oir y leer mucho sobre «Responsive Design». Es un término no muy nuevo pero que gana cada vez más valor con el paso del tiempo.

Pero bueno, centremonos en nuestro tema. Lo primero ¿Qué es «Responsive Web Design»? Esto traducido literalmente al español significa Diseño Web Adaptable y la verdad es que la traducción nos dice ya mucho. Vale, perfecto y, ¿Cómo es un diseño web adaptable? Pues es un diseño web que se adapta bien a todos los dispositivos donde se vea el mismo. Esto es desde un teléfono móvil hasta una pantalla de esas que hay ahora de 50 o más pulgadas pasando por PC, tablets, netbooks, etc.

Bueno, ya tenemos la teoría pero, ¿Cómo podemos trabajar para que nuestros diseño se vean bien en todos los dispositivos que hay hoy en día? Bueno, lo primero amigo y amiga es que te relaciones bien con los nuevos estándares web, conoce y adentrate en el mundo de HTML5 y CSS3, seguro que serán tus mejores aliados. Las nuevas características de CSS3 te permiten incorporar nuevas funciones a tus diseños, entre ellas las que necesitamos para maquetar nuestro sitio de manera correcta en diferentes dispositivos.

Entremos solo un poco en materia. Veamos un ejemplo de como podríamos adpatar un layout para diferentes dispositivos con CSS. Con el uso de Media Queries @media screen and (max-width:000px) podemos indicar que diseño mostrar dependiento del ancho del dispositivo donde se muestra la web.

body {
font:1em/1.5em 'Verdana', 'Arial', sans-serif;
}
@media screen and (max-width:800px) {
body {
font-size:0.8em;
}
}
@media screen and (max-width:400px) {
body {
font-size:0.7em;
}
}


Esto sólo es la punta de una gran lanza ya que además de los layouts tenemos que aplicar el diseño web responsable a las tablas (muy importante) menús, imágenes y demás que componen nuestra web.

Como siempre dejo información y material que complementa lo que he escrito aquí.

Aplicar el Responsive Web Design a imágenes y videos
Un uso interesante de Media Quieries
Convertir un menú normal en un menú desplegable
Ideas para tablas
Ejemplos de Responsive Design

Si tienes algo que puedas enseñarnos, no lo dudes, usa los comentarios!