WEB 04. L’importanza di essere responsive

La parola d’ordine oggi è questa. Ma cosa significa “responsive” e perchè è così importante per un sito?

Una questione di dimensioni

Nel processo di creazione di un sito si incontra subito uno “scoglio” considerevole: il nostro sito verrà visto sui computer di tutto il mondo, con una varietà di monitor a dir poco impressionante. Le dimensioni del monitor sono quanto mai variabili e così pure le proporzioni (il rapporto tra la base e l’altezza). Tutto questo viene accentuato dall’importantissima diffusione del web su smartphone, che ha una proporzione radicalmente diversa da quella del monitor pc (il primo fortemente verticale, il secondo decisamente orizzontale).

responsive-01
È evidente che con proporzioni così diverse è impossibile creare un sito che vada bene su ognuna, l’unica soluzione è dargli una misura che si adatti al monitor più piccolo (il riferimendto era il classico 1024 x 768) prevedendo che, se visualizzato su monitor più grandi, venga aggiunto dello spazio neutro (il “background”). Questo è ciò che accadeva fino a qualche anno fa, ed è il motivo per cui siti di qualche anno fa si visualizzano sui monitor moderni in dimensioni molto piccole e con un enorme background “inutile”. Visti su smartphone inoltre, i menù sono ridotti a dimensioni impossibili da consultare costringendo l’utente a un continuo “allarga e stringi” che rende di fatto la fruizione del sito impossibile.

responsive-02
Da un paio d’anni la tecnologia responsive permette di creare siti “intelligenti” che si adattano al monitor che li visualizza ma non solo: che cambiano l’ordine degli elementi della pagina per renderli sempre leggibili e fruibili. Questo effetto è particolarmente visibile sugli smartphone dove le immagini e i testi si ingrandiscono e si incolonnano e i menu spariscono sostituiti da un menu a tutto schermo per rendere la navigazione possibile senza continuamente ingrandire e ridurre le pagine.

responsive-03

Adaptive: over the top

L’evoluzione e l’integrazione della “responsività” è oggi nel concetto di “adattività“.

Un sito non solo si deve modificare nella forma per essere sempre leggibile e piacevolmente fruibile anche da uno smart phone, ma lo deve fare anche nei contenuti. Facciamo un esempio: su computer una fotogallery di 50 immagini viene visualizzata come un mosaico, piacevole da vedere e facile da consultare. Su smart phone, la stessa galleria (se il sito è responsive, naturalmente) mostrerà una fotografia sotto l’altra. Possiamo ben immaginare che 50 foto una sotto l’altra sarebbero davvero scomode da scorrere su un telefono, in questo caso un sito “adaptive” decide di far visualizzare solo 5 foto alla volta differenziando quindi i contenuti in funzione di dove sono visualizzati. Con un sito adaptive potremo quindi decidere di mostrare contenuti diversi (una foto, un testo, una gallery) su diversi device (smart phone, tablet, pc).

 

Link correlati:

Il Secolo XIX: “Mobilegeddon, il nuovo algoritmo di Google premia i siti mobile-friendly”

WIRED: “MobileGeddon, come funziona il nuovo algoritmo di Google”

Forbes: “Why Google’s Mobilegeddon Isn’t The End Of The World For Most Websites”