Diseño web responsive significa que el sitio se reacomoda solo según el tamaño de la pantalla: en el teléfono todo se apila en una columna, en la computadora se reparte en varias. No es una versión aparte del sitio; es el mismo sitio comportándose distinto.
La razón por la que importa: entre el 55 % y el 75 % de las visitas de un negocio de servicios llegan desde un teléfono, y en muchos giros locales es más. Si el sitio se ve mal ahí, se ve mal para la mayoría.
Cómo comprobarlo en dos minutos
Sin herramientas:
- Abre tu sitio en tu teléfono con datos móviles, no con wifi. Cuenta los segundos hasta que puedas leer algo. Si pasan de tres, ya perdiste gente.
- ¿Tienes que hacer zoom para leer? Mal.
- ¿Se puede deslizar la página hacia los lados? Mal: algo se sale del ancho.
- ¿Los botones se pueden tocar con el pulgar sin miedo a errarle? Deben medir al menos 44 píxeles de alto.
- ¿El teléfono y el WhatsApp están visibles sin bajar la pantalla?
Esos cinco puntos detectan casi todos los problemas reales.
Adaptable no es lo mismo que usable
Un sitio puede ser técnicamente diseño web adaptable y seguir siendo incómodo. Los casos que veo más seguido:
- El menú que se come la pantalla. Se abre y ocupa todo, sin forma clara de cerrarlo.
- Tablas anchas. Una tabla de precios de cinco columnas en un teléfono es ilegible. En móvil se convierte en tarjetas apiladas.
- Imágenes pesadas. La foto de 4 MB se descarga igual aunque se muestre pequeña. Es el motivo número uno de lentitud.
- Formularios largos. Siete campos con el teclado abierto en una pantalla de seis pulgadas es donde la gente abandona.
- Ventanas emergentes que aparecen a los dos segundos y cuya X mide tres píxeles.
- Texto de 12 píxeles. En el teléfono, 16 es el mínimo cómodo.
Móvil primero, y no es una frase de moda
Diseñar primero para la pantalla chica obliga a decidir qué es lo importante, porque no cabe todo. Luego, al agrandar, se añade lo que sobra de espacio.
Al revés —diseñar en computadora y después «adaptar»— siempre termina igual: el sitio de escritorio se ve bien y el del teléfono es una versión apretada del mismo, con las cosas importantes enterradas abajo.
Qué mira Google
Google indexa la versión móvil de tu sitio. La de escritorio, para posicionamiento, casi no existe. Y desde hace años la velocidad y la estabilidad visual en el teléfono —que el contenido no salte mientras carga— son factores de posicionamiento medidos con datos de usuarios reales.
Dicho de otro modo: un sitio lento en móvil no solo convierte peor, además aparece más abajo.
Qué arreglar primero si tu sitio ya existe
Por orden de impacto:
- Comprime las imágenes. Es el arreglo más barato y el que más se nota.
- Sube el tamaño del texto a 16 píxeles mínimo.
- Pon el WhatsApp y el teléfono fijos en la parte inferior de la pantalla del teléfono.
- Recorta el formulario a tres campos.
- Quita la ventana emergente de los dos segundos, o retrásala.
Los cinco se pueden hacer sin rehacer el sitio. Si después de eso sigue lento, el problema es la base —una plantilla pesada o demasiados plugins— y ahí ya se trata de decidir entre parchear o rehacer.
Los sitios que entrego se construyen primero para el teléfono, con imágenes en AVIF y WebP y sin plugins acumulados. Aquí está cómo, y si lo que necesitas es saber qué está frenando el que ya tienes, eso es la Auditoría Digital.