De vuelta en 2010, Ethan Marcotte insistió a los diseñadores y desarrolladores en practicar el “diseño web adaptable”.
“En lugar de estar construyendo diseños desconectados unos de otros para un número constantemente en crecimiento de dispositivos, podemos tratarlos como facetas de una misma experiencia. Podemos hacer que los diseños sean más adaptables al dispositivo donde son mostrados”.
Diseñando sitios web que se adaptan a cualquier dispositivo, diseñadores y desarrolladores pueden asegurar que su trabajo seguirá siendo válido en el futuro.
Ocho años después, el diseño web adaptable ha llegado a un punto crítico. Ahora es una práctica estándar al momento de crear una experiencia constante y entrelazada a lo largo de diferentes dispositivos web – incluyendo los que todavía no han sido lanzados.
Pero, ¿qué es diseño web adaptable? ¿Y cuáles son los mejores ejemplos de esta práctica?
“El 56.74% de usuarios de internet acceden mediante teléfonos celulares y tablets.”
¿Qué es diseño web adaptable?
Hablando de manera estricta, sitios web adaptables tienen 3 características definidas:
1. Queries multimedia
Un query multimedia nos permite apuntar no solo a ciertas clases de dispositivos sino a inspeccionar las características físicas del dispositivo que está siendo utilizado.
Los quieries multimedia nos permiten a los desarrolladores usar verificaciones mediante condiciones para alterar los diseños web basándonos en las propiedades del dispositivo del usuario. Esto es mucho más eficiente que simplemente definir puntos de quiebre ya que ofrece una experiencia mucho más personalizada.
2. Grillas fluidas
Cuando se crean grillas flexibles usando CSS, las columnas se reajustan automáticamente 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 de fluidos ponen el control de nuestros diseños en las manos de nuestros usuarios y de sus hábitos de navegación.
Esto permite a los diseñadores mantener una apariencia consistente a través de diferentes dispositivos. Además, ahorra bastante tiempo ya que al momento de actualizar el sitio solo se actualiza una versión del código en lugar de varias.
3. Vistas 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 el contenido dentro de él.
Dado que actualmente existen más de 8.48 billones de dispositivos únicos, esta funcionalidad permite a los desarrolladores crear diseños intemporales capaces de adaptarse a cualquier dispositivo, independientemente de su tamaño o forma.
Juntos, estos tres tipos de funcionalidades permiten a los diseñadores crear sus propios sitios adaptables.
A continuación, hemos incluido 11 ejemplos que van más allá de los criterios fundamentales para un diseño web adaptable. Cada sitio web ofrece una experiencia que se adapta al contexto único del usuario.
Ejemplos de diseños web adaptables
1. Dropbox
Dropbox ha realizado un gran trabajo utilizando grillas fluidas y visuales flexibles para diseñar sitios web adaptables sorprendentes. No solo cambia el color del tipo de letra sino también las imágenes cambian de orientación.
Dropbox ofrece una experiencia personalizada a través de cada diferente dispositivo. Por ejemplo, en un esfuerzo de prevenir usuarios que abandonan el sitio, una pequeña flecha los direcciona a leer más contenido. La misma flecha no aparece en dispositivos móviles y tablets pues se asume que el usuario naturalmente seguirá scrolleando hacia abajo debido a las opciones que ofrecen las pantallas táctiles. Así mismo, el botón de crear cuenta aparece en la vista de escritorio y desaparece en las vistas móviles y de tablets para aparecen dentro de un botón de llamado de acción pues el espacio es limitado.
2. Dribbble
El sitio web de Dribbble presenta uno de los sellos distintivos del diseño web adaptable: una grilla flexible y se compone en cinco columnas en computadoras de escritorio y dos en dispositivos portátiles y tablets.
Para prevenir que su sitio web se sienta abarrotado en dispositivos móviles, Dribbble ha removido múltiples elementos. Por ejemplo, la vista, comentarios y contadores de likes no aparecen debajo de cada elemento. También han ocultado el menú detrás de un icono de “hamburguesa” y removido la barra de búsqueda.
3. GitHub
La página web de GitHub ofrece una experiencia consistente a través de cada dispositivo. Sin embargo, hay algunas diferencias que destacan:
- Al pasar de una vista de escritorio a una tablet, el área que está encima de la tapa cambia de un diseño de dos columnas a una disposición de una sola columna, con la copia encima del formulario de registro en lugar de al lado.
- A diferencia de los dispositivos de escritorio y tablet, donde su formulario de suscripción es un enfoque central, GitHub presenta solo un botón de llamado a la acción en la vista móvil. Los usuarios deben hacer clic en la llamada a la acción para mostrar el formulario.
- Al igual que Dribbble, GitHub también ha eliminado la barra de búsqueda y escondido el menú detrás de un icono de hamburguesa en los dispositivos táctiles. Esta es una práctica bastante común, ya que ayuda a reducir el desorden en los dispositivos móviles donde el espacio es limitado.
4. Klientboost
Este es otro fantástico ejemplo de diseño web adaptable. Su sitio web carga notablemente rápido: cuatro segundos usando conexiones 3G. Más importante aún, la apariencia del sitio web de Klientboost se mantiene constante en todos los dispositivos; sin embargo, han logrado adaptar su experiencia de usuario a cada uno de ellos.
Mientras que el menú completo, que incluye el botón de llamada a la acción “Obtener propuesta” y la leyenda “¡Estamos contratando!”, se puede ver desde las computadoras de escritorio y portátiles, las tablets y los dispositivos móviles revelan versiones condensadas del menú. Los usuarios que visitan su sitio web desde dispositivos tablet muestran un icono de menú de hamburguesas y una leyenda, mientras que aquellos que visitan desde teléfonos móviles muestran el icono de menú y el botón de llamado a la acción.
5. Magic Leap
Magic Leap ha diseñado un sitio web simple y adaptable con desplazamiento parallax que da vida a sus impresionantes ilustraciones. Dado que los teléfonos celulares y las tabletas ahora son responsables del 56,74% del uso mundial de Internet, su enfoque tiene sentido.
La experiencia de usuario de Magic Leap es constante en todos los dispositivos, con una excepción: la microcopia que dirige a los usuarios a desplazarse, incluida en computadoras de escritorio y tablets, pero excluida de los dispositivos móviles, donde es natural que los usuarios se desplacen.
Incluso con una conexión 3G, su sitio web carga en siete segundos, muy por debajo del promedio global de 22 segundos. Para un sitio web con una animación adaptable, no está nada mal.
6. 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 cambian entre el escritorio y los dispositivos móviles.
En computadoras personales y tabletas, el botón de llamado a la acción está a la derecha del formulario. En dispositivos móviles, está debajo.
Del mismo modo, las ilustraciones están a la derecha de la copia en computadoras personales y tabletas, mientras que están ubicadas debajo de la copia 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 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.
7. Smashing Magazine
La revista Smashing 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 con lettermark en tablets y dispositivos móviles.
El sitio web de Smashing Magazine también es un brillante ejemplo de diseño adaptable. El menú que se muestra a los usuarios de computadoras de escritorio presenta etiquetas e iconos. Y es genial cómo, en lugar de utilizar un icono de menú corriente, han optado por un botón de llamado a la acción con la palabra “menú” y un icono de búsqueda. Los nativos digitales no tienen problemas para navegar en sitios web desde dispositivos de mano, pero otras generaciones no necesariamente saben qué representan los iconos de hamburguesas.
Su sitio web 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.
8. 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 táctiles.
El sitio web de Slack también está diseñado para ser fácil de usar. Por ejemplo, sus botones de llamado a la acción abarcan toda la columna en tablets y teléfonos móviles, lo que ayuda a los usuarios a evitar hacer clic en el hipervínculo “Iniciar sesión” debajo.
9. Treehouse
Treehouse ofrece una experiencia perfecta en todas las plataformas. Su menú se hace progresivamente más pequeño en todos los dispositivos: las computadoras de escritorio y portátiles tienen un menú de cuatro elementos, las tablets tienen un menú de dos elementos y un icono de hamburguesa, y los teléfonos móviles ofrecen un menú e icono de un solo elemento.
Sus campos de formulario experimentan el mismo cambio. Se presentan en dos columnas en computadoras de escritorio y portátiles y una columna en tablets y teléfonos móviles.
10. WillowTree
Al igual que otras compañías, WillowTree incluye un menú completo en dispositivos de escritorio y un menú condensado en dispositivos portátiles. Pero a diferencia de otros, introdujeron una barra de navegación estática en la parte superior de la página que crea una experiencia más agradable para los usuarios con dispositivos portátiles. También han agregado un llamado a la acción basado en texto en la versión móvil de su sitio web para mayor conveniencia.
Al igual que otros sitios web adaptables, la cuadrícula que han construido para presentar los logotipos de los clientes es extremadamente flexible. Se colapsa en cinco columnas en computadoras de escritorio, a cuatro columnas en tablets y a dos columnas en teléfonos móviles.
Al igual que en Treehouse, el área que está arriba de la página se convierte de dos columnas en el escritorio a una columna en el móvil, con el botón de llamada a la acción que se desplaza desde al lado de la copia hasta debajo de ella.
11. 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 táctiles.
Al pasar de la tablet 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 en el uso de imágenes flexibles. 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 de características se recortan usando una proporción de 16: 9.
¿Cuál es tu sitio web adaptable favorito?
