L’arribada dels smartphones va suposar una autèntica revolució en el món del disseny web. De cop, tots volíem ser els primers a crear llocs web amb un disseny web responsive. Semblava cosa de màgia: redimensionar el navegador feia que tot el web s’adaptés a la nova resolució, fins i tot canviant-ne l’estructura.
Quan ho mostràvem als clients, encara que ara sembli estrany, sovint quedaven bocabadats. No fa tants anys d’això, i avui dia ja és una pràctica totalment estesa.
Tot i així, encara queda molta feina per fer dins del disseny web responsive o adaptatiu. No n’hi ha prou amb utilitzar un framework CSS com Bootstrap i esperar que faci tota la feina per nosaltres. Si volem connectar amb l’usuari final, hem d’oferir-li una experiència d’usuari adaptada al seu dispositiu i, per aconseguir-ho, cal entendre com interactua amb ell. És fonamental captar la manera com el visitant espera navegar pel nostre web.
Si l’usuari navega des d’un ordinador de sobretaula, el ratolí serà l’eina principal de navegació. En canvi, si accedeix des d’un smartphone, la interacció serà tàctil i, per tant, hem de facilitar aquesta experiència en el nostre disseny web.
Claus per a un bon disseny web responsive
Menú de navegació
És essencial que el menú de navegació sigui fàcil d’utilitzar per a l’usuari. Ho podem aconseguir amb un botó que desplegui el menú del nostre disseny web, ja sigui des d’un lateral o cap avall. Així, optimitzem l’espai i mantenim l’ordre per a l’usuari.
Imatges adaptables i coherents
Hem d’assegurar-nos que les imatges del nostre disseny siguin realment adaptables. Han de veure’s correctament tant en una pantalla de 27″ com en un iPhone.
Tot i que això és bàsic, sovint s’oblida un aspecte clau: la coherència de les proporcions. Les imatges han de ser coherents amb l’orientació del dispositiu o pantalla. Si en la versió d’escriptori utilitzem una imatge massa panoràmica, en un smartphone pot quedar reduïda a una franja molt estreta i ampla, cosa que habitualment no té gaire sentit.
Per això, el més recomanable és oferir un tall intermig o bé substituir la imatge en la versió per a mòbil.
Ordre i jerarquia
L’ordre en què col·loquem cada secció del nostre disseny web és fonamental. Quan adaptem el web a una mida de smartphone, la majoria de continguts quedaran en una sola columna, un sota l’altre. Cal planificar l’ordre en què volem que l’usuari visualitzi les seccions, situant les més importants tan amunt com sigui possible.
Menys és més
Seguint la lògica anterior, el més recomanable quan dissenyem per a pantalles de mòbil és eliminar les seccions que no siguin rellevants per als usuaris que accedeixen des d’aquests dispositius. Per exemple, els típics peus de pàgina es poden suprimir completament o, com a molt, deixar-hi només una línia amb la informació de contacte.
Utilitza totes les eines disponibles
Quan dissenyem l’experiència de navegació per a mòbil, cal tenir en compte totes les funcionalitats addicionals que ofereix. Per exemple, si a la versió d’escriptori hi ha un mapa de contacte, a la versió mòbil podem afegir un botó per obrir el navegador GPS. També podem incorporar botons de trucada directa per facilitar la interacció.
Altres dades d’interès
Actualment, les dades mostren que ja hi ha més usuaris que visiten webs des de dispositius mòbils que des d’escriptori. Les xifres són: 51% de visites des de mòbil, 42% des d’escriptori i un 7% restant des d’altres dispositius.
- 51% de visites des de mòbil
- 42% de visites des d’escriptori
- 7% utilitzen altres dispositius
