¿Qué es el diseño responsive?

También llamado: responsive design, diseño adaptable, mobile first

Definición

El diseño responsive es la técnica de crear una web que se adapta automáticamente al tamaño de la pantalla, del móvil al monitor grande, con un solo código y una sola URL.

Hoy la mayoría de las visitas llegan desde el móvil y Google indexa las webs a partir de su versión móvil. Una web que obliga a hacer zoom o a desplazarse en horizontal pierde visitas y posicionamiento.

Ejemplo

Las tres piezas básicas: la etiqueta viewport, maquetación flexible y media queries en CSS.

<meta name="viewport" content="width=device-width, initial-scale=1">

/* Mobile first: estilos base para pantallas pequeñas */
.tarjetas { display: grid; gap: 1rem; }
img { max-width: 100%; height: auto; }

/* A partir de 768 px, dos columnas */
@media (min-width: 768px) {
  .tarjetas { grid-template-columns: 1fr 1fr; }
}

Y servir imágenes del tamaño adecuado a cada pantalla:

<img src="foto-800.webp"
     srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w"
     sizes="(min-width: 768px) 50vw, 100vw"
     width="800" height="533" alt="...">

Cosas que conviene saber

Mobile first: diseñar primero para móvil y ampliar para pantallas grandes suele dar CSS más simple y webs más ligeras.
Usa unidades relativas (rem, %, vw) y deja que el contenido fluya en lugar de fijar anchos en píxeles.
Los botones y enlaces deben ser fáciles de pulsar con el dedo: unos 44-48 px como mínimo.

Errores habituales

Ocultar contenido en el móvil con display: none: Google indexa la versión móvil, así que ese contenido cuenta menos o deja de verse.
Probar solo encogiendo la ventana del navegador; prueba también en móviles reales.

¿Tienes un producto o servicio relacionado con Diseño responsive? Anúnciate en este término.

Términos relacionados

Categorías: Frontend