Cómo crear una web adaptada a móviles

Por qué importa una web para móvil

Hoy en día, más del 60 % del tráfico total de internet procede de dispositivos móviles, y en España ese porcentaje no deja de crecer. Google adoptó la «indexación mobile-first» allá por 2019, lo que significa que la optimización para Google está estrechamente ligada a la versión móvil de tu web, ya que utiliza principalmente la versión móvil para el posicionamiento. Si tu web no funciona bien en móvil, pierdes visitas y posiciones en Google.

Más allá del SEO, una web adaptada a móviles influye directamente en las conversiones. Los estudios muestran que el 57 % de los usuarios no recomendaría un negocio con una web móvil mal diseñada, y que el 53 % abandona una web que tarda más de 3 segundos en cargar en móvil.

Diseño responsive

Qué es el diseño responsive

El diseño web responsive es un enfoque que permite que tu web se adapte automáticamente al tamaño de la pantalla en la que se está viendo. En lugar de crear versiones separadas de la web para escritorio y para móvil, tienes una única web que se «flexiona» y se adapta a cada dispositivo, desde un gran monitor de escritorio hasta una pequeña pantalla de móvil.

Las tecnologías clave del diseño responsive son: las media queries de CSS (reglas que aplican estilos distintos según el ancho de la pantalla), las cuadrículas flexibles (sistemas de rejilla que usan porcentajes en lugar de píxeles fijos) y las imágenes flexibles (imágenes que se escalan dentro de su contenedor).

Media queries de CSS

Las media queries son la base del diseño responsive. Permiten aplicar distintos estilos CSS según las características del dispositivo. Los breakpoints más habituales son: 576px para móviles pequeños, 768px para tabletas, 992px para escritorio y 1200px para pantallas grandes. Por ejemplo, puedes ocultar un menú lateral en móvil y mostrar en su lugar un icono de hamburguesa.

Flexbox y CSS Grid

Los sistemas modernos de layout en CSS, como Flexbox y CSS Grid, simplifican enormemente las maquetaciones responsive. Flexbox es ideal para layouts unidimensionales (fila o columna), mientras que CSS Grid es perfecto para layouts bidimensionales (filas y columnas). Ambos sistemas incorporan propiedades para adaptarse a distintos tamaños de pantalla sin necesidad de muchas media queries.

Enfoque mobile-first

Mobile-first es una filosofía de diseño en la que primero diseñas y desarrollas la web para dispositivos móviles y luego la amplías para pantallas más grandes. Es lo contrario del enfoque tradicional, en el que se construye una web para escritorio y después se «encoge» para móvil.

Ventajas del enfoque mobile-first:

• Foco en lo esencial: una pantalla pequeña te obliga a centrarte en el contenido y las funciones más importantes.
• Mejor rendimiento: la web está optimizada desde el principio para las redes móviles más lentas.
• Mejora progresiva: añades funciones a medida que crece la pantalla, en lugar de quitarlas.
• Mejor SEO: Google prefiere el enfoque mobile-first porque utiliza la versión móvil para la indexación.

En la práctica, mobile-first significa que en CSS escribes primero los estilos para móvil y después usas media queries con min-width para añadir estilos para pantallas más grandes. Esto es lo contrario del enfoque tradicional con max-width.

Páginas AMP

Accelerated Mobile Pages (AMP) es el framework de Google para crear páginas móviles ultrarrápidas. AMP utiliza un HTML y un JavaScript restringidos con una caché integrada que permite una carga de la página casi instantánea desde la búsqueda de Google.

AMP es especialmente útil para: entradas de blog y artículos, páginas de noticias, landing pages estáticas y páginas de catálogo de productos de e-commerce. Sin embargo, AMP no es ideal para aplicaciones web complejas ni para webs con mucha interactividad, porque restringe el uso de JavaScript.

Para las webs creadas con WordPress, el plugin AMP genera automáticamente las versiones AMP de tus páginas. Instala el plugin, configura el aspecto y Google empezará a mostrar automáticamente las versiones AMP en la búsqueda móvil.

Elementos clave de una web móvil

Navegación

En móvil, la navegación suele ser un reto. Utiliza un menú de hamburguesa para el menú principal, mantén los enlaces más importantes al alcance del pulgar, evita los submenús profundos y plantéate una navegación fija (sticky) que permanezca visible al hacer scroll. Los botones y los enlaces deben ser lo bastante grandes para tocarlos con el dedo: como mínimo 44x44 píxeles.

Tipografía y legibilidad

El tamaño mínimo de fuente para móvil es de 16px; cualquier valor inferior obliga a los usuarios a hacer zoom. Utiliza suficiente interlineado (un line-height de al menos 1,5) y limita el ancho del texto a 70-80 caracteres por línea para una legibilidad óptima. El contraste entre el texto y el fondo debe ser suficiente: usa herramientas como el WebAIM Contrast Checker.

Formularios

Los formularios en móvil deben ser lo más sencillos posible. Usa los tipos de input adecuados (email, tel, number) para que el navegador muestre el teclado correcto. Evita los CAPTCHA difíciles de resolver en móvil. Activa el autorrelleno siempre que puedas y reduce al mínimo el número de campos obligatorios.

Herramientas para probar la adaptación a móviles

• Google Mobile-Friendly Test: una herramienta gratuita de Google que comprueba si tu página está adaptada a móviles.
• Chrome DevTools: el Device Mode de Chrome simula distintos dispositivos móviles directamente en el navegador.
• BrowserStack: pruebas en dispositivos reales en la nube, con soporte para cientos de modelos de teléfono.
• PageSpeed Insights: la herramienta de Google que mide el rendimiento de la web en móvil y escritorio con recomendaciones concretas.
• Responsinator: una vista previa rápida del aspecto de tu web en los dispositivos móviles más populares.

Conclusión

Una web adaptada a móviles no es un lujo: es una necesidad en 2026. Utiliza un diseño responsive con un enfoque mobile-first, presta atención a la navegación, la tipografía y los formularios, y prueba la web con regularidad en distintos dispositivos. La inversión en optimización móvil se recupera con un mejor posicionamiento en Google, más conversiones y usuarios más satisfechos. Descubre cuánto cuesta una web en todos los dispositivos, con más conversiones y usuarios más satisfechos.