5 consejos para clavar un diseño ‘mobile-first’

El ordenador continúa siendo uno de los dispositivos informáticos más populares. Pero ya no representan la única forma de conectarse con el mundo online. Con el boom de teléfonos móviles y tabletas, las posibilidades para navegar se han multiplicado. A finales de 2016, la consulta de internet desde terminales móviles consiguió sobrepasar a las consultas realizadas desde el escritorio por primera vez en la historia, representando más de la mitad del uso de internet mundial. No hay duda de que las tendencias de consumo han cambiado… y los profesionales del diseño se ven obligados a evolucionar conforme a una nueva realidad, cimentada sobre los hábitos de sus clientes. Las necesidades y componentes de las páginas web se han transformado durante los últimos años al tiempo que han ido variando los gustos de los usuarios. Lo que se lleva ahora es la estrategia mobile-first.

Eso sí, el diseñador web no tiene que tomarse el mobile-first como una moda más, sino que debería comprometerse con ello. Porque la gente está ahí. Está en el móvil. Las visitas se realizan desde ahí. Desde teléfonos y tabletas. España es el país con más smartphones por cabeza. El móvil se plantea como futuro y se vive como presente. Pero, ¿cómo implementar esa estrategia que pone al móvil por delante de todas las cosas? En Silicon.es os dejamos cinco pistas:

1. Busca una idea de partida y simplifícala. Acceder a la web desde un dispositivo móvil, que tiene unas características muy específicas como por ejemplo contar con una pantalla más reducida que el ordenador tradicional, puede ser toda una aventura (y de lo más caótica) si el diseño de la página no se ha hecho a conciencia, pensando en los nuevos terminales. Evítalo. Simplifica tus ideas y apuesta por creaciones más limpias y minimalistas. La diferencia principal entre la estrategia mobile first y el fenómeno responsive de adaptar una web de escritorio a las pantallas pequeñas es que se parte directamente de la versión móvil. No se trata de ir modificando menús, eliminando imágenes o variando el número de columnas de modo que la página que ya existía para el PC se vea mejor en el móvil, sino que el plan sería dar prioridad al móvil. Y, a continuación, hacer crecer el sitio web (o incluso la web app ) para aprovechar las ventajas de otros formatos superiores de pantalla.

Para esto se antoja fundamental tener muy claro antes de empezar qué es lo que no puedes dejar de ofrecer a los internautas en un entorno móvil. Convierte la información básica en un diseño optimizado para smartphones y tabletas. Y dirige al usuario hacia el objetivo marcado de antemano, ya sea éste darle a conocer tu catálogo de trabajos, venderle algo, mostrarle horarios de atención al público o destacar el formulario de contacto.

2. Ponte en la piel de los usuarios. Prueba. Añade y quita. Optimiza. Elimina lo no intuitivo. Empatiza. No te quedes en la teoría. Puede que atesores una idea muy clara de lo que quieres hacer, pero que al final la forma de ejecutarla no sea la más apropiada. Así que asegúrate de que todos los pasos que das en tu diseño van a acabar siendo entendidos por los usuarios. Esto es, piensa en la experiencia del internauta móvil. Cuando se trabaja para la web móvil no tiene sentido plantear elementos que se activarán sólo si se pasa el ratón por encima, ya que la gente se ayudará de sus dedos. Estos dedos, además, no serán capaces de pinchar en enlaces que se entregan demasiado juntos o en botones de líneas muy delgadas. Y eso no es todo. Grábate a fuego que ni rellenar un formulario con más de una decena de campos ni meter uno por uno los datos de la tarjeta bancaria para abonar una compra se convertirán en el pasatiempo preferido de quien navega desde el teléfono. Tampoco es divertido bucear por textos inmensos.

Para resolver estos contratiempos que en el ordenador no existen y garantizar que tu proyecto funcione en todo tipo de dispositivos, incluyendo los móviles, hay una serie de guías útiles para documentarte que deberías ojear. Diseña pensando en el usuario final y potencia su comodidad. Muestra zonas claras y grandes que inviten a pulsar. Siempre y cuando estén disponibles, aprovecha las APIs propias de los sistemas operativos móviles que ya facilitan los pagos, tipo Apple Pay y Android Pay. Haz lo propio con los servicios de geolocalización y ya verás cómo usar tu página web deja de ser un tormento.

