Qué es el diseño responsive y por qué tu web lo necesita

¿Cómo funciona el diseño responsive?

El diseño responsive combina tres técnicas: la etiqueta meta viewport, que indica al navegador que use el ancho real del dispositivo; las rejillas y medidas flexibles, que se reparten el espacio disponible; y las media queries de CSS, que cambian el diseño a partir de ciertos anchos.

<meta name="viewport" content="width=device-width, initial-scale=1">
@media (max-width: 760px) {
.columnas { grid-template-columns: 1fr; }
}

Así, tres columnas en ordenador pasan a una sola columna en móvil sin cambiar de página ni de URL.

¿Por qué Google recomienda el diseño responsive?

Google recomienda el diseño responsive porque sirve el mismo contenido en la misma URL a todos los dispositivos, lo que facilita el rastreo y evita diferencias entre la versión móvil y la de ordenador (Google Search Central).

Con la indexación mobile-first, Google usa la versión móvil para indexar; en una web responsive, la versión móvil tiene el mismo contenido que la de ordenador por definición.

¿Responsive o mobile-first?

Responsive describe cómo se adapta el diseño; mobile-first, por dónde se empieza a diseñar: primero la pantalla pequeña y después se amplía para pantallas mayores.

Diseñar primero para móvil obliga a priorizar: en una pantalla de 380 píxeles solo cabe lo esencial, y eso suele mejorar también la versión de ordenador. Es como se diseñan los bloques de Estrategia 360.

En la práctica, mobile-first también obliga a decidir el orden del contenido: en móvil, lo que está más arriba es lo que se ve; en ordenador, el ojo recorre varias columnas.

¿Qué tamaño deben tener los botones en móvil?

Los elementos táctiles deben ser lo bastante grandes y estar separados para pulsarlos sin error: las herramientas de Google recomiendan objetivos de unos 48 por 48 píxeles, y las pautas WCAG 2.2 fijan un mínimo de 24 por 24 píxeles.

En la práctica, los botones principales de una web suelen tener al menos 44 a 56 píxeles de alto. El comprobador de esta página indica si un botón cumple esos tamaños.

¿Cómo adaptar las imágenes?

Las imágenes se adaptan con la propiedad max-width: 100 % en CSS, para que nunca se salgan del contenedor, y con el atributo srcset, que permite al navegador descargar una versión más pequeña en móvil.

Servir en móvil la misma imagen de 2.000 píxeles que en un monitor grande es uno de los errores que más empeoran el LCP. Con srcset, el móvil descarga una imagen ajustada a su pantalla.

Para los iconos y logotipos, el formato SVG se adapta a cualquier tamaño sin perder nitidez y suele pesar menos que una imagen.

¿Cómo comprobar si una web es responsive paso a paso?

Cómo revisar el diseño responsive de una web:

1. Abrir la web en un móvil real, no solo en el ordenador.
2. Usar el modo de dispositivo de Chrome DevTools en varios anchos.
3. Comprobar que no aparece desplazamiento horizontal.
4. Revisar que los textos se leen sin hacer zoom.
5. Pulsar todos los botones y enlaces con el dedo.
6. Comprobar en Search Console, con la Inspección de URL, cómo ve Google la página.

¿Las plataformas como Tilda son responsive?

Sí: constructores como Tilda, WordPress con temas modernos o Shopify generan webs responsive por defecto, pero cada bloque personalizado debe probarse en móvil.

En Tilda, por ejemplo, los bloques HTML propios no se adaptan solos si el código usa anchos fijos. Por eso los bloques de Estrategia 360 usan rejillas flexibles, max-width y media queries, y se revisan en móvil antes de publicar.

¿Qué errores se cometen con el diseño responsive?

El error más común es diseñar solo para ordenador y «encoger» después, con textos diminutos y botones imposibles de pulsar en móvil.

• Anchos fijos en píxeles que provocan desplazamiento horizontal.
• Tablas anchas sin contenedor con desplazamiento propio.
• Ocultar contenido importante en móvil.
• Ventanas emergentes que tapan la pantalla.
• Imágenes enormes servidas a móviles.