El Responsive web design o diseño receptivo y adaptivo para web, traducido al castellano, es una tendencia reciente dentro del diseño Web, la cual consiste en reacomodar los elementos que componen el website según el tamaño de dispositivo que la reproduzca.
Actualmente accedemos a Internet desde muchos dispositivos, no exclusivamente desde un ordenador. Seguro que navegáis por Internet a través de vuestro teléfono móvil (un iphone o móvil android por ejemplo) o tableta gráfica (un ipad por ejemplo). Esto significa que el tamaño de la pantalla varía muchísimo de unos a otros dispositivos y ello implica que la información debe adaptarse a estas diferencias de tamaño. Una web que adapta el formato de su contenido para que se pueda ver de forma correcta y cómoda en todos los dispositivos, es una web adaptativa o responsive.

¿Cómo sé si una web es responsive?

Entra ahora mismo a tu website favorito y redimensiona el navegador. Si aparece un scroll horizontal que impide que veas parte del contenido de la web, ésta no cuenta con responsive design… Prueba ahora con ésta web na-go.biz. Verás que se adapta al tamaño de la ventana. En la siguiente imagen puedes ver la diferencia de visualización de un dispositivo a otro: navegador web, ipad o iphone.

¿Cómo se consigue hacer una web responsive?

Diseño
El responsive design tiene que ser pensado desde el concepto de diseño de un web. Este diseño debe tener un concepto de fluido entre los elementos que la componen para así lograr el perfecto flujo cuando se programe. Es decir, antes de programar la web debemos saber qué comportamiento van a tener los diferentes elementos del web a cada tamaño. Ni qué decir tiene que se trata de diseños web más elaborados que los tradicionales porque se trata de pensar en diferentes visualizaciones de los mismos elementos de un web, recolocándolos y, en algunos casos, rediseñándolos.
Programación: maquetación HTML5/CSS3
La programación adaptativa se logra con un conjunto de técnicas de css3 y en especial las mediaqueries, que son básicamente unas técnicas específicas de CSS3 desde las cuales puedes indicar diferentes estilos dependiendo del tamaño de la ventana del navegador.
Puedes visitar mediaqueri.es para ver ejemplos de responsive designs.
Vía: Cristalab.com