Versión móvil de una web: ocho sitios donde se rompe más a menudo

Más de la mitad de las visitas vienen del móvil, y se revisa desde el escritorio

El dueño de una web la mira en una pantalla grande, con internet rápido, ratón y la caché caliente. Su visitante suele estar en el móvil, en el transporte, con una mano.

Por eso toda una clase de averías permanece invisible durante meses. No porque cueste encontrarlas, sino porque nadie mira desde el lado en el que existen.

Lo empeora que la versión móvil casi siempre se hace la segunda. Primero la maqueta de pantalla ancha y después la apretamos para el móvil. Apretar es justo el momento en el que todo se rompe.

Abajo: ocho sitios que se rompen más a menudo, por orden de frecuencia, y una manera de revisar tu web en media hora que encuentra problemas reales en lugar de confirmar que se ve bien.

Por qué se ve bien no es una comprobación

La forma más común de comprobar es abrir la web en el móvil propio y desplazarse. Solo caza averías groseras de maquetación y se pierde todo lo demás.

Tu móvil no es un móvil medio. Es más nuevo, la pantalla es mayor, la conexión más rápida y media web ya está en caché de visitas anteriores.

Y lo esencial: tú sabes dónde tocar. No buscas un botón, no lees etiquetas, no dudas de qué se abrirá. Esas tres cosas son exactamente la experiencia móvil de un desconocido.

Una comprobación real es completar una tarea concreta de principio a fin: encontrar un precio, enviar una solicitud, hacer una llamada. Y cronometrar lo que costó.

Comprueba aparte con datos móviles y no con el wifi de casa. La diferencia de velocidad puede ser de cinco veces, y la mitad de los problemas solo se ven así.

Botones: tamaño y acierto

La avería más común y la más barata de arreglar.

Un dedo no es un cursor. El área pulsable tiene que ser bastante mayor de lo que parece el botón: un cuadrado de aproximadamente un centímetro de lado es la guía. Un enlace de la altura de una línea de texto no la cumple.

El segundo problema son los botones pegados unos a otros. Dos elementos vecinos sin separación significan que la gente falla con regularidad, y no siempre se da cuenta.

El tercero es un botón bajo la barra del navegador. La parte inferior de la pantalla del móvil pertenece a la interfaz, y un elemento fijado abajo queda medio oculto.

Y un cuarto, menos evidente: un número de teléfono que no llama al tocarlo. Escribir el número como texto plano y no convertirlo en enlace obliga a seleccionarlo y copiarlo con una mano.

Formularios: dónde se pierden las solicitudes

Un formulario en el móvil es donde se cae la mayoría de quienes llegaron al final del recorrido.

Cada campo de más cuesta más que en un ordenador: escribir es incómodo, la pantalla es pequeña y todo alrededor distrae. Pide exactamente lo necesario para poder devolver la llamada.

Comprueba qué teclado se abre en cada campo. Un campo de teléfono debe abrir el numérico y uno de correo el que tiene arroba, no el corriente. Es una línea de marcado y una diferencia notable de comodidad.

Mira qué pasa cuando el teclado cubre media pantalla. A menudo el campo en el que se escribe queda debajo, y la persona escribe a ciegas.

Y comprueba que la confirmación de envío se ve sin desplazarse. Si el mensaje de gracias aparece por encima de la ventana, no lo verán y pulsarán el botón una segunda vez.

Tablas, listas de precios y todo lo ancho

La segunda fuente de averías más común y la primera en consecuencias si tienes catálogo.

Una tabla de seis columnas no cabe en un móvil de ninguna manera. Hay dos opciones: darle desplazamiento horizontal dentro de su propio contenedor o rehacerla como fichas donde cada fila es un bloque.

Lo que no se puede hacer es dejarla como está. Entonces se desplaza la página entera, y quien intenta ver el borde derecho de la tabla se va de lado junto con el menú y la cabecera.

Lo mismo vale para imágenes anchas, bloques de código y mapas incrustados. Todo elemento más ancho que la pantalla tiene que desplazarse dentro de sí y no arrastrar la página.

Se prueba con un gesto: desliza de lado en cualquier punto de la página. Si la página se movió, tienes un elemento que la rompe.

Ventanas emergentes

En un ordenador una ventana emergente cubre parte de la pantalla. En un móvil la cubre entera.