3. Céntrate en la experiencia de navegación. Si quieres triunfar con el diseño de páginas consultables desde terminales móviles, resérvale un lugar especial en tu planteamiento a la navegación. La navegación es uno de los puntos más críticos de cualquier proyecto de diseño web. El famoso icono de hamburguesa que muestra y oculta todos los elementos de un menú es alabado y criticado por expertos y estudios a partes iguales, así que estudia todas las soluciones posibles para tu web. Busca respuesta a dudas razonables como: ¿qué elementos hay que mostrar para recoger todo el contenido que quieres ofrecer?, ¿va a hacer falta algún subelemento en el menú?, ¿cuántos?, ¿cómo accederán los usuarios a ellos?, ¿tienen sentido incluir múltiples secciones en el móvil? Existe la opción de los menús laterales. La de los menús que ocupan toda la pantalla superponiéndose al contenido. La de los botones que se colocan en la parte inferior… Tomes la decisión que tomes, analiza resultados para saber si estás consiguiendo que los usuarios hagan justo lo que tú querías que hiciesen en tu web.

4. Optimiza todo lo que puedas cada uno de los recursos que uses. No nos cansaremos de repetirlo una y otra vez, así que tú tampoco lo hagas: el diseño sobre el papel no es nada. O, al menos, es tan sólo uno de los procesos que dan forma al proyecto final. Si creas una composición fantástica, realmente bella a la vista, pero después resulta que rematas tu trabajo subiendo varias imágenes de 4.000 píxeles de ancho para que se carguen en una pantalla de 320 píxeles, o has añadido contenido que pesa 4 GB cuando hoy en día es posible que algunos usuarios sólo puedan conectarse sobre 3G, tanto esfuerzo puesto por el camino se irá al traste. Decisiones como éstas son síntoma de que lo estás haciendo mal. Utilizar fotografías más pequeñas o recursos que no consuman toda la tarifa de datos son pautas de sentido común. Pero lo cierto es que a veces aquello que parece lo más sensato se pasa por alto.

En los diseños mobile-first, opta por miniaturas optimizadas. Escribe con tipografías y entrelineados legibles. Y no cargues archivos de estilos o scripts no requeridos para la página en la que uno está. ¡El sitio que has creado tiene que volar! Cuanto menos pese, mucho mejor para tus visitantes (y para ti). Otra cosa es la versión de escritorio. Cuando diseñes para el ordenador, donde la gente suele utilizar conexiones de fibra, sí que se te permitirá dar rienda suelta a animaciones y decoraciones varias. Sin pasarse, claro.

5. Aférrate a la técnica de progressive enhancement. O como diríamos en castellano puro: adopta un enfoque de mejora progresiva. Ten en cuenta que hay personas que querrán entrar en tu página y consultar su contenido, pero que no disponen del dispositivo más moderno o del software más actualizado del mercado. Y que a otros les ocurrirá todo lo contrario. Tu público es diverso, no plano. Y debes intentar satisfacer a todos sus integrantes. El hecho de haber abrazado la filosofía mobile-first y empezar por la versión móvil de tu página web para responder a las tendencias de los consumidores no quiere decir que tengas que hacer lo mismo que con las webs responsive pero al revés. Cuando diseñes para el móvil no te vayas a lo fácil pero anodino. Y cuando pases a plantear el diseño de escritorio, no te conformes simplemente con añadir columnas a los contenidos, cambiar a imágenes más grandes y dejarlo todo bien centradito. Puedes y debes aprovechar las capacidades de los diferentes dispositivos y sus pantallas para ofrecer una gran experiencia de uso al visitante.

Cuando la parte móvil ya esté solventada, tendrás que trabajar en el otro frente, en el de las computadoras. Sin perjudicar la accesibilidad, ofrece una página lo más visual posible (algo que se resuelve metiendo imágenes o vídeos de fondo), que incorpore nuevas interacciones (ahora el internauta se moverá a golpe de teclado y ratón), con mayor contenido (no hace falta resumir tanto porque tus usuarios leerán la web en mayor formato y sentados) y fruto de otras herramientas, APIs web o librerías JavaScript.