Abres una web en el móvil y toca hacer zoom, mover el dedo de un lado a otro y adivinar dónde tocar. Eso es una web que no es responsive. El diseño web responsive hace que tu página se vea y funcione bien en cualquier pantalla, sin versiones separadas. Aquí verás qué es, cómo funciona y por qué hoy es obligatorio.
Piensa en la última vez que entraste en una web desde el móvil y tuviste que hacer zoom para leer, o pulsaste un botón y le diste al de al lado. Frustra, y lo normal es cerrar y buscar en otra parte. Ese es el problema que resuelve el diseño web responsive: que tu web se vea y funcione bien en la pantalla que sea, sin que el usuario tenga que pelearse.
El diseño web responsive es la forma de construir una web para que se adapte sola al tamaño de la pantalla. En el ordenador aprovecha el ancho; en el móvil, el contenido se apila en una sola columna, la letra crece y los botones se agrandan. Es la misma web, con el mismo contenido, reordenándose según dónde se abra. El término lo popularizó el diseñador Ethan Marcotte en 2010, y hoy es el estándar; lo explica bien la documentación de Mozilla (MDN).
Hace años se hacían dos webs: la «normal» y una «m.tuweb.com» para móviles. Eso ya no se lleva, y da problemas: dos webs que mantener, contenido que se descuadra y líos de SEO. El diseño web responsive es una sola web que se adapta a todo. Una dirección, un contenido, cero duplicados.
No es una moda. Es que la gente ya no entra desde el ordenador. La mayoría de las visitas llegan desde el móvil, y si tu web no está pensada para ahí, pierdes a casi todo el mundo antes de empezar.
A eso se suma Google. Desde hace años usa la versión móvil de tu web para decidir tu posición (lo que se llama «mobile-first»). Una web que no es responsive no solo se ve mal: posiciona peor. Google te empuja hacia abajo por no cuidar el móvil.
Por dentro, el diseño web responsive se apoya en tres ideas sencillas:
Si quieres el detalle técnico, la guía de web.dev de Google lo explica con ejemplos.
Esto no va de tecnicismos, va de ventas. Una web responsive:
Se detectan a la primera:
El diseño web responsive ha cambiado el orden de las cosas. Antes se dibujaba la web para el ordenador, con su espacio de sobra, y luego se encogía a la fuerza para el móvil. El resultado casi siempre era una versión móvil apretada, con elementos que sobraban y textos que no cabían.
El enfoque «mobile-first» le da la vuelta: primero se piensa cómo se ve y se usa en el móvil, con lo esencial a la vista y un solo camino claro hacia la acción. Después se aprovecha el espacio extra del ordenador. Como el móvil es donde está la mayoría de tu gente, empezar por ahí te obliga a quedarte con lo que de verdad importa y a quitar el ruido. Y una web sin ruido convierte mejor en cualquier pantalla.
Una web responsive es el punto de partida, pero no basta por sí sola. Tiene que ir de la mano de una buena velocidad de carga, porque en el móvil cada segundo cuenta, y de páginas pensadas para convertir. Si mandas tráfico a una landing page que se ve bien y carga rápido en el móvil, tu tasa de conversión sube sola. Todo esto es parte de un buen diseño y desarrollo web.
No hace falta ser técnico. Abre tu web en el móvil y hazte tres preguntas: ¿se lee sin hacer zoom?, ¿el botón principal se ve a la primera?, ¿puedes navegar con el pulgar sin errar? Otra prueba rápida en el ordenador: encoge la ventana del navegador y mira si el contenido se reordena con orden o se rompe. Si algo falla, tu web te está costando clientes. Para la base teórica, la entrada de diseño web adaptable en Wikipedia resume el concepto.
En Magnes Factory no hacemos webs «para el ordenador» y luego las apañamos para el móvil. Empezamos al revés:
Si tu web da guerra en el móvil, casi seguro que ahí estás perdiendo ventas. Escríbenos y le echamos un ojo.
El diseño web responsive es la técnica que hace que una misma web se adapte a cualquier pantalla: móvil, tablet u ordenador. El contenido se reordena solo para que siempre se lea bien y sea fácil de usar, sin tener una versión aparte para cada dispositivo.
Porque la mayoría de la gente entra desde el móvil. Si tu web no se adapta, se ve mal, cuesta usarla y se van. Además Google indexa la versión móvil primero, así que una web no responsive posiciona peor.
En la práctica sí se usan como sinónimos. «Responsive» viene del inglés y «adaptable» es su traducción. Ambos describen una web que cambia su diseño según el tamaño de la pantalla.
Ábrela en el móvil: si tienes que hacer zoom para leer o los botones son diminutos, no lo es. También puedes reducir la ventana del navegador en el ordenador; si el contenido se desordena o aparece una barra horizontal, falla.
Depende del tamaño de la web. Hoy una web nueva ya se hace responsive de serie, sin coste extra. Adaptar una antigua que no lo es puede costar más, pero casi siempre sale a cuenta por lo que se gana en ventas y posicionamiento.
Sí. Google usa la versión móvil de tu web para posicionarte y valora que sea fácil de usar en el móvil. Una web responsive rápida y clara tiene ventaja frente a una que obliga a hacer zoom.
La ayuda del Gobierno para digitalizar tu negocio vuelve a abrirse. Cuando abre, se agota: se concede por orden de llegada y quien llega con los papeles hechos entra, y quien empieza ese día a mirarlo, no.
Lo que suelen pedir: ser autónomo, microempresa o pyme con domicilio fiscal en España, estar al corriente con Hacienda y la Seguridad Social y tener hecho el test de autodiagnóstico. El calendario lo publica el Gobierno en acelerapyme.gob.es.