Diseñar pensando primero en el móvil (mobile first) significa plantear la web empezando por la pantalla pequeña, con lo esencial y bien ordenado, y después ampliarla para tablet y ordenador. Es la forma más lógica de trabajar porque buena parte de las visitas llegan desde el teléfono y porque Google indexa y evalúa principalmente la versión móvil de tu web. El resultado suele ser una web más clara, más rápida y que convierte mejor en todos los dispositivos.
Mobile first no es lo mismo que «responsive»
Las dos ideas se confunden a menudo, pero son distintas:
- Responsive describe el resultado: una web que se adapta a cualquier tamaño de pantalla.
- Mobile first describe el proceso: empiezas diseñando para el móvil y vas añadiendo para pantallas más grandes.
Muchas webs son responsive pero se diseñaron en un monitor de 27 pulgadas y luego se «encogieron». El síntoma es fácil de reconocer: menús interminables, textos diminutos, botones que se tocan con el dedo meñique y una imagen enorme que tarda en cargar antes de que veas qué vende la empresa.
Cuando empiezas por el móvil, el espacio te obliga a decidir qué es importante. Y esa disciplina mejora también la versión de escritorio.
Por qué Google mira primero tu móvil
Google utiliza la indexación mobile first: rastrea y valora sobre todo la versión móvil de las páginas. Eso tiene consecuencias directas:
- Si un contenido está en escritorio pero lo escondes o eliminas en móvil, para Google prácticamente no existe.
- La velocidad y la experiencia en el teléfono influyen en cómo te evalúa. Las Core Web Vitals se miden también en móvil, donde las conexiones y los procesadores son más modestos.
- Los datos estructurados, los titles y los enlaces internos deben estar igual en ambas versiones.
En otras palabras: si tu web flojea en el móvil, tu posicionamiento SEO flojea con ella.
Cómo se aplica en la práctica
1. Empieza por el contenido, no por el diseño
Antes de dibujar nada, haz una lista de lo que el visitante necesita en cada página y ordénala por importancia. En una clínica dental podría ser: qué tratamientos hace, dónde está, cómo pedir cita y teléfono. Eso va arriba. La historia de la clínica y la galería de instalaciones, más abajo.
2. Una columna y jerarquía clara
En el móvil, todo se lee de arriba abajo. Usa títulos que se entiendan solos, párrafos cortos y bloques bien separados. Si el usuario hace scroll y en cada pantalla entiende qué le estás contando, vas bien.
3. Botones pensados para dedos
- Tamaño cómodo para tocar sin acertar a la tercera.
- Espacio suficiente entre enlaces para no pulsar el que no era.
- La llamada a la acción principal accesible sin tener que buscarla: «Llamar», «Pedir cita», «Ver carta».
4. Formularios cortos y amables
Rellenar un formulario en el teléfono es incómodo. Pide solo lo imprescindible, usa el tipo de campo correcto (que salga el teclado numérico para el teléfono y el de email para el correo) y permite el autocompletado. Tienes más ideas en nuestra guía de formularios web que convierten.
5. Imágenes ligeras y adaptadas
Servir una foto de 4.000 píxeles a un móvil es como mandar un camión para llevar una carta. Usa formatos modernos, tamaños adaptados a cada pantalla y carga diferida para lo que está más abajo.
6. Menú sencillo
Cinco o seis opciones principales como mucho. Si tu menú tiene treinta enlaces, el problema no es el móvil: es la arquitectura de la web.
Errores frecuentes en móvil
| Error | Por qué molesta | Solución |
|---|---|---|
| Ventanas emergentes a pantalla completa | Tapan el contenido y cuesta cerrarlas | Avisos discretos o banners pequeños |
| Texto demasiado pequeño | Obliga a hacer zoom | Tamaño base legible y buen interlineado |
| Tablas anchas sin adaptar | Desbordan la pantalla | Tablas con scroll horizontal o rediseñadas en tarjetas |
| Teléfono sin enlace | Hay que copiarlo a mano | Enlace de llamada directa |
| Carruseles automáticos pesados | Lentos y poco usados | Una imagen potente y un mensaje claro |
| Vídeo de fondo en la portada | Consume datos y batería | Imagen fija optimizada |
Cómo comprobar tu web desde el móvil
No necesitas herramientas complicadas para hacer un primer diagnóstico:
- Usa tu propia web desde tu teléfono, con datos móviles y no con el wifi de la oficina. Intenta hacer lo que haría un cliente: encontrar un servicio, pedir presupuesto, llamar.
- Pídeselo a alguien de fuera y observa sin ayudar. Donde dude, hay un problema.
- Revisa PageSpeed Insights en su pestaña de móvil para ver velocidad y problemas técnicos.
- Mira en tu analítica qué porcentaje de visitas llegan desde móvil y cómo convierten frente al escritorio. Si convierten mucho peor, hay margen de mejora.
¿Rediseño completo o ajustes?
Depende de cómo esté construida tu web. Si es relativamente reciente y está bien hecha, a veces basta con revisar contenidos, botones, formularios e imágenes. Si es antigua, pesada o se diseñó solo para escritorio, suele compensar más un diseño web nuevo planteado desde el móvil que ir poniendo parches. En ese caso, conviene hacerlo con cuidado para no perder lo ganado en buscadores: te lo contamos en rediseño web sin perder posicionamiento.
En resumen
Diseñar primero para el móvil no es una moda: es diseñar para donde están tus clientes y para cómo te evalúa Google. Empieza por lo esencial, piensa en dedos y no en ratones, cuida la velocidad y comprueba la experiencia desde un teléfono real. Si quieres que revisemos cómo se ve y funciona tu web en el móvil, hablamos.
¿Hablamos?