Responsive design, o diseño adaptativo

El diseño adaptativo o responsive design es aquel que implementan las aplicaciones web para mostrarse adecuadamente en función del terminal con el que se conecte a ella. ¿Alguna vez has navegado desde el móvil en una web, de noticias por ejemplo, y se ve pequeño y mal? Bien, esa página no está adaptada.

Una web debe adaptarse al terminal que sirve: desde su diseño hasta su contenido y pasando por su interacción en la interfaz. ¿Cómo hacer diseño adaptativo o responsive design?

Mediante CSS y sus Media Queries, que a modo resumido, son porciones de código CSS específico para cada tipo de terminal. Pero no reinventes la rueda, ya hay frameworks para ello, algunos son:

Tienen excelente documentación la mayoría de ellos y su utilización es intuitiva, aunque la semántica dentro del HTML no se respeta. Teniendo el mismo código de presentación, al final se consiguen cosas como la landing de Innubu: