La mayoría de tus visitas entran desde el móvil. Y tu web «funciona» en móvil, en el sentido de que carga y se ve algo. Pero que cargue no es que funcione. Si para leer hay que hacer zoom, si los botones son tan pequeños que aciertas uno de cada tres, o si tarda una eternidad, esa web no está pensada para móvil, está encogida para móvil. Y la diferencia entre las dos cosas es la mitad de tus clientes. Vamos a ver qué es el responsive de verdad y cómo saber si la tuya lo es.
Responsive no es que tu web quepa en el móvil. Es que en el móvil se use igual de bien que en el ordenador. Encoger no es adaptar.
Qué es el diseño responsive, y qué no es
El diseño responsive es el que hace que una web se adapte al dispositivo desde el que la miras, para que se vea y se use bien tanto en un ordenador grande como en un móvil pequeño. Hasta ahí la definición de manual. El problema es que mucha gente la entiende mal y cree que responsive es simplemente que la web «quepa» en la pantalla del móvil.
Que quepa es lo mínimo, y lo hace casi cualquier plantilla. Responsive de verdad es otra cosa: que la web reorganice su contenido, su jerarquía y su forma de interactuar según el dispositivo. En un ordenador, con ratón y pantalla ancha, las cosas se colocan de una manera. En un móvil, con el dedo y una pantalla estrecha en vertical, tienen que colocarse de otra, no solo más pequeñas, sino reordenadas para que lo importante siga arriba y se pueda tocar con comodidad.
La prueba está en cómo se siente. Una web responsive de verdad, en el móvil, no parece una versión reducida de la de escritorio, parece una web pensada para el móvil. Los textos se leen sin zoom, los botones se pulsan sin precisión de cirujano, el menú se adapta, y el camino hasta lo que buscas es directo. Una web solo «encogida» te obliga a pellizcar, arrastrar y apuntar con cuidado. Las dos caben en la pantalla. Solo una se usa bien.
Señales de que tu web no se pensó para móvil
¿Cómo saber si tu web es responsive de verdad o solo está encogida? Hay señales claras que delatan que nadie pensó en el móvil al hacerla. Cógela ahora mismo en tu teléfono y mira.
Si tienes que hacer zoom para leer, mal. El texto debe leerse a tamaño cómodo sin pellizcar la pantalla. Si aparece una barra de desplazamiento horizontal, peor: algo se sale del ancho de la pantalla y eso no debería pasar nunca en una web bien adaptada. Si los botones o los enlaces son tan pequeños que fallas al tocarlos o pulsas el de al lado, no se pensaron para un dedo, se pensaron para un ratón.
Si la web tarda mucho en cargar en el móvil con datos, estás perdiendo a quien no tiene paciencia, que es casi todo el mundo. Si el menú es incómodo o hay que buscar cómo navegar, la estructura no se adaptó. Y si información importante queda escondida o aparece al final del todo porque «no cabía», la jerarquía se rompió al pasar a móvil.
Cualquiera de estas señales, sola, ya cuesta clientes. Juntas, son una web que en el móvil rema en tu contra justo donde está la mayoría de tu tráfico. Y lo peor es que no lo ves, porque tú tu web la revisas en el ordenador, donde se ve bien. El cliente la ve en el móvil, donde se ve regular.
La jerarquía y el pulgar, diseñar para cómo se usa el móvil
Diseñar para móvil de verdad significa diseñar para cómo se usa un móvil, que no es como se usa un ordenador. Dos cosas cambian todo: que se navega con el dedo y que la pantalla es estrecha y vertical.
Lo del dedo tiene consecuencias concretas. Un dedo es mucho menos preciso que un cursor, así que los botones y enlaces tienen que ser lo bastante grandes para tocarlos sin fallar, con espacio suficiente alrededor para no pulsar el de al lado. Hay una medida de referencia para esto, en torno a los 44 píxeles de zona táctil, por debajo de la cual tocar se vuelve frustrante. Una web con botones diminutos pegados entre sí está diseñada para ratón, no para pulgar.
Lo de la pantalla estrecha y vertical afecta a la jerarquía. En un móvil, el contenido se apila en una sola columna, así que el orden importa muchísimo: lo primero que ve el usuario es lo que pongas arriba, y casi nadie baja hasta el final. Diseñar para móvil obliga a decidir qué es lo más importante y ponerlo lo primero, porque no hay laterales ni espacio para meterlo todo «a la vista». Esa disciplina, decidir qué va primero, suele mejorar la web también en el ordenador.
Pensar en el pulgar y en la columna vertical es lo que separa una web cómoda en móvil de una que técnicamente «se adapta» pero pelea contra cómo la gente la usa de verdad. Lo desarrollamos al hablar de diseño web para empresas, porque una web que no se usa bien en móvil no capta, por bonita que sea en pantalla grande.
En móvil, la velocidad es conversión
Hay una parte del responsive que no se ve pero se nota muchísimo: la velocidad. En móvil, a menudo con peor conexión que en casa o la oficina, una web lenta no es una molestia, es una fuga de clientes. La gente abandona una web que tarda en cargar antes incluso de verla, y en móvil esa paciencia es aún más corta.
Por eso el diseño responsive de verdad incluye el rendimiento, no solo la apariencia. Una web puede adaptarse perfectamente al móvil y aun así cargar lenta porque pesa demasiado, tiene imágenes sin optimizar o demasiados elementos. Y una web lenta en móvil pierde visitas y ventas de forma silenciosa, sin que veas a quién pierdes. Las métricas que Google usa para medir esta experiencia, las de velocidad y estabilidad, pesan especialmente en móvil, así que una web lenta ahí rinde peor también en posicionamiento.
Cómo leer esas métricas y qué arreglar primero lo contamos en qué dice de verdad PageSpeed Insights. Lo importante aquí es la idea: en móvil, la velocidad no es un tecnicismo, es directamente cuánta gente se queda o se va. Una web responsive que va lenta solo está medio resuelta, porque se adapta bien pero llega tarde.
Compruébalo tú mismo en cinco minutos
No hace falta ser técnico para saber si tu web está bien en móvil. Dedica cinco minutos a estas comprobaciones y tendrás una idea bastante clara.
Primero, ábrela en tu móvil con datos, no con wifi, para ver la velocidad real que sufre tu cliente. ¿Carga rápido o te aburres esperando? Segundo, léela sin hacer zoom. ¿Se entiende el texto a tamaño normal o tienes que pellizcar? Tercero, intenta pulsar los botones y enlaces principales con el pulgar. ¿Aciertas a la primera o fallas? Cuarto, comprueba que no haya que arrastrar de lado, que nada se salga del ancho de la pantalla. Y quinto, haz el recorrido de un cliente: entra, busca lo que ofreces, intenta contactar o comprar. ¿Es directo o un suplicio?
Como apoyo, Google tiene una prueba de optimización para móviles donde metes tu web y te dice si la considera bien adaptada. Y un fallo técnico muy común que delata una web descuidada es que le falte la etiqueta que le dice al móvil cómo mostrarse, lo que hace que la web salga diminuta como si fuera de escritorio; eso es señal de que ni lo básico se cuidó.
Si tu web suspende varias de estas pruebas, no es responsive de verdad, está encogida, y estás perdiendo a la mayoría de tus visitantes sin saberlo.
Mobile-first, por qué se diseña primero el móvil
La forma seria de hacer una web hoy es al revés de como se hacía antes: primero el móvil, luego el ordenador. Es lo que se llama mobile-first, y aunque suene a tecnicismo, la idea es muy sensata.
Antes se diseñaba para pantalla grande y luego se «encogía» para móvil, y por eso tantas webs van mal en el teléfono: el móvil era una ocurrencia tardía. Mobile-first le da la vuelta: se diseña primero la versión móvil, la más restrictiva, donde hay que decidir qué es de verdad importante porque no cabe todo, y luego se amplía para el ordenador, donde sobra sitio. El resultado es una web que funciona genial en el móvil, que es donde está la mayoría, y también bien en escritorio.
Tiene sentido por dos razones. Una, porque la mayoría del tráfico es móvil, así que diseñar primero para donde está la gente es lo lógico. Y dos, porque la disciplina de empezar por lo estrecho obliga a priorizar, a quedarse con lo esencial, y eso mejora la web entera. Una web pensada mobile-first rara vez tiene los problemas de la lista de antes, porque nació resolviendo el caso difícil. Es una de las decisiones que conviene tomar antes de empezar, como vemos en qué decidir antes de crear una web.
Preguntas frecuentes
¿Cómo sé si mi web es responsive? Ábrela en tu móvil con datos y comprueba cinco cosas: que el texto se lea sin zoom, que no haya que arrastrar de lado, que los botones se pulsen sin fallar, que cargue rápido y que llegar a lo importante sea directo. También puedes usar la prueba de optimización para móviles de Google. Si suspende varias, no es responsive de verdad, solo está encogida.
¿Por qué mi web se ve mal en móvil? Las causas habituales son que se diseñó para escritorio y se «encogió» sin adaptar la jerarquía, que le falta la configuración básica para mostrarse bien en móvil, que tiene elementos que se salen del ancho, o que pesa demasiado y va lenta. En el fondo, casi siempre es que el móvil fue una ocurrencia tardía y no el punto de partida del diseño.
¿Qué diferencia hay entre responsive y mobile-first? Responsive es que la web se adapte a cualquier pantalla. Mobile-first es un método para conseguirlo: diseñar primero la versión móvil y luego ampliarla a escritorio, en lugar de al revés. Toda web mobile-first es responsive, pero no toda web responsive se hizo pensando primero en el móvil, y eso se nota en lo bien que funciona en el teléfono.
¿El diseño responsive afecta al SEO? Sí, y bastante. Google se fija sobre todo en la versión móvil de tu web para posicionarla, y penaliza las webs que van mal en móvil o cargan lento ahí. Una web bien adaptada y rápida en móvil parte con ventaja, y una que va mal en el teléfono pierde posiciones además de clientes. El responsive no es solo experiencia, es también visibilidad.
¿Con qué herramientas pruebo mi web en móvil? La más sencilla es tu propio móvil, con datos para notar la velocidad real. Google ofrece una prueba de optimización para móviles. Los navegadores de escritorio tienen un modo que simula distintos tamaños de pantalla. Y para la velocidad, las herramientas de rendimiento te dan la nota en móvil aparte de la de escritorio, que suele ser más exigente y más realista.
¿Hace falta una web aparte para móvil? No. Esa era la forma antigua de hacerlo, tener una web de escritorio y otra «.móvil» separada, y daba muchos problemas de mantenimiento y SEO. Hoy lo correcto es una sola web responsive que se adapta a todos los dispositivos. Mantener dos webs distintas es más trabajo, más caro y peor para el posicionamiento. Una web, bien adaptada, para todo.
Qué hacer si tu web no funciona en móvil
Haz ahora mismo las cinco comprobaciones en tu teléfono. Si tu web suspende varias, tienes una fuga de clientes en el sitio donde está la mayoría de tu tráfico, y conviene resolverla antes que casi cualquier otra cosa. A veces se arregla con ajustes; a veces, si la base es mala, compensa rehacerla bien.
Si quieres una web pensada para móvil de verdad desde el primer trazo, que se use igual de bien en el teléfono que en el ordenador y cargue rápido donde más importa, eso es lo que hacemos en diseño web. Empezamos por el móvil, porque ahí es donde está tu cliente.