De ahí una regla que conviene tomar como firme: en el móvil debe cerrarse al primer intento, con un botón de cierre de tamaño suficiente, y no reaparecer en la misma sesión.

Las más dañinas son las que aparecen nada más llegar. Quien viene de una búsqueda aún no ha entendido si está en el sitio correcto y ya tiene que descartar algo. Una parte simplemente se va.

Categoría aparte son los avisos de consentimiento y notificaciones que se apilan. Dos diálogos a la vez en una pantalla pequeña significan que el contenido no se ve en absoluto.

Un compromiso práctico: enseñar la oferta no de entrada, sino después de que alguien haya bajado media página o pasado al menos medio minuto en ella.

Texto: tamaño, longitud de línea, contraste

Tres cosas que parecen cuestión de gusto y deciden si alguien lee.

Tamaño: el texto pequeño en un móvil no se lee, se amplía con los dedos, y eso irrita. El texto de lectura no debería ser menor que en un ordenador, más bien al contrario.

Longitud de línea: en una pantalla estrecha las líneas salen cortas solas, pero los márgenes laterales se hacen a menudo demasiado anchos. El texto necesita espacio, no media pantalla.

Contraste: el gris claro sobre blanco queda elegante en un buen monitor bajo techo y desaparece en un móvil al sol. Hay que comprobarlo en la calle, no en la mesa.

Y no desactives el zoom. Algunas webs apagan el ampliar con los dedos por estabilidad de la maquetación; para quien ve mal, eso vuelve la web inservible.

Qué frena concretamente en un móvil

La velocidad móvil no se diferencia en grado sino en tipo: los cuellos de botella son otros.

Las imágenes. Lo que en pantalla ancha se muestra a mil píxeles necesita la mitad en un móvil. Si la web sirve a todos el mismo archivo, el móvil descarga lo que no puede usar.

Los scripts de terceros. Chats, contadores, widgets de reseñas, mapas. Cada uno es imperceptible en un ordenador potente y juntos suman segundos de espera en un móvil medio.

Las fuentes. Si el texto espera a que se descargue una fuente, alguien pasa varios segundos mirando un hueco vacío. Se configura en una línea, y esa línea casi siempre se olvida.

Y todo lo que carga a la vez. Lo que queda por debajo de la primera pantalla debe cargarse al desplazarse. En un ordenador la diferencia apenas se ve; en un móvil es decisiva.

Cómo comprobarlo de verdad

Cuatro métodos, del más barato al más exacto.

Reduce la ventana del navegador en el ordenador al ancho de un móvil. Caza averías groseras de maquetación en un minuto, pero nada sobre dedos ni velocidad.

El modo dispositivo del navegador. Más cerca de la realidad: emula tamaño de pantalla, densidad de píxeles y toque en lugar de ratón. Buena manera de probar formularios y objetivos de pulsación.

Tu propio móvil con datos. La única forma de ver la velocidad real. Con la caché limpia: abre la web en una ventana privada.

Y el móvil de otra persona, preferiblemente más antiguo que el tuyo. La comprobación más honesta de todas, y revela con regularidad lo que no revela ninguna otra.

Maquetación adaptable o web móvil aparte

Una cuestión que antes se discutía y ahora tiene respuesta clara.

Una web móvil aparte en su propia dirección es una solución obsoleta. Significa dos juegos de páginas, dos juegos de textos y un riesgo permanente de que se separen.

Una maquetación adaptable es un solo juego de páginas que se reorganiza según el ancho de pantalla. Una dirección, un texto, un solo trabajo al actualizar.

Los buscadores juzgan una web por su versión móvil: esa es la que se considera principal. Es decir, el contenido que escondiste en el móvil por compacidad puede no existir para la búsqueda.

La consecuencia práctica: no escondas texto ni enlaces en la versión móvil. Plegarlos en bloques desplegables está bien; retirarlos del todo, no.

Lista de media hora

Coge un móvil, apaga el wifi y recorre los puntos.

Abre la web en una ventana privada y cronometra cuánto tarda en aparecer contenido.

Encuentra el precio de cualquier servicio sin usar el buscador interno.

Envía una solicitud hasta el final y espera la confirmación.

Toca el número de teléfono y comprueba que se abre el marcador.

Desliza de lado en varias páginas y mira si la página entera se mueve.

Abre una página con tabla o lista de precios e intenta leer el borde derecho.

Y sal a la calle con la web un día de sol. La mitad de los problemas de contraste solo se ven allí.