La mayor parte del tráfico de cualquier sitio hoy viene del celular. Aun así, es común encontrar sitios que cargan rápido, sacan buena nota en un test de velocidad, y aun así alejan a quien los visita desde el celular. Velocidad y usabilidad son cosas distintas, y un sitio puede tener una sin tener la otra.
Los problemas más comunes de responsividad
Texto demasiado pequeño para leer sin hacer zoom
Diseño pensado solo para pantalla de computadora, con una tipografía que queda minúscula cuando el sitio simplemente se encoge para entrar en el celular, sin reorganizar el contenido de verdad.
✓ Define tamaños de fuente específicos para pantallas chicas, no solo una versión "reducida" de la versión de escritorio.Botones pegados uno al otro
Un área de toque pequeña hace que el dedo falle el objetivo con frecuencia, sobre todo en menús y formularios. Es frustración que se acumula en cada intento.
✓ Garantiza un espacio mínimo cómodo entre elementos clicables, pensando en dedo, no en cursor de mouse.Un menú que no cierra, o cubre toda la pantalla sin una salida clara
El usuario abre el menú, no encuentra cómo cerrarlo, o el menú cubre todo el contenido sin una "X" visible. El camino más simple del sitio se vuelve el más confuso.
✓ Prueba la apertura y el cierre del menú en un celular de verdad, no solo redimensionando el navegador.Imágenes cortadas o fuera de proporción
Una foto pensada para una pantalla ancha queda cortada de forma extraña, o distorsionada, cuando el sitio no ajusta correctamente la proporción para la pantalla vertical.
✓ Usa imágenes con proporciones pensadas específicamente para mobile, no solo la misma imagen de escritorio redimensionada.Formulario más ancho que la pantalla
Un campo de formulario que supera el ancho de la pantalla obliga al usuario a desplazarse hacia los costados, algo que la mayoría simplemente no hace. Es un lead perdido en silencio.
✓ Confirma que todo campo de formulario se ajusta al ancho de la pantalla, sin desplazamiento horizontal.Por qué redimensionar el navegador no es suficiente
Arrastrar el borde del navegador para simular un celular es útil, pero no reemplaza la prueba real. Toque de dedo, teclado del celular abriéndose sobre el contenido, orientación de la pantalla: nada de eso aparece bien en una simulación de escritorio.
Prueba rápida: toma tu propio celular ahora y navega por el sitio como si fuera la primera vez que lo visitas. Intenta leer cada texto sin hacer zoom, tocar cada botón sin fallar, y completar el formulario hasta el final. Cualquier traba en ese proceso es la misma traba que sienten tus clientes reales.
Qué revisar en tu sitio ahora
- ¿Todo el texto es legible sin necesidad de hacer zoom?
- ¿Cada botón es fácil de tocar sin fallar el objetivo de al lado?
- ¿El menú abre y cierra de forma obvia?
- ¿Ninguna parte del sitio exige desplazamiento horizontal?
- ¿El formulario es cómodo de completar con el teclado del celular?
Un sitio rápido que es incómodo de usar en el celular pierde clientes igual que uno lento. La diferencia es que nadie nota el problema en el PageSpeed.
Preguntas frecuentes
Mi sitio es rápido, ¿eso ya garantiza una buena experiencia en el celular?
No. Velocidad y usabilidad son cosas distintas: un sitio puede cargar rápido y aun así ser difícil de usar en el celular.
¿Redimensionar el navegador es suficiente para probar la responsividad?
No del todo. Es útil, pero no reemplaza probar en un celular de verdad, con toque de dedo y teclado real.
¿Cuáles son los errores más comunes de un sitio no responsive?
Texto demasiado pequeño, botones pegados uno al otro, un menú que no cierra bien y un formulario más ancho que la pantalla.