Nuestro compañero inseparable y cómplice en cualquier aventura es también una de nuestras principales ventanas hacia el mundo. Con su tamaño portátil, su movilidad y su pequeña pantalla lo utilizamos más para consultar información, comunicarnos y navegar la red que cualquier otro dispositivo. Sin embargo, no todas las marcas han evolucionado para atender a este principio.
Mucho escuchamos que los sitios deben estar diseñados para que funcionen y se vean bien en dispositivos móviles (o en general de dimensiones reducidas), aquí es donde aparecen usualmente dos conceptos que utilizamos casi como sinónimos: responsivo y mobile friendly. Si bien el concepto que buscan atender es muy similar, la aproximación que hacen y el tipo de problemas que intentan resolver son distintos y complementarios.
En ambos casos, la preocupación y reto a vencer son el mismo: los usuarios cada vez más son propensos a navegar en dispositivos móviles y los recursos disponibles para estos dispositivos son muy distintos que los que se tienen en los equipos de escritorio para los que estamos acostumbrados a diseñar. Y no es difícil ver que los recursos son muy distintos, empezando por el espacio y las herramientas de interacción (teclado, mouse, etc.), el poder de cómputo, las plataformas y software disponible (como flash), la velocidad de conexión, la cantidad de sensores, el contexto en que el usuario se encuentra, la razón de uso y muchos más. Es decir, cuando no buscamos que nuestros sitios estén adaptados a dispositivos móviles, estamos pensando que el usuario tiene los mismos elementos y capacidades en su teléfono que en una computadora personal, y eso nos tendría que hacer dudar de nuestro sentido común.
Si empezamos por los conceptos que mobile friendly nos trae lo que vemos es que se trata de una especie de marco de trabajo que hace énfasis en las diferencias entre los ambientes desktop y móvil, y nos sugiere tomar en cuenta lo que sucede del lado tecnológico para atender mejor a nuestro usuario. En general nos invita a tomar en cuenta cosas como:
- Velocidad de carga: hacer los sitios ligeros considerando que las conexiones suelen ser más lentas y la paciencia menor (esos famosos 8 segundos, se vuelven 3 según Google)
- Legibilidad: cuentas con alrededor de un quinto del espacio que tienes en desktop
- Facilidad de uso: no es común que un usuario quiera hacer algo muy complejo en móvil, así que mantén lo importante accesible y usable, no desperdicies el espacio con menús
- Longitud: hay que mantenerlo breve, minimizar la cantidad de scroll que tiene que hacer un usuario (aunque las redes sociales nos hayan acostumbrado a desplazar nuestro dedo por la pantalla una y otra vez)
- Cuida las plataformas: el software disponible en los móviles no es tan basto ni potente como el de las desktops, evitar usar flash, elementos gráficos de alta complejidad o procesos pesados del lado del usuario
Es decir, este marco de trabajo lo que nos dice en pocas palabras es que nos aseguremos de que nuestro sitio funciona y se puede utilizar en dispositivos móviles.
Desde la perspectiva responsiva vemos más elementos orientados al usuario. La llamamos responsiva porque responde al contexto en que está, cambiando para adaptarse, de modo que no es que el sitio sirva, sino que el usuario lo pueda utilizar del mejor modo posible. Para esto, normalmente es necesario tener dos sitios y que un pedazo de código decida cuál desplegar basado en ciertas reglas o un sitio diseñado y codificado de una forma muy inteligente e ingeniosa que le permita transformarse según las características del dispositivo, en cualquier caso es un extra administrativo y operativo que tenemos que considerar para poder servir mejor al usuario.
El responsivo está pensando en tener una experiencia más adaptada al usuario y su dispositivo y se vale de herramientas como:
- Elementos nativos: utiliza los elementos del sistema operativo del dispositivo para dar una experiencia de uso mejor (lo que significa entonces que hay que pensar en los dispositivos soportados)
- Imágenes optimizadas: en general, comprimidas o re escaladas. La pantalla es más chica, podemos sacrificar calidad por velocidad.
- Cambios en el contenido: un sitio responsivo va a desaparecer o aparecer contenido según el dispositivo, cambiar el orden en que las cosas suceden o incluso suponer cosas del contexto del usuario
- Navegación: la navegación es más corta y resumida, con elementos clave a la vista y alcance y elementos secundarios ocultos para aprovechar el espacio de la pantalla. Igualmente, los elementos visuales como separadores y marcos cambian para dar una experiencia de navegación más limpia
Es decir, el sitio se adapta a lo que tiene disponible para que la experiencia sea más parecida a lo que el usuario está esperando de un dispositivo móvil.
Y más nos vale irnos acostumbrando a trabajar con estos conceptos. Es más probable que dejemos de diseñar para desktop y que los usuarios de desktop tengan que acostumbrarse a sitios que se ven innecesariamente escalados (cosa que ya pasa con algunos) a que dejemos de pensar en móvil, por buenas que sean las aplicaciones que pongamos disponibles para los usuarios.
¿Tú diseñas web pensando en móvil? ¿Tus sitios están diseñados para dar la bienvenida a los usuarios de dispositivos móviles? ¿Tienes idea de cuántos usuarios te visitan utilizando qué tipo de dispositivo?
