Qué es el responsive design técnicamente
El término lo acuñó el diseñador Ethan Marcotte en un artículo publicado el 25 de mayo de 2010 en A List Apart, donde definió sus tres pilares técnicos: grids flexibles, imágenes flexibles y media queries. Antes de ese artículo, cada uno de esos recursos existía por separado; Marcotte fue quien los combinó en un único enfoque de diseño para una web ya pensada para múltiples dispositivos.
El responsive design es una técnica de desarrollo web: un mismo documento HTML, sin duplicar código ni crear una versión distinta por dispositivo, cuya presentación cambia según el ancho de pantalla gracias a reglas de CSS. El navegador sigue cargando la misma página tanto si la abre un móvil como un ordenador de escritorio; lo que cambia es cómo se organiza y se ve ese contenido.
El mecanismo central son las media queries, reglas de CSS que aplican un bloque de estilos solo cuando se cumple una condición, casi siempre el ancho de la ventana. A los puntos donde el diseño cambia de una disposición a otra se les llama breakpoints. Junto a las media queries trabajan los grids flexibles (con flexbox o CSS grid, que reparten el espacio disponible en proporciones en vez de en píxeles fijos) y las imágenes fluidas, que se escalan sin desbordar su contenedor.
Elegir los breakpoints por el contenido, no por dispositivos concretos, suele dar mejor resultado que fijarse en anchos de móviles o tablets específicos: un catálogo de modelos que cambia cada año deja obsoleto cualquier breakpoint pensado para un dispositivo exacto, mientras que un breakpoint colocado donde el propio diseño empieza a verse forzado, un menú que se amontona o un texto que se estrecha demasiado, sigue funcionando aunque cambien los dispositivos del mercado.
Un ejemplo simple: una imagen a ancho completo en móvil y un menú horizontal fijo en escritorio, definidos en la misma hoja de estilos.
<style>
.menu {
display: block; /* apilado por defecto, para móvil */
}
img {
max-width: 100%;
height: auto;
}
@media screen and (min-width: 768px) {
.menu {
display: flex; /* horizontal a partir de tablet/escritorio */
}
}
</style>Para que el navegador móvil respete este comportamiento hace falta además la etiqueta viewport en el head del documento, algo que se suele olvidar y que sin ella el móvil renderiza la página como si fuera de escritorio y luego la reduce, anulando el efecto de las media queries.
<meta name="viewport" content="width=device-width, initial-scale=1" />Esta etiqueta no nació de un estándar web formal, sino de Apple: se introdujo en Safari con el primer iPhone, para que las webs pensadas para anchos de escritorio pudieran mostrarse de forma legible en una pantalla mucho más pequeña. El resto de navegadores móviles adoptó después la misma sintaxis como estándar de facto, por lo que sigue funcionando hoy aunque nunca llegó a formar parte de una especificación oficial del W3C.