Diseño web responsive: revisa si tu página sirve en celular

Un sábado en la mañana, la dueña de una mueblería en Coyoacán le pasa a su hermano el enlace de su página para que le dé su opinión. Él la abre en el celular mientras espera en el súper. El menú tapa media pantalla, los precios vienen en una tabla que se corta a la derecha, el texto es tan chico que tiene que hacer zoom con dos dedos y, cuando por fin encuentra el botón de "Cotizar", le pica sin querer al de "Facebook" que está pegado. Le contesta: "Se ve bien en la compu, ¿no?". Ella nunca la había visto en un teléfono.

El diseño web responsive es justo lo que le faltaba a esa página: que el sitio se reorganice solo para verse y usarse bien en cualquier pantalla, desde un celular chico hasta un monitor grande. No se trata de que "quepa", sino de que en el celular se pueda leer sin zoom, tocar sin equivocarse y contactarte en dos movimientos.

En términos de negocio, el diseño web responsive decide si quien llegó desde Google, un anuncio o WhatsApp te escribe o se va con otro. Aquí vemos qué es, cómo revisar tu sitio tú mismo y los errores más comunes, con una tabla de síntoma y arreglo.

Qué es el diseño web responsive, en términos de negocio

Una página responsive es una sola página que cambia su acomodo según el tamaño de la pantalla. En computadora puede mostrar tres columnas de servicios lado a lado; en el celular, esas mismas tres tarjetas se apilan una debajo de otra. El menú se vuelve un botón, las imágenes se ajustan al ancho y los botones crecen para que se puedan tocar con el dedo.

Para ti, como dueño, lo importante no es la técnica sino tres resultados:

• Se lee sin zoom. Si el cliente tiene que pellizcar la pantalla para leer, ya perdiste parte de su paciencia.
• Se toca sin errores. Botones grandes y separados, menús que abren y cierran sin pelear.
• Se contacta rápido. El botón de WhatsApp o de llamada está a la mano en todo momento, no escondido al final.

Una página puede acomodarse y aun así ser incómoda. Por eso hay que revisarla con criterio de cliente.

Por qué casi todos tus clientes te ven en el celular

No necesitas una estadística para comprobarlo: revisa cómo buscas tú un restaurante, un plomero o un dentista. Lo haces desde el teléfono, muchas veces con prisa y con una sola mano. Tus clientes hacen lo mismo. Y si les mandas tu página por WhatsApp, la abren en el mismo teléfono donde recibieron el mensaje.

Si quieres el dato de tu propio negocio, Google Analytics te dice qué proporción de tus visitas llega desde celular, computadora o tableta. En negocios que venden a otras empresas la mezcla puede ser más pareja, pero en los que atienden a consumidores el celular suele dominar. Si todavía no mides eso, en Google Analytics para tu página web explicamos qué configurar.

Hay otra razón: Google usa principalmente la versión para celular de tu página para decidir cómo mostrarla en los resultados. Si en el celular faltan textos, se ven mal o cargan lento, eso pesa en cómo te encuentran, también para quien busca desde la computadora.

Cómo revisar tu página tú mismo, en un celular real

Los simuladores de pantalla que traen los navegadores de computadora ayudan, pero no sustituyen a un teléfono de verdad, con tus dedos y tu señal de datos. Haz esta prueba con calma, de preferencia en dos celulares distintos (uno tuyo y uno más sencillo o más viejo de alguien de tu equipo):

1. Abre la página con datos móviles, no con el wifi de la oficina. Cuenta cuánto tarda en mostrar algo útil. Si te desesperas, tu cliente también.
2. Lee la primera pantalla sin bajar. ¿Se entiende qué haces, dónde y cómo te contacto? ¿Hay un botón visible?
3. Lee un párrafo completo sin hacer zoom. Si entrecierras los ojos o acercas el teléfono, el texto es muy chico o tiene poco contraste.
4. Toca cada botón importante con el pulgar. WhatsApp, llamar, cotizar, menú. Si le atinas al de al lado, están muy juntos o son muy pequeños.
5. Abre y cierra el menú. ¿Se ven todas las secciones? ¿Se cierra fácil? ¿Tapa el contenido sin forma de salir?
6. Desliza de lado. Si la página se mueve a la derecha y aparece una franja en blanco, algo se está saliendo del ancho.
7. Llena el formulario completo. ¿Aparece el teclado numérico en el campo de teléfono? ¿Los campos se ven mientras escribes o los tapa el teclado? ¿Llegó el mensaje?
8. Toca el botón de WhatsApp. ¿Abre la aplicación con un mensaje inicial? ¿Es el número correcto?
9. Revisa con el brillo bajo. Textos grises claros sobre fondo blanco desaparecen en exteriores.

Anota cada falla con una captura de pantalla. Esa lista es lo que le entregas a tu proveedor para que lo corrija.

Errores típicos que vemos en páginas que "sí son responsive"

Texto pequeño o con poco contraste

