Versión móvil de un sitio web: 10 reglas con ejemplos de antes y después
La mayoría de los visitantes de una tienda online llegan desde el móvil y ahí deciden si compran. Aquí tienes 10 reglas para la versión móvil con ejemplos de antes y después y tamaños exactos de botones y texto según Apple, Google y WCAG.
¿Por qué la versión móvil no es una web «encogida»?
En el móvil se pulsa con el dedo, se lee en una pantalla pequeña y a menudo con una sola mano. Lo cómodo en el ordenador se vuelve diminuto, apretado y confuso en el teléfono. Además, Google indexa los sitios por su versión móvil, así que de ella dependen la búsqueda y las ventas.
10 reglas con ejemplos
1. Haz botones grandes
Se pulsa con el dedo, no con el cursor. Apple recomienda un área de al menos 44 × 44 pt, Android 48 × 48 dp, y el estándar de accesibilidad WCAG 2.2 fija un mínimo de 24 × 24 px.
2. Agranda la letra
Lo que se ve bien en el ordenador no se lee en el móvil. El texto principal suele ir a 16 px o más para no tener que ampliar; Lighthouse de Google marcaba las páginas con más del 40 % del texto por debajo de 12 px.
3. Cuida los márgenes
Con los bloques pegados, la pantalla se ve recargada y barata. Hace falta más aire del que parece.
4. Pon los botones uno debajo de otro
Dos botones en fila quedan estrechos en el móvil. A todo el ancho y apilados se pulsan mejor y hay menos toques por error.
5. Muestra que se puede deslizar
Si las tarjetas se deslizan, debe notarse: el borde de la siguiente tarjeta, puntos o flechas indican que hay más.
6. Reduce el menú
La cabecera no debe ocupar media pantalla. Una cabecera compacta con logo y botón de menú deja sitio a lo importante.
7. Oculta lo secundario
En el móvil no hace falta mostrarlo todo: acordeones, pestañas y «ver más» limpian la página. Ocúltalo, no lo borres: Google indexa la versión móvil y el contenido debe ser el mismo que en ordenador.
8. Haz los contactos pulsables
Teléfono y correo deben abrirse con un toque: para eso están los enlaces tel: y mailto:. Un botón «Llamar» es aún más sencillo.
9. No sobrecargues la primera pantalla
Arriba hay poco espacio: un titular, una explicación breve y una acción principal. Banners, descuentos y suscripciones, más abajo.
10. No copies el escritorio tal cual
La versión móvil no es una web más pequeña. Los bloques se reordenan, tres columnas pasan a una y se quita lo que sobra.
Metriverra muestra cómo convierten los visitantes desde móvil y desde ordenador, así compruebas fácilmente si las mejoras móviles trajeron ventas.
En resumen
- Botones desde 44 × 44 pt (Apple) o 48 × 48 dp (Android); mínimo WCAG 24 × 24 px.
- Texto principal desde 16 px, con márgenes entre bloques.
- Botones a todo el ancho y apilados; contactos pulsables.
- Primera pantalla: una acción principal; lo secundario en acordeones.
- El móvil es una reconstrucción, no una web encogida; mismo contenido que en ordenador.
Fuentes: Apple — Human Interface Guidelines: Accessibility · Android Developers — Make apps more accessible · W3C — WCAG 2.2: Target Size (Minimum) · Chrome for Developers — Lighthouse: legible font sizes · MDN — The Anchor element · Google Search Central — Mobile-first indexing
