Responsive design: qué es el diseño responsive y cómo funciona
Una sola web que se adapta a cada pantalla
El responsive design o diseño responsive (también llamado diseño responsivo o adaptable) es una forma de diseñar webs y emails para que se adapten solos al tamaño de la pantalla. La misma página se ve bien en un ordenador, una tableta o un móvil, sin hacer una versión distinta para cada uno.
El término lo acuñó el diseñador Ethan Marcotte en 2010. Hoy es la forma habitual de diseñar para internet, porque gran parte de las visitas y de los emails se abren desde el móvil.
¿Cómo funciona el diseño responsive?
Un diseño responsive se apoya en tres técnicas de CSS, la hoja de estilos que define cómo se ve una página.
Rejilla fluida
Las columnas se miden en porcentajes, no en píxeles fijos. Si la pantalla se estrecha, las columnas también.
Imágenes flexibles
Las imágenes nunca superan el ancho de su contenedor. En un móvil se reducen en lugar de salirse de la pantalla.
Media queries
Son reglas que cambian el diseño a partir de un ancho concreto (breakpoint). Por ejemplo, con @media (max-width: 600px) las tres columnas de un ordenador pasan a una sola en el móvil.
Además, la página incluye la etiqueta meta viewport, que le dice al navegador del móvil que use el ancho real de la pantalla.
Crea emails que se adaptan al móvil
Crea tu cuenta gratis en Mailrelay: el editor adapta tus newsletters a cada dispositivo, sin tocar código.
Ejemplos de diseño responsive
Estos son los cambios más habituales cuando una página responsive pasa del ordenador al móvil:
- Las columnas se apilan: tres columnas en el ordenador, una debajo de otra en el móvil.
- El menú se recoge: el menú horizontal pasa a un botón con tres rayas (menú hamburguesa).
- Las imágenes se reducen: ocupan el ancho de la pantalla y mantienen la proporción.
- El texto se ajusta: el tamaño de letra y los márgenes cambian para leer sin hacer zoom.
- Los botones crecen: son más grandes y están más separados, para pulsarlos con el dedo.
- Lo secundario se oculta o baja: barras laterales y banners pasan al final o desaparecen.
Responsive, adaptativo y mobile first: ¿en qué se diferencian?
Los tres buscan que una web se vea bien en cualquier pantalla, pero no son lo mismo:
| Responsive | Adaptativo (adaptive) | Mobile first | |
|---|---|---|---|
| Qué es | Un solo diseño fluido que se ajusta a cualquier ancho | Varios diseños fijos, uno por tamaño de pantalla | Una forma de trabajar: se diseña primero para el móvil |
| Cómo se adapta | De forma continua, con porcentajes y media queries | Salta entre diseños (por ejemplo, 320, 768 y 1.200 px) | Se parte del móvil y se añaden elementos en pantallas grandes |
| Ventaja | Un solo diseño que mantener | Control total en cada tamaño | Prioriza lo importante y suele cargar más rápido |
| Inconveniente | Menos control en tamaños intermedios | Más trabajo y más versiones que mantener | Exige decidir qué es lo prioritario desde el principio |
Mobile first no compite con el responsive: es la forma más habitual de hacer un diseño responsive hoy.
¿Por qué es importante el diseño responsive?
Experiencia de usuario: nadie quiere hacer zoom o desplazarse en horizontal para leer. La usabilidad web mejora en todas las pantallas.
SEO: Google indexa las páginas a partir de su versión para móviles, así que una web que no se ve bien en el móvil tiene más difícil posicionar. Más en SEO.
Conversión: formularios y botones fáciles de usar en el móvil, como los de una landing page, consiguen más registros y ventas.
Mantenimiento: una sola web y una sola URL para todos los dispositivos.
Diseño responsive en el email
En el email la idea es la misma: que la newsletter se lea bien en el móvil. La diferencia está en que cada gestor de correo interpreta el código a su manera, y algunos ignoran parte del CSS. Por eso los emails responsive se suelen montar con estructuras sencillas, de una o dos columnas, y botones grandes.
Cómo se diseña y se comprueba un email que se adapta a cada pantalla está en email responsive.
Cómo comprobar si una web o un email es responsive
- Cambia el tamaño de la ventana del navegador y mira si el contenido se reorganiza.
- Usa las herramientas de desarrollo del navegador (F12) y su modo de dispositivo para ver la página como en un móvil o una tableta.
- Ábrela en un móvil de verdad: comprueba que no hace falta zoom, que los botones se pulsan bien y que nada se sale de la pantalla.
- En el email, envíate una prueba y ábrela en el móvil y en el ordenador, en más de un gestor de correo. Más en email rendering.
Cómo te ayuda Mailrelay
El editor de newsletters de Mailrelay añade el código responsive por ti: diseñas el email arrastrando bloques y el editor lo adapta a cada dispositivo, sin tocar HTML ni CSS. Puedes partir de una plantilla de email y enviarte una prueba antes de lanzar la campaña.
En el editor de landing pages tienes una vista de dispositivo para cambiar entre escritorio y móvil y comprobar el diseño antes de publicar.
Todo esto está incluido en la cuenta gratuita, con la que puedes enviar hasta 80.000 emails al mes.
Empieza gratis con Mailrelay
Hasta 80.000 emails al mes, editor de arrastrar y soltar y soporte en español.
Preguntas frecuentes
¿Qué es el responsive design?
Una forma de diseñar webs y emails para que se adapten solos al tamaño de la pantalla, con un único diseño para ordenador, tableta y móvil.
¿Es lo mismo diseño responsive que diseño responsivo?
Sí. Responsive, responsivo y adaptable se usan como sinónimos en español para la misma técnica.
¿Qué diferencia hay entre diseño responsive y adaptativo?
El responsive usa un solo diseño fluido que se ajusta a cualquier ancho. El adaptativo prepara varios diseños fijos y muestra el que corresponde a cada tamaño de pantalla.
¿Qué es mobile first?
Una forma de trabajar en la que se diseña primero para el móvil y después se amplía el diseño para pantallas más grandes.
¿Necesito saber programar para tener un diseño responsive?
No. La mayoría de las plantillas web y de los editores de email ya son responsive. Solo tienes que comprobar el resultado en el móvil.