Más del 60 por ciento de todo el tráfico web viene hoy de dispositivos móviles. Una web que no es compatible con móviles falla a la mayoría de quienes la visitan, y no es un caso marginal. Acertar con el móvil no es un extra. Es el mínimo que se espera de la web de un negocio.
Hacer una web compatible con móviles significa dar a los visitantes móviles la misma calidad de experiencia que a los de ordenador. No una versión recortada que carga como puede, sino un sitio donde el texto se lee, la navegación funciona, las imágenes se ven bien y los formularios se pueden enviar desde un móvil sin frustración.
Este artículo repasa los cambios prácticos que hacen que una web sea realmente compatible con móviles, desde la navegación y el texto hasta las imágenes, los formularios y la velocidad.
¿Qué significa en la práctica ser compatible con móviles?
Una web compatible con móviles es aquella en la que todas las funciones trabajan bien en un móvil sin tener que buscar rodeos. El texto se lee con el zoom por defecto. La navegación se abre y se cierra sin problemas. Los botones son lo bastante grandes para tocarlos sin pulsar otro elemento. Las imágenes cargan y se ven bien. Los formularios se rellenan y se envían sin frustración.
La diferencia entre ser técnicamente compatible con móviles y serlo de verdad importa. Un sitio es técnicamente compatible si no se rompe en un móvil. Es realmente compatible si usarlo en un móvil resulta tan natural como en un ordenador. La diferencia está en los detalles. El espaciado, el tamaño de fuente, el tamaño de las zonas táctiles y el tiempo de carga deciden si la experiencia se siente bien o apenas funciona.
La base de una web compatible con móviles es el diseño adaptable, que hace que el layout se ajuste automáticamente a distintos tamaños de pantalla. El artículo sobre qué es el diseño adaptable explica cómo funciona a nivel técnico.
¿Cómo pruebas si tu web es compatible con móviles?
La prueba más fiable es recorrer tu propio sitio en un móvil real. No en la vista previa móvil de un navegador. No en una ventana de escritorio reducida a una columna estrecha. Un móvil de verdad, con tus pulgares, como lo usaría un visitante.
Recorre todas las páginas. Abre la navegación y comprueba que se llega a todos los enlaces. Lee el texto para confirmar que se entiende sin zoom. Toca todos los botones para confirmar que responden bien. Rellena y envía los formularios. Comprueba que las imágenes cargan y se ven bien. Comprueba que nada obliga a desplazarse en horizontal.
Los buscadores también ofrecen herramientas gratuitas de prueba para móviles. Introduces tu URL y la herramienta señala problemas concretos, como texto demasiado pequeño para leerlo, elementos pulsables demasiado juntos o contenido más ancho que la pantalla. Para una guía más amplia de qué revisar antes de lanzar un sitio, qué debes saber antes de lanzar tu web cubre las pruebas en móvil dentro del proceso completo previo al lanzamiento.
¿Cómo haces que la navegación funcione en el móvil?
La navegación es donde más se rompe la experiencia móvil. Un menú horizontal que ocupa todo el ancho de un monitor no tiene dónde ir en la pantalla de un móvil. La solución habitual es un menú plegable que se activa con un botón, normalmente en una esquina de arriba.
El botón del menú tiene que reconocerse al instante. El icono de tres líneas se ha convertido en una convención muy conocida para los menús plegados. Cuando el menú se abre, debe cubrir la pantalla lo suficiente para leerlo y tocarlo con facilidad. Los elementos necesitan espacio vertical suficiente para que un dedo toque uno sin pulsar el de arriba o el de abajo.
Mantén corto el menú móvil. Si tu navegación de escritorio tiene muchos elementos, piensa cuáles necesitan más los visitantes móviles y si los secundarios pueden agruparse o quitarse del primer nivel. Un menú móvil más limpio es más fácil de usar. El artículo sobre qué es la navegación web cubre la estructura y la usabilidad de la navegación en todos los dispositivos.
¿Cómo deben verse el texto y las fuentes en el móvil?
Un texto cómodo de leer en el ordenador puede volverse incómodamente pequeño en un móvil si el tamaño de fuente es demasiado bajo. Un tamaño mínimo de 16 píxeles para el cuerpo del texto es el estándar más usado para la legibilidad en móvil. Por debajo, el texto obliga a hacer zoom, y la mayoría de los visitantes no lo hará.
La longitud de línea también importa. En el ordenador, una línea de texto puede ocupar de 600 a 700 píxeles. En el móvil, ese mismo texto se parte en líneas mucho más cortas. Si el interlineado es muy justo o los párrafos son muy largos, leer se hace incómodo en una pantalla pequeña. Los párrafos cortos, el interlineado generoso y las pausas claras entre secciones mejoran la legibilidad.
Los encabezados deben reducirse de forma proporcional. Un H1 de 48 píxeles en el ordenador puede quedar bien con 28 a 32 píxeles en el móvil. Si los encabezados mantienen el tamaño de escritorio en un móvil, dominan la pantalla y empujan el contenido real hacia abajo.
¿Cómo tratas las imágenes en el móvil?
Las imágenes son uno de los mayores riesgos de rendimiento en el móvil. Una imagen de resolución completa pensada para un monitor de 1440 píxeles es mucho más grande de lo necesario en la pantalla de un móvil de 375 píxeles. Servir esa imagen a los visitantes móviles desperdicia datos y ralentiza mucho la página.
La solución es servir imágenes del tamaño adecuado a cada dispositivo. La mayoría de los creadores de webs modernos lo hacen solos: generan varios tamaños y sirven el correcto según la pantalla. Si gestionas las imágenes a mano, redimensiónalas al mayor tamaño al que se mostrarán, no al mayor que puede producir tu cámara.
Fíjate en cómo se recortan las imágenes en el móvil. Una imagen apaisada ancha que se ve equilibrada en el ordenador puede recortarse mal en una pantalla móvil alargada. Las imágenes principales y las secciones de banner son donde más se nota la diferencia entre el recorte de escritorio y el de móvil. El artículo sobre qué es la velocidad de una web explica el efecto de la optimización de imágenes en el rendimiento global de la página.
¿Qué hace que los formularios funcionen bien en el móvil?
Los formularios son un punto de mucha fricción en el móvil. Rellenar campos con un teclado táctil pequeño cuesta más que escribir con un teclado completo. Cuantos menos campos incluyas, mejor. Cada campo extra es una oportunidad de frustración y un motivo para abandonar.
El tamaño de los campos importa. Deben ser lo bastante grandes para tocarlos con precisión y lo bastante anchos para que el texto de dentro se lea. Las etiquetas deben aparecer encima de cada campo, no solo como texto de ejemplo dentro de él, porque ese texto desaparece en cuanto alguien empieza a escribir.
Configura bien los tipos de campo. Un campo de correo debe activar el teclado de correo. Un campo de teléfono debe activar el teclado numérico. Un campo de fecha debe abrir un selector de fecha. Son ajustes técnicos pequeños que hacen la experiencia notablemente más fluida.
Prueba cada formulario en tu móvil rellenándolo por completo y enviándolo. Confirma que el envío se completa y que el mensaje de confirmación aparece bien. Un formulario de contacto que se envía sin problema en el ordenador pero falla en el móvil pierde clientes potenciales en silencio sin que lo sepas.
¿Cómo afecta ser compatible con móviles al posicionamiento en buscadores?
Los buscadores indexan primero la versión móvil de tu web. Esto significa que la experiencia móvil no solo importa a los visitantes móviles. Es la versión que determina cómo se entiende y se posiciona tu sitio en todos los dispositivos.
Un sitio que rinde mal en el móvil, ya sea por tiempos de carga lentos, layouts rotos o texto ilegible, se posicionará por debajo de sitios comparables que manejan bien el móvil. Los visitantes que llegan a un sitio móvil y se van enseguida porque no funciona envían una señal clara de que la página no cubrió sus necesidades. Las altas tasas de rebote de los visitantes móviles afectan al posicionamiento con el tiempo.
La velocidad de página en el móvil es un factor concreto. Una página que carga en dos segundos con una conexión de banda ancha rápida puede tardar seis o más con una conexión móvil normal. Las imágenes optimizadas, pocos scripts bloqueantes y una estructura de plantilla limpia contribuyen a cargas móviles más rápidas. Para ver el panorama completo de cómo funciona la optimización para buscadores, qué es el SEO cubre todo el tema, incluidos los factores técnicos.
Cómo gestiona WEMASY el móvil
El creador de webs de WEMASY usa plantillas adaptables que se ajustan automáticamente a ordenador, tableta y móvil. El editor visual incluye una vista previa móvil para que veas cómo queda cada sección en una pantalla pequeña mientras construyes. La optimización de imágenes y el rendimiento móvil los gestiona la plataforma, sin configuración manual.
Mira qué incluye en el creador de webs de WEMASY o consulta los planes en la página de precios.
Preguntas frecuentes
¿Cómo sé si mi web es compatible con móviles?
Recorre tu sitio en un móvil real. Prueba cada página, cada elemento de navegación, cada formulario y cada botón. Los buscadores también ofrecen herramientas gratuitas de prueba para móviles: introduces tu URL y señalan problemas concretos. La combinación de un repaso manual y una comprobación con herramientas sacará a la luz los problemas que más importan. Las vistas previas móviles del navegador son útiles durante el desarrollo, pero no replican del todo la experiencia en un dispositivo real. Con el creador de webs de WEMASY, puedes configurarlo directamente en tu web.
¿Puedo hacer compatible con móviles una web existente sin rehacerla?
Depende de cómo se construyó el sitio. En los sitios hechos con creadores de webs modernos, a menudo se puede mejorar la experiencia móvil ajustando la configuración de la plantilla, redimensionando imágenes o cambiando a una plantilla mejor. Los sitios hechos con código propio o en plataformas antiguas pueden requerir un trabajo más serio. En algunos casos, rehacerlos en una plataforma actual es más rápido y da mejor resultado que intentar arreglar un sitio antiguo a base de parches.
¿Una web compatible con móviles se posiciona mejor en los resultados de búsqueda?
Los buscadores usan la versión móvil de tu sitio como versión principal para indexar y posicionar. Un sitio que funciona bien en el móvil y carga rápido en un teléfono suele rendir mejor que uno pensado sobre todo para ordenador. Además del beneficio en el posicionamiento, una web compatible con móviles retiene más a los visitantes, reduce las tasas de rebote y convierte mejor. Estas señales de comportamiento también afectan al rendimiento en búsquedas a largo plazo.
¿Cuál es el tamaño mínimo de fuente en una web móvil?
Un tamaño de fuente de 16 píxeles para el cuerpo del texto es el mínimo más recomendado para la legibilidad en móvil. Por debajo, el texto cuesta de leer sin hacer zoom. Los encabezados deben reducirse de forma proporcional para que no abrumen la pantalla. Un interlineado de al menos 1,5 veces el tamaño de la fuente mejora la lectura en pantallas pequeñas, sobre todo en párrafos largos.
¿De qué tamaño deben ser los botones en una web móvil?
Para los botones móviles se recomienda de forma general un tamaño mínimo de zona táctil de 44 por 44 píxeles. Así el dedo tiene un objetivo claro y se reducen los toques accidentales en elementos vecinos. Los botones también deben tener espacio entre sí para que tocar uno no cuente como un toque en algo cercano. Los botones de llamada a la acción deben ser grandes, destacar visualmente y alcanzarse con el pulgar sin cambiar la posición del móvil.