Las mejores técnicas de diseño web responsivo aprovechan al máximo los diferentes tamaños de pantalla.
El diseño web responsivo garantiza que tu diseño, perfecto hasta el último píxel, se vea exactamente como planeaste para cada persona que visite tu sitio. Un sitio web responsivo se adapta a diferentes tamaños de ventana para asegurar que cada visitante disfrute de una experiencia coherente, ya sea desde una computadora de escritorio o un dispositivo móvil como un teléfono inteligente o una tableta.
Este artículo ofrece una lista de los mejores sitios web responsivos para que te inspires. También aprenderás cómo funciona el diseño responsivo y encontrarás algunas prácticas recomendadas para implementarlo.
¿Cuáles son los fundamentos del diseño web responsivo?
Los diseños web responsivos son versátiles: se ajustan a diferentes tamaños de pantalla para que cada usuario pueda acceder a la información que necesita con una experiencia fluida. Existen varias formas de aplicar este estilo, como las cuadrículas flexibles que reorganizan los diseños de forma responsiva y las consultas de medios (media queries) que ofrecen una versión adaptada del sitio según el tamaño de la pantalla del usuario.
El diseño responsivo es diferente del diseño adaptativo, aunque ambos mejoran la experiencia del usuario en distintos dispositivos. El diseño adaptativo utiliza múltiples diseños fijos adaptados a tamaños de pantalla específicos para tener un mayor control sobre cada experiencia. El diseño web responsivo utiliza un diseño principal que se ajusta a cualquier espacio —incluso a aquellos que no habías previsto—, lo que resulta en un sitio más flexible y mejor preparado para los avances tecnológicos futuros.
El método adecuado para ti dependerá de la complejidad de tus diseños. Usar un creador de sitios web como Webflow, que ofrece herramientas integradas de responsividad, puede ayudarte a determinar el mejor enfoque.
Términos clave del diseño web responsivo
Todos los ejemplos más responsivos de la web utilizan los mismos elementos de diseño para crear su funcionalidad distintiva. Estos son los términos de diseño responsivo más importantes que debes conocer:
- Las cuadrículas flexibles, a menudo llamadas flexboxes, son cuadrículas CSS que reorganizan automáticamente filas y columnas para aprovechar al máximo el espacio disponible.
- Viewport se refiere al tamaño de la pantalla del visitante. Usando CSS, puedes ajustar el tamaño de los elementos en relación con las dimensiones del viewport o usarlo para crear puntos de interrupción (breakpoints).
- Los puntos de interrupción utilizan consultas de medios CSS para marcar cambios de diseño en un tamaño de pantalla específico. Por ejemplo, puedes crear diseños más amplios para viewports de al menos 1024 píxeles de ancho y otros más compactos para pantallas más pequeñas. El tamaño del viewport del usuario determina qué versión verá.
- Max-width es una propiedad CSS que establece el ancho máximo de un elemento, generalmente en una unidad relativa como un porcentaje (por ejemplo, “max-width: 30%”). También puedes usarla para establecer puntos de interrupción para diferentes tamaños de viewport (como “max-width: 479 píxeles” para reproductores de video).
- Las unidades relativas ayudan a dimensionar los elementos en comparación con el tamaño de otra cosa, como el ancho máximo. Por ejemplo, una imagen con un ancho máximo del 20% no ocupará más del 20% del contenedor en el que se encuentra, independientemente de su resolución. Otras unidades relativas incluyen rem y em, que se escalan con el tamaño de la fuente, y el ancho (vw) y alto (vh) del viewport. Esto permite que las funciones se ajusten adecuadamente a cada pantalla.
- Los contenedores son elementos que albergan otros elementos, como encabezados, imágenes y botones. Los wrappers son un tipo de contenedor utilizado para dar estilo a los elementos que contienen. Por ejemplo, un contenedor básico podría reservar espacio en un diseño para una galería de imágenes, y un wrapper flexbox anidado dentro contiene todas las imágenes que deben reordenarse o redimensionarse dentro del contenedor más grande.
- Los menús de tres puntos o hamburguesa son botones que ocultan interacciones como menús de navegación u opciones de personalización que, de otro modo, ocuparían demasiado espacio en pantalla.
- Mobile-first es una perspectiva común en el diseño web que prioriza la experiencia del usuario móvil (dado que más de la mitad de todo el tráfico de internet proviene de dispositivos móviles). Los diseñadores que crean sitios web responsivos con este enfoque a menudo comienzan con el diseño móvil y luego lo escalan para los usuarios de escritorio.
16 ejemplos de diseño web responsivo
Para ver el diseño responsivo en acción, cambia el tamaño de la ventana de tu navegador mientras abres cada uno de los siguientes 16 ejemplos. Si quieres profundizar para ver cómo lo lograron los diseñadores, puedes abrir la ventana de inspección (F12 en Chrome, menú Desarrollo en Safari) para examinar el HTML/CSS del sitio.
Aquí tienes 16 excelentes ejemplos de diseños web responsivos para que te inspires.
1. ThreeSixtyEight
El sitio web a pantalla completa de ThreeSixtyEight presenta una forma única de navegar por su portafolio: invirtieron la dirección del desplazamiento, por lo que debes moverte hacia arriba desde la página de inicio. Más adelante, la página incluye una galería que se desliza diagonalmente por la pantalla. Estos inusuales efectos de paralaje y otras decisiones de diseño deliberadamente poco convencionales se reflejan en la versión móvil, pero reducidos para adaptarse al espacio más estrecho.
Al observar el HTML, ThreeSixtyEight utilizó unidades relativas para lograr esta consistencia entre dispositivos. Cada contenedor utiliza unidades vh para escalar según la altura del viewport, haciendo que la transición del diseño a un tamaño de pantalla más pequeño sea fluida.
2. Plantible Foods
El sitio de Plantible Foods, creado por We Met Before, tiene muy poco relleno (padding) para aprovechar económicamente todo el ancho de la pantalla. Dado que las pantallas de los teléfonos son más altas que anchas, los contenedores que en escritorio están uno al lado del otro se reordenan verticalmente en el móvil.
En el CSS de la página, We Met Before incorporó varias consultas de medios para crear puntos de interrupción en 992, 768 y 479 píxeles. Estos puntos se alinean perfectamente con la transición de escritorio a tableta y a móvil, asegurando que todo se escale adecuadamente.
3. Fable
El sitio Fable, creado por Vimalan Vijayasekaran, utiliza flexboxes para mantener las versiones de escritorio y móvil ordenadas y legibles. Los contenedores estructuran cada sección, mientras que los envoltorios flexbox gestionan el texto y los botones de llamada a la acción (CTA) o las imágenes que contienen.
A medida que el tamaño de la pantalla disminuye, cada flexbox reorganiza automáticamente su contenido para aprovechar al máximo el espacio disponible. Esta reorganización sigue siempre la misma jerarquía visual: el texto se desplaza a la parte superior, seguido de las interacciones, los CTA y, finalmente, las imágenes. Esto garantiza que el contenido más importante permanezca siempre a la vista del usuario, sin importar cómo acceda a la página.
4. Hellofolk
Hellofolk ha hecho que su sitio web sea adaptable con un toque sutil. Crearon puntos de interrupción (breakpoints) para escritorio, tableta y móvil que apenas alteran la estética para el usuario. Al pasar de escritorio a tableta, se reduce el espaciado entre imágenes y texto. En dispositivos móviles, todo se colapsa en una lista vertical gracias a que los diseñadores utilizaron una propiedad flexbox simplificada llamada inline-flex, que permite que los contenedores ajusten su tamaño según el ancho del texto que contienen.
Para lograr estos efectos, los diseñadores de Hellofolk asignaron valores de espaciado en unidades rem y redujeron la cantidad de rems para pantallas más pequeñas. Estos elementos mantienen la facilidad de lectura del sitio y refuerzan la identidad de marca de Hellofolk, centrada en la simplicidad.
5. Raca Design Studio
El sitio de Raca Design Studio, realizado por Marcin Mikołajczyk, apuesta por una estética minimalista, que es el estilo más práctico para lograr un diseño adaptable. Esto se debe a que el minimalismo depende en gran medida del espacio en blanco. Puedes usar porcentajes para definir cuánto de ese espacio ocupa cada elemento y ajustar esa proporción según el tamaño de la pantalla.
En puntos de interrupción más grandes, los porcentajes menores aseguran que los elementos nunca saturen el diseño. Por otro lado, en pantallas más pequeñas, aumentan esos porcentajes para permitir que los elementos ocupen más espacio en blanco. La única excepción es la sección principal (hero) al inicio de la página, que siempre ocupa todo el ancho de la pantalla, mostrando una imagen grande y llamativa que marca el estilo de la marca.
6. History of Animation
En lugar de usar flexboxes o unidades relativas, el sitio History of Animation, de Roy Tsue, utiliza puntos de interrupción para redefinir cada clase CSS con unidades absolutas. Por ejemplo, los titulares en pantallas de más de 479 píxeles tienen una altura de línea de 52 píxeles, mientras que en pantallas por debajo de ese límite se reducen a 40 píxeles.
Aunque este método ofrece un control más preciso sobre el diseño adaptable, puede causar problemas técnicos en ciertas resoluciones. Las unidades absolutas como los píxeles no se escalan igual que los rems o los porcentajes, por lo que el sitio no se verá correctamente en un monitor 4K, donde una altura de línea de 40 píxeles resulta insignificante. Si utilizas este método en los sitios de tus clientes, tendrás que crear puntos de interrupción adicionales para cubrir este tipo de casos.
7. Hello Bello’s State of Parenthood
Hello Bello’s State of Parenthood es un sitio web de una sola página adaptable, creado por el equipo de Brains. Al igual que en los ejemplos anteriores, utilizan unidades relativas y puntos de interrupción, pero cuando los usuarios acceden desde un dispositivo con un ancho máximo de 767 píxeles, el menú de navegación fijo de la izquierda se transforma en un menú de "Saltar a una sección" en la parte superior de la página.
En realidad, la navegación fija y el menú de "Saltar a una sección" son dos menús distintos; al cambiar entre puntos de interrupción, uno se oculta y el otro aparece. Alternar los métodos de navegación de esta manera garantiza que tus lectores siempre puedan acceder cómodamente a todo el contenido, sin importar el tamaño de su pantalla.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
8. Brand Appart
El sitio web de la agencia Brand Appart destaca por su talento para la animación y sus efectos visuales originales. La página ejecuta varios scripts: en dispositivos móviles, los scripts sensibles al cursor se adaptan al tacto y la barra de navegación se convierte en un menú tipo hamburguesa. Por lo demás, el diseño alineado verticalmente se mantiene prácticamente igual.
Con tantas animaciones y scripts en funcionamiento, los tiempos de carga son una preocupación importante. Si planeas crear scripts complejos que se adapten a los dispositivos, añade una pantalla de carga para darles tiempo a inicializarse y utiliza la carga diferida (lazy-loading) en las imágenes para mejorar los tiempos de carga.
9. Lando Norris
Creado por OFF+BRAND, el sitio web de Lando Norris, ganador de un premio awwwards, cuenta con varias animaciones e interacciones, pero comienza con una breve pantalla de carga para que todo esté listo y los visitantes no sufran retrasos. Las animaciones, galerías y listas de este sitio se ajustan al tamaño de la pantalla, volviéndose menos condensadas y más interactivas.
OFF+BRAND también añadió una notificación que indica a los usuarios de dispositivos móviles que giren sus dispositivos verticalmente, ya que el sitio web no se puede navegar en orientación horizontal. Es una limitación única, pero que funciona bien con el diseño vertical y sus interacciones cuidadosamente planificadas. Es un gran recordatorio de que puedes establecer ciertos límites en tu diseño, siempre y cuando esto garantice la mejor experiencia para el usuario.
10. Parable
Diego Toda de Oliveira optimizó la capacidad de respuesta del sitio web de Parable durante el proceso de diseño. Ordenó cuidadosamente todo el texto y las imágenes en primer plano con flexboxes que ocupan una parte generosa de la pantalla en dispositivos móviles y adaptó los tamaños de fuente para mantener la legibilidad. Aparte de algunos cambios menores en el diseño y la adición de un menú de hamburguesa para la navegación móvil, la experiencia es la misma en todos los dispositivos. Esa es una de las ventajas de mantener tus diseños simples: hay menos elementos que ajustar según el tamaño de la pantalla.
11. Eagle’s Nest
El sitio web adaptable de Eagle’s Nest, creado por Serge Syutkin, depende en gran medida de imágenes a pantalla completa y animaciones sensibles al desplazamiento. Cada vez que haces scroll, aparece una nueva imagen impresionante o una cita reflexiva, todo moviéndose a un ritmo relajado y fácil de leer. Este flujo tranquilo de imágenes y texto transmite la atmósfera pacífica que busca el sitio, vinculando el contenido con el diseño. Puede servir como una excelente plantilla si buscas crear una experiencia similar.
12. DeepJudge
El sitio web de DeepJudge utiliza estrategias de diseño adaptativo para realizar cambios significativos en pantallas más pequeñas. Mientras que la versión de escritorio presenta varias imágenes animadas con interacciones ligeras, como líneas negras que se vuelven naranjas al pasar el cursor, la versión móvil reemplaza esas imágenes por otras estáticas. De esta manera, los dispositivos más pequeños y menos potentes tienen menos carga.
Para un enfoque más amigable con el diseño web adaptable, considera ocultar las animaciones en un punto de interrupción específico o eliminarlas por completo.
13. Quin
Los diseñadores detrás del sitio web de Quin utilizaron mucho espacio horizontal en su diseño, y la orientación vertical podría dificultar la transición del sitio a una pantalla móvil. Por ejemplo, las pestañas de la primera imagen no serían visibles en el móvil sin un diseño adaptable. Los diseñadores resolvieron este problema inteligentemente usando temporizadores que cambian automáticamente estas pestañas en todos los dispositivos. Puedes mejorar aún más esta estrategia en tus diseños añadiendo botones para que los visitantes puedan navegar manualmente por las pestañas a su propio ritmo.
14. Hurt Feelings
El sitio web de Hurt Feelings tiene márgenes verticales generosos en pantallas grandes para enmarcar y centrar sus imágenes creativas. En el móvil, los diseñadores eliminaron esos márgenes para aprovechar las pantallas más pequeñas. En su lugar, los flexboxes reordenan los elementos verticalmente. La tipografía de la página es inusual, por lo que el tamaño de fuente es lo último que se reduce para mantener la legibilidad. Si utilizas texto y fuentes de formas ingeniosas en tus sitios web, considera colocar el texto al final de la jerarquía visual.
15. Wispr Flow
El sitio web de Wispr Flow apuesta todo a unas animaciones envolventes que representan texto en «flujo», el tema central de su marca. Para mantener ese efecto visual en sus diseños adaptables, cada página es relativamente corta. Así, las animaciones se mueven con fluidez y los tiempos de carga se mantienen al mínimo.
Si las animaciones son igual de importantes para la marca de tu cliente, considera crear un mayor número de páginas cortas y un menú de navegación fijo para que pasar de una a otra sea un abrir y cerrar de ojos.
16. Adnaut
El sitio web de Adnaut, creado por Everything Flow, es prácticamente idéntico en todos los dispositivos. A medida que la pantalla se reduce, todo se organiza en una jerarquía visual vertical coherente: encabezados, cuerpo de texto y, finalmente, imágenes. Cuando los clientes potenciales vuelven a visitar la web de Adnaut desde otro dispositivo, saben exactamente dónde encontrar cada cosa, como su gráfico interactivo de cinco pasos, que en la versión móvil se transforma en un práctico menú de pestañas.
Puedes lograr el mismo efecto manteniendo siempre los elementos dentro de un flexbox en el mismo orden. De este modo, cuando la web se adapte a una pantalla más pequeña, todo encajará en su sitio como por arte de magia.
Buenas prácticas de diseño web adaptable
Para crear los mejores sitios web adaptables para tus clientes, aplica estos consejos a tu proceso de diseño:
- Diseña para todo tipo de dispositivos. Empieza creando la experiencia móvil y luego adáptala para escritorio. Es más difícil simplificar diseños complejos, así que empezar por el móvil garantiza que tu web luzca de maravilla incluso en la pantalla más pequeña.
- Usa unidades relativas. Apóyate en porcentajes y ems para crear diseños que mantengan la coherencia entre puntos de interrupción. El 20 % de una pantalla se ve igual tanto si mide 600 píxeles de ancho como 760, pero 120 píxeles fijos no.
- Define el ancho, no el alto. El ancho máximo es la dimensión clave en móviles, así que úsalo en tus media queries y para redimensionar contenedores. Confiar en la altura máxima puede hacer que las imágenes se corten en los laterales.
- Cambia los métodos de navegación. Un menú de navegación superior en escritorio y un menú de tres puntos o tipo hamburguesa en móvil liberan espacio valioso en pantallas pequeñas.
- Comprime las imágenes. Antes de subirlas, comprime y optimiza tus imágenes para reducir el peso del archivo y acelerar la carga.
- Prioriza la accesibilidad. Las heurísticas de usabilidad, como la previsibilidad, la prevención de errores y el control del usuario, deben adaptarse a cada dispositivo. Por ejemplo, desplazarse verticalmente para avanzar en una galería horizontal puede ser intuitivo en escritorio, pero confuso en móvil, donde los usuarios esperan deslizar el dedo.
Crea una web que funcione en todas partes
Para llegar al mayor público posible, tu sitio debe impresionar en cualquier tamaño de pantalla, especialmente ahora que el tráfico móvil ha superado al de escritorio. Crear una web adaptable desde cero requiere tiempo y esfuerzo, pero existen formas de agilizar el proceso, como usar un creador de sitios web como Webflow, que incluye funciones de adaptabilidad integradas.
Aplica automáticamente todos tus cambios a través de los puntos de interrupción —incluyendo márgenes, tamaños de fuente e imágenes— con el constructor de sitios web adaptables de Webflow. Incluso puedes personalizar tus puntos de interrupción para optimizar la experiencia según el dispositivo. Estas herramientas y muchas más de Webflow te ayudarán a lanzar tu web más adaptable hasta la fecha.
Crea sitios web que dan resultados.
Diseña visualmente, publica al instante y escala de forma segura y rápida. Todo con la plataforma de marketing web con IA de Webflow.
