Un sitio puede verse prolijo en una computadora y volverse difícil de usar en un celular: el texto queda diminuto, los botones se tocan por error o un formulario exige demasiados datos. Por eso, comprobar la versión móvil no consiste únicamente en achicar la ventana del navegador. Hay que verificar que una persona pueda encontrar información y completar sus tareas con una pantalla táctil, distintas condiciones de conexión y diferentes niveles de zoom.
Esta guía sirve tanto antes de publicar un sitio como al revisar uno que ya está online. No reemplaza una auditoría técnica o de accesibilidad, pero ayuda a encontrar problemas evidentes y ordenar qué conviene corregir primero.
Primero, definí qué debería poder hacer alguien desde el celular
Antes de probar, anotá las tareas principales que el sitio debe facilitar. Por ejemplo: entender qué ofrece el negocio, consultar horarios, pedir un presupuesto, ubicar una sucursal o leer una guía. El diseño móvil debería permitir llegar a esas respuestas sin pasos innecesarios.
Elegí de tres a cinco tareas relevantes y probalas de principio a fin. Si el objetivo central es recibir consultas, no alcanza con que la página de inicio se vea bien: también hay que completar y enviar el formulario, confirmar que aparece un mensaje claro y comprobar qué sucede después.
Checklist para revisar la experiencia móvil
- Lectura: el texto se entiende sin ampliar la pantalla y los párrafos no forman bloques difíciles de recorrer.
- Diseño: no hace falta desplazarse horizontalmente para leer el contenido principal o usar los controles.
- Navegación: es sencillo identificar el menú, volver a una sección y encontrar las páginas importantes.
- Acciones: botones y enlaces se distinguen, tienen etiquetas claras y no quedan pegados entre sí.
- Formularios: cada campo tiene una etiqueta comprensible, indica errores de forma útil y puede completarse con el teclado del teléfono.
- Contenido: títulos, información esencial, enlaces y datos de contacto están disponibles en móvil; no se ocultan elementos necesarios para la tarea.
- Imágenes: se ven correctamente, no se salen de su espacio y no hacen que la página tarde innecesariamente en mostrarse.
- Zoom y orientación: el contenido sigue siendo utilizable al ampliar el texto y al girar el dispositivo.
El diseño adaptable permite reorganizar los elementos para diferentes espacios, pero no garantiza por sí solo que todas las tareas sean sencillas. Google explica que el diseño responsive puede mostrar el mismo código en una URL y adaptar su presentación; también recomienda que el contenido móvil permita acceder a la información que se quiere indexar. Consultá las buenas prácticas de Google para sitios móviles e indexación.
Probalo de forma ordenada
- Usá un teléfono real. La vista adaptable del navegador es útil, pero no sustituye la prueba con pantalla táctil, teclado móvil y condiciones de uso reales.
- Revisá varias páginas. Elegí una página de servicio o producto, una página con mucho texto y una página con formulario. Los problemas pueden aparecer en componentes distintos.
- Completá tareas, no solo mires el diseño. Intentá encontrar el contacto, abrir el menú, seleccionar opciones y enviar el formulario.
- Probá distintos anchos y orientación. Revisá al menos un teléfono angosto y uno más amplio, en vertical y horizontal. No diseñes únicamente para un modelo específico.
- Repetí la prueba con zoom. Aumentá el tamaño del contenido y comprobá que no desaparezcan controles ni se rompa el orden de lectura.
- Anotá cada obstáculo. Registrá la página, qué intentabas hacer, qué pasó y una captura si ayuda a explicarlo.
Si no contás con varios equipos, combiná un teléfono disponible con herramientas de simulación del navegador. Estas sirven para encontrar desbordes y cambios de distribución, pero conviene confirmar los problemas importantes en un dispositivo físico.
Accesibilidad y uso táctil: detalles que cambian la experiencia
Un diseño adaptable también puede beneficiar a personas que amplían el contenido o usan tecnologías de asistencia. La guía de web.dev sobre diseño adaptable accesible recomienda permitir el zoom, usar estructuras flexibles y cuidar que el orden visual no contradiga el orden de navegación por teclado.
En la práctica, verificá que los enlaces no se distingan solo por el color, que los campos tengan etiquetas visibles y que el foco del teclado se pueda seguir. En pantallas táctiles, comprobá que los controles sean cómodos de activar sin pulsar accidentalmente el elemento vecino. La guía de fundamentos del diseño web adaptable explica que hay que considerar tanto el tamaño de pantalla como las formas de interacción.
Una buena prueba móvil no pregunta si la página entra en la pantalla: pregunta si la persona puede terminar lo que vino a hacer.
Qué corregir primero y cómo decidir si alcanza
Priorizá los problemas que bloquean una tarea esencial: un botón que no responde, un formulario que no se puede enviar o un contenido importante que queda fuera de pantalla. Después, resolvé los obstáculos frecuentes de lectura y navegación; por último, afiná detalles visuales que no impiden el uso.
Tras cada cambio, repetí la tarea completa en el teléfono. No des por resuelto un problema solo porque el diseño se ve mejor en una captura. Si una modificación en el menú afecta otras páginas, probá también esos lugares.
Próximo paso: elegí una tarea clave de tu sitio, completala desde un celular y anotá el primer punto donde dudaste, te equivocaste o tuviste que ampliar la pantalla. Corregí ese obstáculo y volvé a probar. Si estás por construir o renovar un sitio y necesitás apoyo para definir y desarrollar la experiencia, podés conocer el servicio de sitios web y planes web de Ideasweb.
