¿Qué es el Diseño Web Responsivo?

Uno de los grandes retos para los diseñadores web es lograr adaptar las aplicaciones web para que se visualice correctamente en la inmensa cantidad de dispositivos que cuentan con un navegador web incorporado; ustedes se podrian preguntar ¿porque es esto tan importante?, la respuesta a esta pregunta reside en el hecho de que el tráfico móvil engulle más del 17% y se prevé que esta cifra seguirá en aumento.

El diseño web responsivo nos permite adaptar nuestras aplicaciones web a distintos tamaños de pantalla (PC, tablet, teléfonos inteligentes, televisores, etc) aplicando solo CSS (o casi todo); sin la necesidad de crear una página para cada dispositivo o tamaño de pantalla.

Básicamente debemos de adaptar todo el contenido en una pagina web para que se vea "bien" en todos los dispositivos, sin que aparezca el muy molesta scroll horizontal; es decir se reajusta el contenido de toda la página web.

En esta técnica utilizamos principalmente los media queries y tamaños de los elementos en porcentajes, todo con CSS (o casi todo); los media queries nos permite activar y desactivar secciones del CSS según el tamaño de pantalla; nos permite definir nuevos estilos al sitio para ajustarse a las diferentes resoluciones de pantalla:

@media screen and (max-width: 1024px) {
/* ventanas de menos de 1024px */
}
@media screen and (max-width: 480px) {
/* ventanas de menos de 480px */
}
@media screen and (max-width: 320px) {
/* ventanas de menos de 320px */
}