Hace ya muchos años que hablar de una web responsive dejó de ser algo opcional. Sin embargo, sigo encontrándome con muchísimas páginas que presumen de estar adaptadas a dispositivos móviles cuando, en realidad, únicamente consiguen que el contenido «quepa» en la pantalla. Y eso está muy lejos de lo que significa ofrecer una buena experiencia de usuario.
Una web responsive es aquella que se adapta de forma inteligente a cualquier dispositivo, independientemente de su tamaño de pantalla o de la forma en que el usuario interactúe con ella. No se trata únicamente de reorganizar los elementos para que entren dentro del ancho del móvil, sino de conseguir que navegar resulte cómodo, que los textos sean fáciles de leer, que los botones puedan pulsarse sin dificultad y que la página mantenga la misma calidad tanto en un monitor de 27 pulgadas como en un teléfono de seis.
Además, hoy la mayor parte del tráfico web llega desde dispositivos móviles. En muchos proyectos que analizo, más del 70 % de las visitas provienen de teléfonos. Esto significa que la versión móvil ya no es una versión secundaria: para la mayoría de usuarios es la única que van a conocer. Si esa experiencia falla, probablemente abandonarán la página antes incluso de descubrir lo que ofreces.
Por eso, cuando alguien me dice que su web es responsive, siempre pienso lo mismo: depende. Porque una web responsive no se define por tener una versión para móvil, sino por la calidad de esa adaptación. Y hay varios errores que sigo viendo una y otra vez.
No tienes una web responsive si necesitas hacer ajustes para cada tamaño de pantalla
Uno de los indicadores más claros de que un diseño no está bien planteado aparece cuando abro la hoja de estilos y encuentro una interminable lista de ajustes para cada tamaño de pantalla: una para 1600 píxeles, otra para 1400, otra para 1200, otra para 1100, otra para 900… y así sucesivamente.
Normalmente esto ocurre porque el diseño se ha construido con elementos demasiado rígidos. En lugar de utilizar contenedores flexibles, sistemas como Flexbox o CSS Grid y medidas relativas, se intenta corregir cada pequeño problema creando una excepción nueva. El resultado es un código difícil de mantener y una página que acaba dependiendo de decenas de pequeños parches.
En la mayoría de proyectos que desarrollo suelo trabajar únicamente con tres grandes puntos de ruptura: escritorio, tablet y móvil. A partir de ahí, el propio diseño se adapta prácticamente solo. Evidentemente puede haber casos concretos en los que sea necesario añadir alguna media query adicional, pero cuando necesitas diez o quince para que todo funcione, el problema casi nunca está en el CSS, sino en la estructura sobre la que se ha construido la página.
Una web responsive bien diseñada debe ser flexible desde el principio, no ir sobreviviendo gracias a pequeñas correcciones.
No es una web responsive si pulsar un botón desde el móvil resulta complicado
Este es uno de esos detalles que muchas veces pasan desapercibidos durante el desarrollo porque solemos probar las páginas con el ratón del ordenador. Sin embargo, la diferencia entre un cursor y un dedo es enorme.
Cuando un usuario navega desde el móvil necesita poder pulsar un botón o un enlace sin tener que apuntar con precisión milimétrica. Si los enlaces están demasiado juntos, los botones son pequeños o las zonas clicables apenas ocupan unos pocos píxeles, la navegación se vuelve frustrante muy rápidamente.
Es bastante habitual encontrar menús donde los enlaces prácticamente se tocan entre sí o formularios en los que resulta complicado seleccionar un campo sin pulsar el siguiente por error. Y qué decir de cuando un usuario intenta hacer scroll vertical pero cada vez que lo intenta sólo consigue pulsar enlaces y acaba en un sitio que no quería. Peor aún cuando esos enlaces resultan anuncios.
Son pequeños detalles que, por separado, pueden parecer insignificantes, pero que terminan generando una sensación de poca calidad y hacen que el usuario abandone antes de completar una compra o enviar un formulario.
Una buena web responsive también piensa en cómo interactúan las personas con la pantalla, no únicamente en cómo se distribuyen los elementos.
No es una web responsive si para leer el contenido necesitas hacer zoom
Siempre digo que el contenido es el protagonista de cualquier página web. Si el usuario tiene dificultades para leerlo, todo lo demás deja de tener importancia.
Todavía encuentro páginas donde los textos en móvil aparecen con tamaños de letra excesivamente pequeños o donde las líneas son tan largas y los márgenes tan reducidos que leer un artículo termina resultando incómodo. Muchas veces esto ocurre porque el objetivo ha sido mantener exactamente el mismo diseño que existe en escritorio, reduciéndolo simplemente de tamaño.
Pero una web responsive no consiste en encoger el contenido. Consiste en reorganizarlo para que siga siendo agradable de leer en cualquier dispositivo.
La tipografía, el interlineado, los espacios en blanco y la longitud de las líneas forman parte de la experiencia de lectura. Cuando alguno de estos elementos falla, el usuario suele abandonar la página antes de terminar de leer, independientemente de lo interesante que sea el contenido.
No es una web responsive si aparece desplazamiento horizontal
Si alguna vez has abierto una página en el móvil y has podido moverla ligeramente hacia la derecha o hacia la izquierda, ya sabes exactamente a qué me refiero.
El desplazamiento horizontal suele ser consecuencia de pequeños errores que se van acumulando: una imagen demasiado grande, un ancho fijo que no debería existir, una tabla sin adaptar o incluso un simple margen negativo mal utilizado. Individualmente parecen detalles sin importancia, pero el resultado final transmite una sensación de poca profesionalidad.
Además, este tipo de errores suele afectar también a otros aspectos del diseño. Muchas veces ese elemento que sobresale provoca que el contenido quede desalineado, que aparezcan espacios vacíos o que determinadas animaciones funcionen de forma incorrecta.
Por eso siempre recomiendo revisar las páginas desplazándose lentamente de arriba abajo en varios dispositivos reales. Es sorprendente la cantidad de pequeños fallos que aparecen únicamente cuando utilizamos la web como lo haría un usuario normal.
No es una web responsive si ocultas contenido importante en la versión móvil
Existe una diferencia muy grande entre simplificar una interfaz y eliminar información importante.
En algunas páginas encuentro versiones móviles donde desaparecen botones de contacto, llamadas a la acción, formularios o incluso bloques enteros de contenido simplemente porque «no caben». La solución no debería consistir en esconder elementos, sino en reorganizarlos para que sigan estando disponibles.
Una web responsive debe ofrecer prácticamente la misma información independientemente del dispositivo desde el que se visite. Evidentemente el orden puede cambiar, algunas imágenes decorativas pueden desaparecer e incluso determinadas secciones pueden mostrarse de otra manera, pero el usuario debería poder realizar las mismas acciones tanto desde el ordenador como desde el móvil.
Cuando eliminamos funcionalidades para facilitar el diseño, normalmente estamos resolviendo un problema de la forma equivocada.
No es una web responsive si el rendimiento en móvil no ha sido una prioridad
Hay quien piensa que responsive significa únicamente adaptar el diseño, pero el rendimiento forma parte de esa adaptación.
De poco sirve que una página se vea perfectamente si tarda diez segundos en cargar porque sigue enviando imágenes gigantescas, vídeos innecesarios o archivos CSS y JavaScript que nunca llegan a utilizarse en un teléfono.
Los dispositivos móviles no siempre disponen de una conexión rápida. Tampoco todos tienen la misma potencia de procesamiento. Por eso una buena web responsive debe optimizar también los recursos que carga en cada dispositivo.
Siempre que desarrollo una página intento preguntarme si realmente todo lo que estoy cargando aporta valor al usuario. En muchas ocasiones una simple optimización de imágenes o una carga diferida de determinados elementos consigue mejorar enormemente la experiencia sin modificar el diseño.
No es una web responsive si solo la pruebas reduciendo la ventana del navegador
Reconozco que durante el desarrollo todos utilizamos las herramientas responsive del navegador porque resultan muy cómodas. Yo también lo hago. El problema aparece cuando esa es la única prueba que realizamos antes de publicar una página.
Un teléfono móvil no funciona igual que una ventana estrecha del ordenador. Existen diferencias en la forma en que aparecen los teclados virtuales, las barras del navegador, los gestos táctiles, la densidad de píxeles o incluso la velocidad con la que se ejecutan determinadas animaciones.
Más de una vez me ha ocurrido que una página parecía perfecta dentro de Chrome DevTools y, sin embargo, al abrirla en un iPhone o en un teléfono Android aparecían pequeños problemas que nunca habían salido durante el desarrollo.
Por eso siempre recomiendo dedicar unos minutos a probar cualquier proyecto en varios dispositivos reales antes de darlo por terminado. Es una inversión de tiempo muy pequeña comparada con la cantidad de errores que puede evitar.
Y, por supuesto, probarla en dispositivos iOS y Android y en diferentes navegadores. Porque en cada uno de esos sistemas operativos, con cada uno de esos navegadores tu web se verá un poco diferente. En la mayoría de los casos, estas diferencias son inocuas: que las letras se ajusten mejor o peor en uno o en otro, animaciones que se verán o no en un cierto dispositivo, etc… Pero en otros casos comprobarás que alguna función se queda coja, especialmente en iOS. ¡Y esos usuarios también se merecen la mejor experiencia en tu sitio web!
Y si adaptar correctamente una web responsive te está dando más dolores de cabeza de los que esperabas, no pasa nada. Es mucho más habitual de lo que parece y, en la mayoría de ocasiones, no hace falta rehacer toda la página desde cero. Basta con detectar dónde está el problema estructural y corregirlo para que el resto del diseño empiece a comportarse como debería.
Puedes aprender más sobre el diseño web responsive en esta guía de buenas prácticas de Google.
Una web responsive es una experiencia, no una resolución
Cuando alguien me pregunta si una página es responsive, nunca me fijo primero en el tamaño de la pantalla. Me fijo en cómo se siente utilizarla.
Si puedo leer el contenido sin esfuerzo, navegar sin equivocarme al pulsar un botón, encontrar rápidamente la información que busco y moverme por la página con comodidad, probablemente esté delante de una buena web responsive. Si, por el contrario, necesito hacer zoom, esperar a que cargue o ir esquivando pequeños errores de diseño, da igual que técnicamente exista una versión para móvil: la experiencia no está a la altura.
Al final, el responsive no consiste en adaptar una web a un dispositivo concreto, sino en adaptarla a las personas que la utilizan. Esa diferencia puede parecer pequeña, pero cambia por completo la forma de diseñar y desarrollar cualquier proyecto.
Si has leído varios de estos puntos y te has sentido identificado con alguno de ellos, quizá sea el momento de revisar tu página con otros ojos. Muchas veces son pequeños ajustes los que marcan la diferencia entre una web que simplemente se ve en el móvil y una que realmente ofrece una buena experiencia de usuario.
Y si prefieres que sea yo quien la revise, estaré encantada de ayudarte. Puedes ponerte en contacto conmigo y analizaré tu web para detectar qué aspectos pueden mejorarse y cómo conseguir que funcione de verdad en cualquier dispositivo.