Mobile first: cómo diseñar una web que funcione en móvil

Mobile first consiste en empezar el diseño de una web por las pantallas pequeñas y ampliarlo cuando hay más espacio. Obliga a decidir qué debe encontrar primero una persona y cómo podrá avanzar. Para valorar el resultado, recorre una tarea completa: entender un servicio, localizar la información que falta y llegar al contacto.

Publicado originalmente en 2013; esta revisión, realizada en octubre de 2026, actualiza las recomendaciones y conserva la ilustración histórica.

Mobile first, responsive e indexación móvil: tres conceptos distintos

• Mobile first es una forma de diseñar. Se parte de una composición para pantallas pequeñas y se incorporan cambios de distribución al disponer de más espacio.
• Responsive describe la adaptación. La composición responde a diferentes tamaños de pantalla. Una web puede ser responsive aunque su diseño se haya empezado por el escritorio.
• La indexación móvil es un proceso de Google. El buscador utiliza la versión móvil del contenido, rastreada con su agente para smartphones, para indexar y clasificar las páginas.

La guía de diseño responsive de MDN explica cómo combinar una base sencilla con distribuciones más amplias. La documentación de Google sobre indexación móvil describe el proceso del buscador. Conviene separar estas decisiones al encargar una web: el aspecto, la facilidad de uso y la disponibilidad del contenido necesitan sus propias comprobaciones.

Empieza por la tarea, antes de ordenar los bloques

En una página de servicios, un recorrido de ejemplo sería descubrir qué se ofrece, comprobar si encaja con una necesidad y consultar cómo empezar. Es una hipótesis de trabajo: tendrás que contrastarla con las preguntas de tus clientes y con el uso de tu propia web.

Escribe ese recorrido y asigna una función a cada bloque. La introducción debe explicar la oferta; los detalles, resolver dudas; y la llamada a la acción, indicar el siguiente paso. Si varios elementos compiten por ser lo primero que se ve, revisa su prioridad antes de reducir tamaños o apretarlos en una columna.

Una comprobación útil consiste en pedir a alguien que encuentre una información concreta sin darle pistas. Anota dónde se detiene, qué interpreta mal y qué espera al pulsar. Ese resultado sirve para formular una mejora concreta, como cambiar una etiqueta ambigua o acercar una explicación al lugar donde hace falta.

Cuida la lectura al estrechar la pantalla y ampliar el texto

Lee un párrafo largo y aumenta el zoom. El texto debe reorganizarse sin que desaparezcan información o funciones. El criterio de redistribución del contenido de W3C toma como referencia 320 píxeles CSS de ancho para contenido de desplazamiento vertical; contempla excepciones para elementos que necesitan dos dimensiones, como ciertos mapas o tablas. Esa referencia ayuda a detectar problemas, pero una única prueba no acredita la accesibilidad completa de una web.

Revisa especialmente títulos extensos, enlaces largos, imágenes y avisos superpuestos. Busca líneas cortadas, botones fuera de la pantalla o elementos que tapen lo que estás leyendo. Después ensancha la ventana: los textos también deben seguir siendo cómodos de recorrer cuando hay espacio disponible.

Comprueba el menú con el dedo y con el teclado

El menú debe ser reconocible, usar nombres comprensibles e indicar dónde estás. La guía de menús accesibles de W3C explica por qué su estructura y sus etiquetas afectan a personas con distintas formas de navegación.

Al tocar una opción, comprueba que hay espacio suficiente para evitar activar la de al lado. Al recorrerla con el teclado, identifica en todo momento qué elemento tiene el foco. Estas comprobaciones se apoyan en las recomendaciones de presentación de menús de W3C. Revisa también que el menú siga funcionando al ampliar el texto.

Si hay submenús, prueba abrirlos y llegar a cada destino sin ratón. Evita que una sección dependa exclusivamente de mantener el puntero sobre ella. W3C propone formas de hacer accesibles los menús desplegables y de ofrecer rutas alternativas hacia sus contenidos.

Revisa el formulario como parte del recorrido

En el contacto, cada campo debe tener una finalidad comprensible y una etiqueta asociada que identifique lo que se pide. Comprueba que entiendes las instrucciones mientras escribes y que puedes pasar de un campo a otro con el teclado.

Solicita los datos necesarios para atender la consulta y revisa qué sucede cuando falta alguno. La guía de formularios de W3C recomienda formularios sencillos, indicaciones para corregir errores y una confirmación clara del resultado. Haz estas pruebas en un entorno preparado para ellas: enviar consultas ficticias al formulario público puede acabar en el correo o en los sistemas del negocio.

Mantén el contenido importante disponible en móvil

Adaptar la presentación no exige recortar la información esencial. Según la guía de Google, el contenido principal debe ser equivalente en móvil y escritorio. Puede organizarse en pestañas o acordeones, pero su carga no debe depender de que Google haga clic, deslice o escriba. Si existen versiones diferenciadas, revisa también que sus títulos, descripciones y directivas de indexación sean coherentes.

Compara una misma página en ambos tamaños: explicación del servicio, condiciones, imágenes informativas y caminos hacia el contacto. Anota las ausencias para revisarlas con quien mantiene la web. Para ampliar las comprobaciones de búsqueda, puedes consultar nuestra guía práctica para posicionar una web.

Convierte la revisión en una lista de tareas verificables

Prepara un recorrido corto y repítelo en una pantalla estrecha, una amplia y un móvil real disponible. Elige tareas concretas: localizar un servicio desde el menú, encontrar una respuesta dentro de su página y llegar al formulario. La emulación del navegador ayuda a explorar tamaños; el dispositivo permite comprobar la interacción táctil y el teclado que aparece al escribir.

1. Registra la página, el dispositivo o navegador y la acción que estás intentando completar.
2. Describe el obstáculo con precisión: qué esperabas y qué ocurrió. Añade una captura si ayuda a reproducirlo.
3. Prioriza los fallos que impiden completar la tarea, como un enlace inaccesible o un campo que queda oculto.
4. Después de corregir, repite el mismo recorrido en móvil y escritorio y comprueba que la mejora funciona en ambos.

Si estás preparando un proyecto, puedes ver nuestro servicio de diseño web a medida y contarnos qué necesita hacer una persona al visitar tu web. Ese recorrido es un buen punto de partida para definir el contenido, la navegación y las prioridades del diseño.