Hoy, el 63 % de las visitas a sitios web se hacen desde dispositivos móviles (frente al 37 % que llega desde computadoras), y este porcentaje sigue creciendo. Como ahora los usuarios pueden acceder a información prácticamente desde cualquier lugar, tu sitio web debe ofrecer una experiencia fluida en todos los dispositivos.
¿La solución? El diseño web responsivo.
El diseño responsivo va más allá del enfoque tradicional de “sitio optimizado para móviles”. Se trata de una estructura que se adapta de forma dinámica a los parámetros específicos del dispositivo del usuario. La experiencia es fluida tanto si alguien navega desde un iPhone 4 como desde la última Microsoft Surface.
En este artículo, veremos siete ejemplos destacados de sitios con diseño web responsivo para que puedas ver cómo funciona este enfoque en la práctica y tomar ideas para tu propio sitio.
Qué es el diseño web responsivo: el diseño responsivo ajusta de forma dinámica la estructura del sitio según el dispositivo del usuario, garantizando una experiencia fluida en cualquier tamaño de pantalla.
Buenas prácticas: entre las mejores prácticas está usar breakpoints (puntos de ruptura) para optimizar la visualización en computadoras, tablets y smartphones, diseñar pensando primero en dispositivo móvil, priorizar los elementos esenciales y facilitar la interacción con botones y enlaces. También es clave adoptar el scroll vertical y dejar atrás el patrón tradicional en “F” para móviles.
Cómo te ayuda Pipedrive: el CRM y software de gestión de leads de Pipedrive te permite nutrir a los prospectos que llegan desde tu sitio responsivo con comunicaciones personalizadas que aumentan el customer engagement y las conversiones.Prueba Pipedrive gratis durante 14 días.
1. Dribbble
La plataforma de diseño Dribbble es uno de los mejores ejemplos de diseño web responsivo, especialmente al mostrar cómo un grid flexible mejora la experiencia de navegación.
El grid flexible permite acomodar el contenido en columnas que cambian según el dispositivo.
En una laptop de 13”, las imágenes del portafolio aparecen en un formato de 4x3. Esto ofrece el equilibrio perfecto entre visibilidad (poder ver qué ofrece cada portfolio) y cantidad de elementos para captar la atención de distintos usuarios.
En dispositivos más pequeños, el grid se ajusta en vez de intentar forzar las cuatro columnas, lo que evita saturar la pantalla.
En un iPhone XS Max (6.5 pulgadas), el grid se reduce a una sola columna.
Este diseño móvil tiene dos beneficios principales:
La visualización en una sola columna garantiza la visibilidad y minimiza el desorden.
Aprovecha la tendencia a desplazarse más en los dispositivos móviles, por lo que la experiencia del usuario tiene sentido para los usuarios móviles.
Usa diseño web responsivo para adaptarte al comportamiento de cada tipo de dispositivo. Piensa siempre en accesibilidad, es decir, que los elementos sean fáciles de tocar, navegar e interactuar.
2. SWISS Air
La aerolínea internacional SWISS utiliza diseño responsivo para ofrecer una experiencia móvil simple, clara y centrada en lo que más importa: buscar y reservar vuelos.
Aquí vemos la diferencia en la experiencia entre las versiones de escritorio y móvil de la página de inicio de las aerolíneas SWISS:
En la versión de escritorio, la barra para buscar vuelos es la protagonista. Funciones secundarias como reservas de hotel o vehículos de alquiler también están disponibles. Además, se muestran imágenes y tipografías de marca que no aparecen en móvil.
En cambio, la versión móvil elimina elementos que distraen y lleva al usuario directamente a la acción principal: reservar un vuelo.
3. Dropbox
La página web de Dropbox muestra cómo un diseño responsivo puede transformar por completo la experiencia del usuario según el tamaño de pantalla.
Aquí se muestran tres versiones de la misma landing page: para desktop, tablet y smartphone.
Escritorio
Tablet
Móvil
Podemos ver el grid fluido en acción a medida que las versiones para tablet y escritorio se expanden para incluir una barra de navegación completa. La versión móvil utiliza el menú de hamburguesa (ícono de tres líneas) para mostrar una navegación vertical al tocarlo.
El encabezado es igual en las tres versiones. Cada una se centra en el mismo CTA principal, y el CTA de escritorio es el mismo que el de móvil y tablet (en otras ocasiones, puede cambiar): “Obtén más información” indica que la investigación de Dropbox reveló que la intención del usuario no cambia según el dispositivo.
Aunque muchos sitios eliminan imágenes en sus versiones móviles, Dropbox aplica este enfoque de forma estratégica: mantiene idéntica la parte superior de la página en los tres dispositivos, pero elimina las imágenes menos relevantes para no desviar la atención de lo realmente importante: una captura de pantalla de la herramienta.
El ejemplo de Dropbox demuestra que puedes personalizar la visualización para cada dispositivo hasta en los detalles más mínimos. La mejor forma de decidir qué mostrar en cada versión es encuestar a tus usuarios según el dispositivo que usan y entender su intención. Así podrás ajustar tu diseño y tu contenido para lograr una experiencia más fluida.
4. Forefathers Group
Como agencia web, Forefathers Group domina el diseño responsivo y muestra cómo los grids fluidos y las imágenes flexibles se ajustan según el dispositivo.
La siguiente imagen muestra dos versiones del sitio web del Forefathers Group:
Escritorio y tablet
Móvil
Las versiones para tablet y escritorio se muestran a pantalla completa, aprovechando al máximo el espacio disponible y utilizando zonas en blanco para mejorar la visibilidad.
En móviles, la barra de navegación superior pasa de un diseño horizontal a uno vertical para adaptarse al modo en que los usuarios suelen interactuar en estos dispositivos.
Los elementos tipográficos desaparecen y el CTA se reduce a “Hire us” (“Contrátanos”), lo que elimina el ruido visual y deja espacio solo para las funciones verdaderamente esenciales. La imagen principal también reduce el tamaño de su contenedor para ajustarse mejor a una pantalla de smartphone.
Cuando diseñes tu sitio para móviles, considera eliminar todo lo que genere distracción. Enfócate en las funciones que realmente ayudan al usuario a avanzar al siguiente paso dentro de su recorrido de compra.
5. Magic Leap
La plataforma de realidad aumentada Magic Leap usa imágenes flexibles para equilibrar diseño atractivo con experiencia intuitiva.
Aquí están las versiones de escritorio y móvil de Magic Leap:
Escritorio
Móvil
En la versión de escritorio, el usuario ve un video del dispositivo de realidad virtual que se reproduce automáticamente. El fondo y el borde del video se mezclan con el fondo del sitio web, por lo que parece que se reproduce directamente en la página.
Sin embargo, en la versión móvil, el video no se reproduce automáticamente. Esto sugiere que los usuarios móviles preferirían tener la opción de reproducir el video (especialmente si el video utiliza sonido, como el video de Magic Leap).
El ejemplo del sitio web adaptativo de Magic Leap demuestra la consideración de los deseos y necesidades de los usuarios en diferentes dispositivos. Ahora te toca a ti averiguar cómo les gusta a tus usuarios utilizar tu sitio web en función de lo que usan para verlo.
Otra forma de averiguar qué funciona mejor para cada versión de tu sitio web es plantear hipótesis, hacer pruebas A/B y realizar un seguimiento de las versiones que obtienen la mejor interacción en cada dispositivo.
6. Etsy
Etsy ofrece otro gran ejemplo de cómo aplicar grids flexibles para que el contenido se adapte al dispositivo.
Aquí está el sitio web de Etsy en tres dispositivos diferentes:
Escritorio y tablet
Móvil
Las versiones para tablet y escritorio tienen un diseño similar. Un banner de envío gratis y algún pequeño ajuste de diseño son las únicas diferencias, lo que sugiere otro cambio en la intención del usuario según el dispositivo.
Ahora, compara esas dos versiones con la última imagen, que muestra cómo se ve el sitio de Etsy en un dispositivo móvil. La barra de navegación desaparece por completo para reducir el desorden visual, y los grids se ajustan a formatos de 3x2 y 2x2.
En móviles, queda claro que Etsy está priorizando la personalización y, al mismo tiempo, ayudando a los usuarios a llegar rápido a lo que buscan: los productos.
La barra de búsqueda es muy visible en todas las versiones, probablemente porque Etsy sabe que sus usuarios suelen navegar con una intención específica (por ejemplo: “regalos para damas de honor”).
Si quieres seguir el ejemplo de Etsy en diseño responsivo, destaca tus mejores beneficios y permite que los usuarios lleguen rápido a lo que quieren en pantallas pequeñas. Si tus usuarios no suelen navegar por menús, piensa en reemplazar el menú de hamburguesa (ícono de tres líneas) por una barra de búsqueda fácil de ver.
7. Wired
La revista tecnológica Wired muestra otro gran uso de grids fluidos para ajustar las columnas según el ancho de pantalla. Además, plantea un punto clave: los anuncios.
En las siguientes imágenes, vemos dos versiones de su sitio web:
Escritorio
Móvil
Las versiones de escritorio y tablet son iguales. El sitio de Wired muestra varios resultados por página en un diseño de tres columnas con imágenes grandes, seguido más abajo por secciones con cuatro columnas.
La versión móvil muestra solo una columna para facilitar la lectura.
Este medio digital obtiene ingresos como muchos otros: a través de anuncios. Fíjate en el anuncio que aparece en la parte superior de la versión de escritorio frente a la versión móvil. Wired muestra el anuncio de forma diferente según el dispositivo: en móvil solo aparece el texto del encabezado, lo que invita al usuario a tocarlo.
Si tu sitio muestra anuncios, piensa en cómo se verán en cada tipo de dispositivo. Si Wired hubiera mantenido el anuncio de escritorio en la versión móvil, podrían haber surgido varios problemas (como dificultades de lectura o molestar al usuario al ser lo primero que ve).
¿Qué diferencia al diseño web responsivo de otros métodos?
Muchas veces se usa mal el término “responsivo”, confundiéndolo con “optimizado para móviles”.
Antes de ver las diferencias, aclaremos qué hace que un sitio sea responsivo.
Un diseño responsivo es dinámico y adaptable: muestra diferentes diseños optimizados para distintas pantallas.
El diseñador Ethan Marcotte lo define con tres componentes:
Consultas de medios CSS
Grids fluidos
Visuales flexibles
Marcotte describe el objetivo del diseño web adaptable de la siguiente manera:
“En lugar de crear diseños aislados para cada nuevo dispositivo, podemos tratarlos como parte de una experiencia unificada y hacer que el diseño se adapte al medio.”
Veamos cada elemento con más detalle.
Consultas de medios o media queries
Las media queries son una de las herramientas de prueba visual de CSS que le indica al sitio qué tipo de dispositivo lo está mostrando.
Cuando un usuario abre tu sitio, este analiza ciertas características del dispositivo (como el ancho del viewport y la resolución de pantalla). Con esa información, puede ajustar automáticamente elementos como texto e imágenes para adaptarlos al dispositivo de tu cliente.
Grids fluidos
Los grids fluidos (también conocidos como cuadrículas flexibles) dividen tu sitio en columnas que se escalan y se alinean automáticamente según el tamaño de la pantalla.
Esto significa que tu sitio se verá correctamente tanto si se abre en una computadora de 27 pulgadas, una tablet de nueve pulgadas o un smartphone de cinco pulgadas.
Las cuadrículas flexibles también ajustan la visualización cuando el usuario cambia el tamaño de la ventana del navegador.
Por ejemplo, si un visitante reduce su navegador a la mitad (para ver dos ventanas lado a lado), tu sitio se adaptará de forma dinámica según los parámetros del grid que hayas configurado.
Aquí puedes ver cómo se muestra la página principal de Pipedrive en una laptop a pantalla completa y cómo se ve cuando se reduce aproximadamente a un tercio del ancho.
Ordenador portátil ampliado a pantalla completa
Ordenador portátil redimensionado
Visuales flexibles
Los sistemas visuales flexibles (también conocidos como imágenes responsivas) son un elemento clave dentro del diseño web responsivo.
La idea es que el contenedor de la imagen se ajuste automáticamente según la configuración de la pantalla (por ejemplo, el tamaño del dispositivo desde el que se ve tu sitio). Esto evita que los archivos multimedia excedan las dimensiones de su contenedor y ocupen más espacio del previsto.
Además, las imágenes responsivas permiten resolver el problema de almacenar múltiples versiones de una misma imagen (una por cada resolución) dentro de tu sistema de gestión de contenidos (CMS), lo cual podría ralentizar la velocidad de carga de tu sitio.
Sitios “mobile-friendly” vs. sitios “mobile-responsive”
Como mencionamos antes, estos términos suenan parecidos, pero son muy diferentes.
El diseño mobile-friendly se refiere a sitios web que pueden usarse en dispositivos móviles, pero que básicamente muestran la misma versión que en escritorio (solo que más pequeña). Por ejemplo, si diseñaste tu sitio para verse perfecto en un dispositivo de 11 pulgadas, en un teléfono de 5.5 pulgadas simplemente aparecerá reducido a la mitad.
Esto provoca problemas de usabilidad, como:
Imágenes demasiado pequeñas para verse bien
Botones difíciles de tocar
Texto tan apretado que resulta incómodo de leer
El diseño mobile-responsive, en cambio, cambia de forma dinámica y automática según el dispositivo del usuario.
Por ejemplo, un sitio de comercio electrónico podría mostrar cinco columnas de productos en una laptop de 13 pulgadas, pero reducirlas a dos columnas en pantallas más pequeñas, como un smartphone.
Diseño responsivo vs. diseño fluido
El diseño responsivo y el diseño fluido son conceptos más parecidos entre sí, pero aun así no son lo mismo. La diferencia está en cómo cada estilo escala hacia arriba o hacia abajo según los parámetros del dispositivo.
Los sitios con diseño fluido usan porcentajes para escalar; los sitios responsivos utilizan unidades en píxeles para definir breakpoints que determinan cuándo debe cambiar el diseño.
El problema de los sitios fluidos es que, en pantallas grandes, pueden verse estirados, y en pantallas muy pequeñas, pueden verse saturados.
En el diseño web responsivo, en cambio, el diseño cambia por completo en lugar de solo escalar, lo que permite ofrecer una experiencia de usuario mucho más fluida en cualquier tamaño de dispositivo.
Mejores prácticas para un diseño web responsivo
Si estás preparando un rediseño de tu sitio web o simplemente quieres que tu sitio actual sea más responsivo en dispositivos móviles, sigue estas tres buenas prácticas para maximizar la usabilidad en todo tipo de pantallas.
1. Aprovecha los breakpoints
En el diseño web responsivo, los breakpoints son puntos de referencia en el tamaño de pantalla que indican cuándo tu sitio debe cambiar de un estado o tamaño a otro.
Por ejemplo, puedes tener un breakpoint a 1024 píxeles de ancho (para ajustar la vista en una laptop estándar), otro a 768 píxeles para tablets y así sucesivamente.
Puedes ver cómo funcionan los breakpoints en la práctica simplemente cambiando el tamaño de la ventana de tu navegador en un sitio web responsivo.
Fíjate, por ejemplo, en cómo cambia la página de precios de Pipedrive cuando ajustas el tamaño de la ventana.
A medida que la ventana se hace más pequeña, la página cruza un breakpoint y ocurren varios cambios:
Solo se muestra una opción de precios, lo que incentiva el desplazamiento vertical conocido como scroll.
Los elementos del menú horizontal desaparecen y se reemplazan por un ícono de menú hamburguesa.
El logo en texto pasa a ser un ícono para reducir el desorden visual.
La regla general es usar al menos tres breakpoints en el código de tu sitio: uno para computadoras, otro para tabletas y otro para smartphones. Sin embargo, puedes añadir más si lo necesitas, por ejemplo, para diferenciar tamaños de tablet o para distinguir entre laptops y monitores de escritorio grandes.
Para programar estos breakpoints, puedes usar las funciones min-width o max-width en CSS. Estas determinan en qué punto debe cambiar la visualización del sitio.
Con max-width, diseñas primero la versión de escritorio y luego reduces desde ahí. Con min-width, ocurre lo contrario: diseñas primero para móvil y luego escalas hacia arriba. Esta última es la mejor práctica hoy en día, ya que la mayoría de los usuarios navega desde sus teléfonos.
2. Prioriza el contenido para móvil
Para que tu sitio sea realmente responsivo, debes priorizar el contenido que se mostrará en una pantalla móvil.
No tiene por qué ser complicado: no necesitas un conocimiento profundo de HTML, JavaScript o CSS3, ni pagar cursos o tutoriales de diseño responsivo. Simplemente necesitas asegurarte de que los elementos más importantes que quieres mostrar sean visibles en móvil.
A partir de ahí, puedes añadir más elementos y espacios en blanco para dispositivos más grandes. Esto contrasta con el enfoque desktop-first, donde primero se diseña para pantallas grandes y luego se recorta o simplifica para pantallas pequeñas.
Aquí tienes otras buenas prácticas de un diseño mobile-first:
Haz los botones grandes (para que sean fáciles de presionar con el pulgar).
No coloques enlaces demasiado juntos (puede hacer que el usuario toque el equivocado).
A medida que las pantallas de los teléfonos crecen, asegúrate de que los elementos interactivos están al alcance del pulgar.
La mayoría de tus visitantes, muy probablemente, llegará desde el móvil. Entrarán a tu sitio desde buscadores o desde los anuncios que publiques en redes sociales (que están viendo en su dispositivo Apple o Android).
Al priorizar el contenido para móvil, estás atendiendo primero al público más grande y asegurándote de que la información más importante siempre esté visible.
3. Dile adiós al patrón en “F”
Los tutoriales tradicionales de diseño web suelen centrarse en uno de los marcos más comunes: el diseño en patrón F.
El patrón F analiza los movimientos de los ojos del usuario cuando entra por primera vez a un sitio web en escritorio. Primero escanean la parte superior de izquierda a derecha, luego la zona media de la misma manera y finalmente bajan hacia la parte inferior izquierda, así:
Si bien esto funciona en pantallas amplias de computadoras, no aplica para dispositivos móviles.
Las pantallas de los móviles tienen, por lo general, una orientación vertical y, debido a su tamaño, todo queda dentro del campo visual. Por eso no hay necesidad de escanear de la misma forma.
Cuando diseñes la versión móvil de tu sitio, olvídate del patrón F y piensa en cómo puedes fomentar que el usuario haga scroll.
Conclusión
Como la mayoría de las visitas provienen de dispositivos móviles, el diseño web responsivo ya no es opcional: es imprescindible.
Usa estos ejemplos como inspiración y aplica buenas prácticas para mejorar la experiencia de usuario en tu propio sitio, sin importar desde dónde entren.
Y recuerda: tu sitio web es solo el primer contacto. Después, necesitas nutrir a tus leads por el embudo de ventas hasta convertirlos en clientes.
Descubre cómo el CRM de Pipedrive y su software de gestión de leads pueden ayudarte a ofrecer comunicaciones personalizadas que aumenten la interacción y las conversiones.
