Diseño responsive
Definición breve
El diseño responsive significa que un sitio web ajusta automáticamente su maquetación, el tamaño del texto y la navegación al móvil, la tableta y el escritorio.
El mismo código de página muestra una sola columna en el móvil, dos columnas en la tableta y una cuadrícula amplia en el escritorio. Esto es posible gracias a cuadrículas CSS flexibles y a reglas según el ancho de pantalla llamadas media queries. Imágenes, botones y texto se adaptan a la pantalla, de modo que el visitante nunca desplaza la página en horizontal.
El diseño responsive es hoy el estándar porque la mayoría de los visitantes llegan desde el móvil, y Google clasifica los sitios sobre todo según su aspecto en móvil.
Se confunde a menudo con el diseño adaptativo. El diseño adaptativo construye una maquetación fija distinta para cada dispositivo, mientras que el diseño responsive usa una única maquetación flexible que se reconfigura por sí misma, lo que resulta más simple de mantener.
El error más frecuente es diseñar primero para el escritorio y luego comprimir esa maquetación para el móvil, lo que produce zonas táctiles demasiado pequeñas y menús anidados de forma incómoda. Lo correcto es el enfoque mobile first: usted diseña primero para la pantalla estrecha y añade columnas a medida que aumenta el ancho, de modo que cada elemento táctil quede lo bastante grande y con suficiente espacio.
Por qué importa
Un visitante que abre su sitio desde el móvil y encuentra una maquetación rota se marcha de inmediato. El diseño responsive evita esa pérdida: un único sitio funciona en cualquier pantalla, sin el coste de construir y mantener una versión móvil aparte.
Ejemplo ilustrativo
El catálogo de productos de un fabricante de pavimentos muestra una cuadrícula amplia en el escritorio y una sola columna en el móvil, misma página, mismo contenido, sin una maquetación distinta que construir.
