La prima volta che ho sentito parlare del design responsive fu sul finire del 2012.
Ero a Roma, partecipavo a un workshop in cui Adobe presentava la sua nuova suite che comprendeva Dreamweaver CC.

Vi dico la verità, ero lì per Photoshop, li per lì non ero neppure troppo interessato a questo programma della suite perché preferisco scrivere direttamente il codice in un editor di testo, senza usare interfacce WYSIWYG.
Ma a un certo punto, anche se il programma era in versione beta... ci hanno detto che stavamo per assistere a qualcosa che avrebbe rivoluzionato il nostro modo di approcciarci allo sviluppo delle pagine web.
Cavoli, avevano ragione.

Da li a poco gli sviluppatori web avrebbero potuto pensare delle impaginazioni che si riorganizzavano a seconda del dispositivo utilizzato dai navigatori.

A quasi cinque anni da quella prima visione, devo dire che è stato un cambiamento che ha portato grandi opportunità, e non solo in termini di sviluppo e di indicizzazione, ma anche per come ha migliorato la fruizione dell'informazione su web: un tempo si navigava solo da computer, oggi invece abbiamo nell'ordine anche:
- Smartphone
- Tablet
- TV
- Sistemi ibridi
- Display delle auto
- Game Console
...e anche chi vuole stampare le pagine!

Fatta questa premessa, il design responsive per il web oggi è uno standard.

 

(ph. Stéphanie Walter)


Le ragioni sono molteplici: al di là delle considerazioni sociologiche, la prima fra tutte è il largo uso che facciamo di dispositivi mobili, ormai alla portata di tutti.
Poi da considerare l'algoritmo di Google, che da diverso tempo a questa parte, "premia" i siti mobile friendly, specie se sviluppati con questa tecnica.

Le sue caratteristiche fondamentali sono le seguenti:
 

Breakponts: l'adattabilità

Lo dice la parola stessa: sono dei punti di rottura, dei limiti, dei paletti.
A seconda della sua larghezza, la finestra del browser ricade all'interno della "fascia" delimitata dai breakponits, e il layout della pagina va ad adattarsi in una maniera che può essere studiata e definita specificatamente per quel monitor.
La vista risulterà molto diversa da monitor con dimensioni differenti... ma il sito risulterà sempre lo stesso, così come sempre lo stesso sarà il "nucleo" dei contenuti visualizzati nelle pagine.

 

Definizione dei contenuti da mostrare

Si può scegliere di mostarre o meno dei contenuti a seconda della vista e del dispositivo del navigatore, scegliendo ad esempio di nascondere (o meglio ancora, di non caricare) i contenuti meno importanti per le risoluzioni più piccole.
Ogni vista è oggetto di uno studio approfondito, per il quale si utilizzano modelli wireframe e mockup.
Ci avete mai fatto caso che nel 99% dei casi, il menu di navigazione dei siti web aperti con un cellulare è a scomparsa?
La vista da desktop valorizza le immagini grandi, mentre per il cellulare bisogna creare dei bottoni grandi, con una superficie sufficiente per poter cliccare col polpastrello dell'indice senza dover prendere la mira o fare zoom...
Una stessa infografica, se sviluppata in orizzontale, deve essere preparata anche in versione verticale, per non renderla illegibile dagli schermi più piccoli.
Gli stessi loghi sono diventati molto più semplici negli ultimi anni, per poter essere efficaci e ugualmente identificabili indipendentemente dal supporto da cui vengono visualizzati. Vogliamo fare un esempio?

Anche se sono un ex bambino degli anni ottanta e quelli sulla sinistra evocano in me bei ricordi, avrei serie difficoltà a "parcheggiare" uno dei vecchi loghi RAI in una Favicon (che per chi non lo sapesse, è quell'iconcina che si vede in alto nella barra del browser e che identifica una pagina web).

 

Per finire, vi lascio allo strumento di Google che vi servirà a testare se il vostro sito è ottimizzato per poter essere visto correttamente da mobile.
Attenzione... sottolineo il visto correttamente! L'analisi sui tempi di caricamento, sul peso delle immagini, sull'organizzazione gerarchica dei contenuti merita sempre un discorso a parte.


 

Andrea Torre
web designer
Toccategli tutto, ma non la musica che ascolta mentre è al lavoro!