Muchos diseños se aprueban en un monitor grande, donde un texto gris claro de tamaño chico se ve elegante. En el celular, a pleno sol, no se lee. Como referencia general, el texto de párrafos debería leerse cómodo sin zoom, y el contraste entre letra y fondo tiene que ser claro, no sutil.

Botones juntos o diminutos

Íconos de redes pegados entre sí, enlaces del menú con poco espacio, una "X" de cerrar del tamaño de una lenteja. Las guías de diseño de Apple y Google recomiendan áreas táctiles de alrededor de 44 a 48 píxeles, más o menos la yema de un dedo. Menos que eso genera toques equivocados.

Pop-ups que tapan todo

Boletín, aviso de cookies enorme, chat que se abre solo y promoción, todo en los primeros segundos. En celular bloquean la pantalla completa. Si usas una ventana emergente, que sea una, que no aparezca de inmediato y que se cierre con un botón grande. Google también ha señalado que las ventanas que tapan el contenido en celular afectan la experiencia que evalúa.

Tablas que se salen de la pantalla

Listas de precios, horarios o comparativos en tablas de cinco columnas. En el celular se cortan o empujan toda la página hacia un lado. Hay que convertirlas en tarjetas apiladas, reducir columnas o permitir que solo la tabla se deslice de lado con una señal clara.

Imágenes pesadas o recortadas

La foto de portada que en computadora muestra a tu equipo completo, en celular se recorta y deja ver solo un hombro. O una imagen de varios megas que tarda en cargar con datos. Cada imagen importante debe revisarse en vertical y comprimirse; lo detallamos en por qué la velocidad de tu página web te está costando clientes.

El botón de contacto al final de todo

En computadora el teléfono está en el encabezado. En celular, ese encabezado se colapsa y el contacto queda en el pie de página, después de diez pantallas. Un botón fijo de WhatsApp o llamada resuelve esto; hay recomendaciones concretas en botón de WhatsApp en tu página web.

Tabla de síntomas y arreglos

Usa esta tabla con la lista de fallas que anotaste en la prueba con tu celular.

Responsive no es lo mismo que pensado para celular

Una página que se adapta toma el diseño de computadora y lo "aprieta". Una pensada primero para el teléfono parte de otra pregunta: ¿qué necesita ver y hacer alguien que me encuentra desde el celular, con prisa? Eso cambia decisiones concretas:

• Qué va primero. En una pantalla chica no caben cinco mensajes arriba. Hay que elegir uno y un botón.
• Cómo se contacta. Tocar para llamar o abrir WhatsApp es más natural que llenar un formulario largo. Si lo necesitas, que sea corto; hay ideas en formulario de contacto para página web.
• Qué se quita. Carruseles, animaciones de entrada y videos automáticos suelen estorbar en el teléfono.

Si tu página tiene varios años y los arreglos ya son parches sobre parches, puede convenir rehacerla. Para decidirlo, revisa rediseño de página web.

Preguntas frecuentes

¿Cómo sé si mi página es responsive?

Ábrela en tu celular y en tu computadora y compara. Si en el celular el contenido se reacomoda en una sola columna, el menú se convierte en un botón y no tienes que hacer zoom ni deslizar de lado, es responsive. Si ves la versión de computadora en miniatura, no lo es.

¿Una página que no es responsive se puede arreglar o hay que hacerla nueva?

Depende de cómo esté construida. Si usa una plataforma o plantilla moderna, muchas fallas se corrigen ajustando estilos y contenido. Si es un sitio viejo, hecho con tablas o con un constructor que ya no se actualiza, suele salir más barato y rápido rehacerlo que parcharlo.

¿Afecta el diseño responsive a mi posición en Google?

Sí, de forma indirecta y directa. Google toma como referencia principal la versión para celular de tu página, y una mala experiencia en el teléfono hace que la gente se salga rápido. Una página responsive no te garantiza el primer lugar, pero una que falla en celular sí te pone en desventaja.

¿Las plantillas de Wix o WordPress ya son responsive?

La mayoría de las plantillas actuales lo son de origen. El problema suele aparecer después, cuando se agregan tablas, imágenes, textos largos o complementos que no se revisaron en celular. Por eso la prueba con un teléfono real es necesaria aunque la plantilla diga que es responsive.

Por dónde empezar

1. Haz hoy la prueba de nueve pasos en tu celular, con datos móviles, y toma capturas de cada falla.
2. Pídele a alguien de tu equipo que haga lo mismo en un teléfono más sencillo.
3. Ordena las fallas con la tabla de síntomas: primero las que impiden contactarte, después las de lectura y al final las estéticas.
4. Revisa en Analytics qué parte de tus visitas llega desde celular para dimensionar el problema.
5. Decide con tu proveedor si se corrige o si conviene un rediseño.

Si prefieres resolverlo con nosotros, en Emproyecta hacemos diseño de páginas web en CDMX pensado primero para el celular, con WhatsApp y formularios conectados para que cada contacto llegue a quien debe contestarlo.