En los últimos 8 años el diseño web responsive ha alcanzado una masa crítica. Ahora es una práctica estándar. Crear una experiencia uniforme y adaptada a todos los dispositivos, incluidos los que aún no se han lanzado.
Pero, ¿qué es el diseño web responsive? ¿Y cuáles son los mejores ejemplos que podemos ver en la práctica?
¿Qué es un sitio web responsive o adaptable?
Estrictamente hablando, los sitios web responsive tienen tres características definitorias:
1. Media queries (consulta de medios)
«Los media queries nos permiten enfocar no solo ciertas clases de dispositivos, sino también inspeccionar las características físicas del dispositivo que muestra nuestro trabajo», explica Ethan Marcotte.
Los media queries permiten a los desarrolladores utilizar comprobaciones de condición. Para alterar diseños web basados en las propiedades del dispositivo del usuario. Esto es superior a la simple definición de puntos de corte (breakpoints). Ya que es una experiencia más adaptada para el usuario.
2. Fluid grids (cuadrículas fluidas)
Cuando se crean cuadrículas flexibles con .CSS, las columnas se reorganizan automáticamente para ajustarse al tamaño de la pantalla o ventana del navegador. Ya sea que el usuario esté en una computadora de escritorio de 21 pulgadas, una computadora portátil de 13 pulgadas, una tableta de 9.7 pulgadas o un teléfono móvil de 5.5 pulgadas.
«Los diseños fluidos [….] Ponen el control de nuestros diseños firmemente en las manos de nuestros usuarios y sus hábitos de navegación», explica Marcotte.
Esto permite a los diseñadores mantener una apariencia y sensación coherentes en múltiples dispositivos. Además, ahorra a todos tiempo y dinero al permitir que los diseñadores actualicen una versión del sitio web en comparación con muchas otras.
3. Imágenes flexibles
Marcotte se refiere aquí al uso de código que evita que los archivos multimedia enriquecidos excedan las dimensiones de sus contenedores. A medida que el «contenedor flexible se redimensiona a sí mismo», explica, también lo hace la pieza visual dentro de él.
Dado que actualmente existen más de 8.48B dispositivos únicos. Esta funcionalidad permite a los equipos crear diseños intemporales. Capaces de adaptarse a cualquier dispositivo, independientemente de su tamaño o forma.
En conjunto, estos tres tipos de funcionalidad permiten a los diseñadores crear sitios web responsive.
Pero, explica Marcotte, eso es solo el comienzo:
«Los fluid grids, las imágenes flexibles y los media queries son los tres ingredientes técnicos para un diseño web responsive, pero también requiere una forma diferente de pensar. En lugar de poner en cuarentena nuestro contenido con experiencias dispares, específicas del dispositivo, podemos utilizar los media queries para mejorar progresivamente nuestro trabajo en diferentes contextos de visualización».
A continuación, comparto algunos ejemplos que van más allá de los criterios fundamentales para un diseño web responsive. Cada sitio web ofrece una experiencia que se adapta al contexto único del usuario.
11 ejemplos de diseño web responsive que deberías ver
1. Dropbox
Dropbox ha hecho un gran trabajo al utilizar una grilla fluida e imágenes flexibles para diseñar un sitio web destacado y receptivo. El color de la fuente no solo cambia para adaptarse al color de fondo cuando se cambia del escritorio a los dispositivos portátiles, sino que la imagen también cambia de orientación.
Considerando el contexto, Dropbox ofrece una experiencia personalizada en cada dispositivo. Por ejemplo, en un esfuerzo por evitar que los usuarios salten, una pequeña flecha indica a los usuarios del escritorio que se desplacen hacia abajo para ver más contenido. La misma flecha está ausente de los dispositivos de mano. Ya que se supone que los usuarios se desplazarán de forma natural en un dispositivo con capacidades de pantalla táctil. Del mismo modo, su formulario de registro es visible en los dispositivos de escritorio, pero está escondido detrás de un botón de llamada a la acción en las tabletas y dispositivos móviles, donde el espacio es limitado.
2. Shopify
La experiencia de usuario de Shopify es constante en todos los dispositivos. Solo el botón de llamada a la acción y las ilustraciones cambiaron entre el escritorio y los dispositivos móviles. En computadoras personales y tabletas, el botón de llamada a la acción está a la derecha del campo de formulario. En dispositivos móviles, está debajo.
Del mismo modo, las ilustraciones están a la derecha del «copy» en computadoras personales y tabletas. Mientras que están ubicadas debajo del mismo en dispositivos móviles. Al igual que la mayoría de los sitios web, el menú de Shopify también se reemplaza por un icono de «tipo hamburguesa» en dispositivos portátiles.
A pesar de usar carruseles de imagen para mostrar a sus clientes, han logrado mantener la velocidad de carga de su página por debajo de cinco segundos, lo cual es bastante impresionante.
3. Smashing Magazine
La revista «Smashing Magazine» va más allá y ofrece una experiencia personalizada en cada dispositivo. Su sitio web presenta un diseño de dos columnas, un menú completo y una marca de combinación en el escritorio, que se convierte en un diseño de una columna y un menú condensado en tabletas y dispositivos móviles.
El sitio web de Smashing Magazine también es un brillante ejemplo de diseño inclusivo. El menú que se muestra a los usuarios de computadoras de escritorio presenta etiquetas e íconos. Y me encanta cómo, en lugar de utilizar un ícono de menú corriente, han optado por un botón de llamada a la acción con la palabra «menú» y un ícono de búsqueda. Los nativos digitales no tienen problemas para navegar en sitios web desde dispositivos móviles. Pero otras generaciones no necesariamente saben qué representan los iconos «de hamburguesas».
Su sitio web también se carga en solo 2 segundos en dispositivos con internet 3G, que según GSMA conformarán el 70% de las conexiones móviles hasta 2020. Esto mantiene su tasa de rebote baja y evita que los usuarios se frustren.
4. Slack
La marca de Slack es conocida por ser simple y humana. No es sorprendente que su sitio web siga las mismas pautas. Su grilla flexible se adapta fácilmente a las vistas de todos los tamaños y formas. Por ejemplo, mientras que los logotipos de los clientes se presentan en un diseño de tres columnas en computadoras de escritorio y portátiles, se muestran en un diseño de una sola columna en dispositivos de mano.
El sitio web de Slack también está diseñado para ser fácil de usar. Por ejemplo, sus botones de llamada a la acción abarcan toda la columna en tabletas y teléfonos móviles, lo que ayuda a los usuarios a evitar hacer clic en el hipervínculo «Iniciar sesión».
5. Wired
El sitio web de WIRED tiene un diseño dinámico con varias columnas y una barra lateral en los dispositivos de escritorio. Que se convierte en una sola columna en dispositivos de mano.
Al pasar de la tableta a los dispositivos móviles. Su menú se reduce para incluir solo su logotipo, un icono de menú y un enlace para suscribirse. En un esfuerzo por mantener las cosas simples, la funcionalidad de búsqueda y la capacidad de filtrar el suministro de noticias de WIRED por sección no está disponible en el móvil.
Un área donde WIRED brilla es con las imágenes flexibles. Sus imágenes destacadas cambian en las diferentes plataformas. En las computadoras de escritorio y portátiles, las imágenes varían entre cuadrados y rectángulos, lo que permite a los usuarios explorar con los ojos. Sin embargo, en dispositivos de mano, todas las imágenes destacadas se recortan usando una proporción de 16:9.
Seguro existen otro montón de ejemplos. ¿A ti que te parecen?. No olvides que estoy por acá si necesitas ayuda con el diseño web responsive de tu proyecto.
Digital Marketing Manager en Orienteed. Consultor en Estrategias de Inbound Marketing y Comunicación Digital. Diseñador Web, especializado en Usabilidad y UXp. Coach Ontológico Profesional certificado. Director de Mauna Media.