Responsive no es "achicar el desktop"
Diseño responsive adapta layout, contenido y interacción a cada viewport. Reducir zoom de una página de escritorio en móvil no es responsive: es mala UX que aumenta rebote y perjudica SEO móvil-first.
Enfoque mobile-first
Diseña primero para 375–414 px de ancho: navegación simplificada, tipografía legible (16 px mínimo en cuerpo), CTAs accesibles con el pulgar y contenido prioritario arriba. Luego expande breakpoints para tablet y desktop con grillas fluidas, no anchos fijos rígidos.
Breakpoints y grillas fluidas
Usa breakpoints basados en contenido, no solo en dispositivos populares. CSS Grid y Flexbox permiten layouts que respiran. Evita anchos fijos en px para contenedores principales; prefiere max-width y porcentajes con gap consistente del design system.
Tipografía e imágenes adaptativas
Escala tipográfica con clamp() para fluidez entre viewports. Imágenes con srcset y sizes para servir resolución adecuada. Iconos SVG en lugar de PNG multi-resolución. Videos responsive con aspect-ratio CSS.
Navegación móvil que funciona
Menú hamburguesa solo si el árbol es profundo; para 4–6 ítems, barra visible puede convertir mejor. Sticky header ligero con CTA teléfono/WhatsApp. Evita hover-only: en táctil no existe hover.
Rendimiento en conexiones móviles
Responsive lento no sirve. Limita animaciones pesadas en móvil, condiciona carga de scripts y prueba en red 4G simulada. INP sufre si botones pequeños provocan toques erróneos y reintentos.
Testing cross-device real
Emuladores ayudan, pero prueba en iOS Safari y Chrome Android reales. Verifica formularios, modales, tablas (scroll horizontal o cards apiladas) y que no haya contenido oculto por error que Google siga indexando vacío.
Incluye pruebas de orientación landscape, teclado virtual que empuja inputs en formularios y modo oscuro si tu design system lo soporta. Responsive bien ejecutado reduce tickets de soporte del tipo "en mi celular no se ve".
Referencias oficiales
Fuentes técnicas y documentación de autoridades del tema (para fundamentar buenas prácticas; no sustituyen el diagnóstico de tu proyecto):
Preguntas frecuentes
¿Necesito app nativa además de web responsive?
Rara vez al inicio. Responsive bien hecho cubre la mayoría de casos B2B. App nativa cuando necesitas push, offline profundo o hardware específico.
¿Cuántos breakpoints son ideales?
3–4 suelen bastar si la grilla es fluida. Más breakpoints sin criterio complican mantenimiento.
¿Google penaliza sitios no responsive?
Usa indexación mobile-first. Sitios no usable en móvil pierden visibilidad y conversiones.
¿Tablas en móvil cómo se manejan?
Cards apiladas, scroll horizontal con indicador o simplificar datos. Nunca overflow oculto sin alternativa.
¿Responsive afecta Core Web Vitals?
Sí. Layout shifts (CLS) por banners sin dimensiones y JS distinto por breakpoint impactan métricas.
¿Tu web se ve mal en móvil? Escríbenos o explora desarrollo web responsive con enfoque comercial.