Web responsive

¿Qué es una web responsive?

Una web responsive (o adaptativa) ofrece el mismo código HTML a todos los dispositivos y adapta el diseño mediante cuadrículas fluidas, imágenes escalables y CSS media queries (consultas de medios). En lugar de mantener un sitio móvil independiente (como un subdominio m.), el contenido fluye de modo que las columnas, las fuentes y la navegación se ajustan al ancho de la pantalla. La base técnica es <meta name="viewport" content="width=device-width, initial-scale=1"> en la etiqueta <head> de la página; sin ella, los navegadores móviles procesarán la página con el ancho de escritorio e ignorarán tus media queries.

¿Por qué es importante una web responsive?

Google utiliza la indexación primero móvil (mobile-first indexing), lo que significa que la versión móvil de tu página es la que se rastrea, indexa y utiliza para determinar el posicionamiento. Una configuración responsive con una sola URL y un único HTML es también el enfoque recomendado por Google, ya que es más fácil de mantener y evita los errores de SEO que suelen introducir los sitios móviles independientes. Para una tienda online representa conversión directa: la mayor parte del tráfico procede de dispositivos móviles, y una página de producto saturada o un proceso de pago que no quepa en pantalla cuestan ventas de forma inmediata.

Casos de uso comunes

• Páginas de producto en móviles: asegúrese de que las imágenes, el precio y el botón “Añadir al carrito” sean legibles y fáciles de pulsar sin hacer zoom.
• Dimensiones reservadas: define el ancho/alto o una relación de aspecto en imágenes y banners para que no desplacen el contenido y afecten al CLS.
• Priorizar el contenido above the fold: el contenido más relevante debe ser visible en pantallas pequeñas sin necesidad de hacer scroll.
• Pruebas en múltiples dispositivos: comprueba el tema en teléfonos, tabletas y ordenadores de escritorio antes de realizar cualquier cambio importante.

Perspectiva de Shopify

Los temas de Online Store 2.0 de Shopify, como Dawn, son responsive y móviles por diseño desde el primer momento, pero las personalizaciones y las aplicaciones añadidas pueden romper esta fluidez. Las ventanas emergentes (popups), las barras flotantes y los scripts de terceros son los infractores más habituales en móviles. Evalúa tus cambios en la vista de dispositivos del editor de temas y en un teléfono real, y supervisa las Core Web Vitals en Search Console, en lugar de asumir que el tema gestiona todo automáticamente.