2. Repte. El disseny d’interfícies web

2.7. El disseny adaptable o responsiu

Des de 2016, el nombre d’usuaris de mòbil a escala internacional ha superat els dos mil milions. De fet, més del 60% de les cerques en línia ara provenen d’un dispositiu mòbil. La ràpida introducció dels dispositius mòbils i el seu ús cada vegada més intens comportat la necessitat de dissenyar interfícies que siguin totalment funcionals, independentment del dispositiu des del qual s’accedeix a aquestes (per exemple, un ordinador portàtil, un mòbil o una televisió intel·ligent). El disseny web responsiu sorgeix d’aquesta necessitat.

Per exemple, un lloc web mòbil responsiu inclou elements de disseny, com ara:

• Text fàcilment llegible sense requerir zoom.
• Espai adequat per a interaccionar amb elements usant una interfície tàctil.
• Interfície completa sense desplaçament horitzontal.

El disseny responsiu ofereix tres avantatges principals:

1. Millora l’experiència i la fa més consistent per a qualsevol usuari i en qualsevol dispositiu.
2. Augmenta la capacitat de resposta del lloc web i assegura que les persones que usen un dispositiu mòbil solament estiguin veient la informació més essencial, millorant així la usabilitat de la pàgina.
3. Augmenta la visibilitat en els cercadors. Una web que ofereix una experiència efectiva i flexible és prioritzada pels motors de cerca.

Les claus del disseny són:

Els elements tindran un espaiat i una proporció consistents, i es podran ajustar a una amplada de pantalla relativa. La tècnica consisteix a usar percentatges per a expressar les amplades de les divisions de la pàgina. És a dir, haurem de determinar si una divisió ha de ser el 100% de la pàgina o més petita. No obstant això, de vegades no volem que una divisió es dimensioni en un monitor molt gran. En aquests casos, podem aplicar una propietat d’amplada màxima per a limitar la grandària a aquesta dimensió.

El text i les imatges flexibles s’ajusten a l’amplada del disseny d’un lloc web, d’acord amb la jerarquia de contingut establerta en el full d’estil. D’aquesta forma, el text és llegible independentment del dispositiu de l’usuari final. Amb un contenidor flexible (dins de la quadrícula), el text es pot ajustar amb un augment de la grandària de la font en dispositius més petits. Per a garantir que les imatges siguin fluïdes, cal crear un estil que estableixi una grandària màxima per a l’escalat de les imatges. Això farà que la imatge respongui i es dimensioni perquè mai superi un cert percentatge de la seva grandària original i així evitar que la qualitat es vegi afectada.

No obstant això, de vegades, quan es dimensiona per percentatge, hi ha altres elements que s’han de canviar per a certes pantalles o finestres de grandària. Per exemple, la grandària del text dels elements de navegació pot ser massa gran en les grandàries més petites, o podem preferir que s’apilin alguns elements o divisions un al costat de l’altre en una grandària més petita. També es poden incloure consultes per a ajustar els elements depenent de l’orientació de la pantalla (vertical o horitzontal) i per a diferents tipus de mitjans, com ara la impressió o la televisió. Per a això, s’utilitzen les consultes de mitjans. Les consultes de mitjans són simplement estils o regles especials que solament s’implementaran en una grandària determinada, permetent múltiples dissenys utilitzant la mateixa pàgina web codificada en HTML.