Design Responsive: perchè è importante?
Il design responsive ti consente di offrire un'esperienza professionale anche a chi visita il tuo sito da smartphone. Ecco perché scegliere un'interfaccia mobile-friendly
 |
| Perché il design del tuo sito dovrebbe essere responsive? |
Il design responsive è diventato rapidamente un caposaldo del Web. Ormai è indispensabile offrire ai visitatori un'esperienza coinvolgente e immersiva anche da mobile; infatti la maggior parte degli accessi (o hits) provengono sempre più spesso da da dispositivi portatili, come smartphone o tablet. Per essere professionale e in linea con gli standard odierni, il tuo sito dovrà essere accessibile su qualunque piattaforma e a qualsiasi risoluzione.
Ma rendere disponibili i contenuti non basta; occorre anche presentarli nel modo più accattivante. Il design responsive infatti ha regole specifiche, di cui parleremo più approfonditamente nei prossimi paragrafi. La grafica di un sito mobile richiede un approccio completamente diverso da quello di un layout concepito per lo schermo di un computer. Ecco perché ti sarà capitato di sentir parlare di approccio mobile first; durante la fase di creazione d un sito, si sviluppa prima la versione per dispositivi mobili, e solo in un secondo momento la sia adatta anche agli schermi più grandi, In questo modo si ha la certezza che l'aspetto del sito sia sempre pulito, omogeneo e professionale.
Ma quali sono le caratteristiche di un buon design responsive? Per capirlo, dobbiamo ripercorrere la storia dell'Internet "mobile"; dai suoi esordi al presente sempre più iper-connesso.
Storia del design responsive; così Internet diventa mobile
Internet è sempre stato orientato alla mobilità, e non sorprende quindi che abbia rivoluzionato il mondo delle telecomunicazioni nel giro di pochi decenni. I contenuti che il Web mette a disposizione dovevano poter raggiungere chiunque ed essere liberamente accessibili ovunque.
Tra la fine degli anni 90 e i primi 2000 cominciano a diffondersi i primi telefonini con tecnologia WAP (Wireless Application Protocol). Questi dispositivi oggi farebbero sorridere per quanto sono desueti, ma all'epoca rappresentavano un'innovazione, il primo passo verso quelli che sarebbero diventati gli smartphone di oggi. Grazie al protocollo WAP, i contenuti di una pagina o di un sito Web erano accessibili sotto forma di testo semplice, links e, occasionalmente, immagini ASCII.
 |
| Le pagine WAP hanno fatto da apripista al design responsive |
Tuttavia il protocollo WAP non era in grado di decifrare l'HTML (il linguaggio di programmazione standard del Web). Per rendere i loro contenuti disponibili da mobile, i developer dovevano realizzare pagine mirror, sviluppate appositamente per la tecnologia WAP.
Ma i tempi stavano cambiando in fretta. In Giappone era già stata sviluppata una tecnologia per accedere ai contenuti Internet da mobile utilizzando delle versioni "lite" dei browser; in questo modo le pagine HTML potevano essere visualizzate direttamente, senza bisogno di crearne un corrispettivo WAP.
Tuttavia restava il problema delle risoluzioni. La grafica Web fino a quel momento aveva avuto come target di riferimento gli schermi dei computer, fissi o portatili. Su schermi molto piccoli e con risoluzioni così diverse, invece, la navigazione risultava scomoda e poco intuitiva. Occorreva ripensare completamente il concetto di design alla luce di questo nuovo target variegato e multiforme.
Risoluzione e schermi portatili; la User Experience nel design responsive
Il design responsive deve moltissimo alla potenza e alla versatilità dei CSS. Grazie ai fogli di stile è possibile adattare le dimensioni di contenuti e grafica alle varie risoluzioni, semplicemente inserendo specifiche variabili grafiche nel codice. Per esempio, si possono impostare dimensioni diverse per le immagini, che sugli schermi dei pc saranno più piccole e circondate dal testo, mentre sui dispositivi mobili andranno a riempire al 100% la superficie del display.
La prima caratteristica del design responsive è proprio una concezione della user experience (ovvero l'impatto visivo del sito) che privilegia le immagini. Il loro posizionamento e la loro dimensione influiscono sulla disposizione dei blocchi di testo e degli altri elementi grafici. L'obiettivo finale è sempre rendere la navigazione intuitiva e piacevole per il visitatore.
 |
| Il design responsive deve mantenere inalterata l'estetica e il mood di un sito |
In questo senso è importante anche lavorare a fondo sull'impaginazione e il layout. Se la soglia di attenzione dell'utente di PC è bassa, quella dell'utente mobile lo è ancora di più. I contenuti non devono richiedere l'uso di sgradevoli scrollbar orizzontali, ma adattarsi automaticamente al dispositivo e presentare le informazioni in maniera chiara e immediata. Naturalmente valgono sempre le regole di impaginazione relative al peso degli elementi grafici e dei blocchi di testo; le pagine devono "respirare" e non apparire troppo affollate o caotiche.
Un ruolo fondamentale, poi, è ricoperto dal menu di navigazione. I siti responsive hanno pulsanti a comparsa che si attivano cliccando sull'icona con le tre linee orizzontali (hamburger menu); la barra di navigazione è solitamente posizionata sulla parte alta dello schermo, proprio per consentire al visitatore di muoversi agevolmente da una pagina all'altra.
Restyling o nuovo sito mobile-first?
Abbiamo visto che il design responsive prevede un vero e proprio cambio di paradigma rispetto alla grafica Web per PC. A questo punto potrebbe nascere spontanea la domanda; si può realizzare un restyling di un sito pre-esistente per adattarlo alle nuove specifiche di navigazione mobile, o è meglio puntare su un design completamente nuovo?
Ti anticipo subito che entrambe le opzioni sono praticabili, bisogna solo capire quale sia più conveniente al tuo sito. Se la tecnologia utilizzata è molto obsoleta, potresti ottenere risultati migliori puntando fin da subito a un layout completamente nuovo, che sfrutti le potenzialità dei CSS e dell'interfaccia mobile-first per ampliare il bacino dei tuoi visitatori.
Viceversa, possono bastare pochi accorgimenti strategici per dare nuova vita a un sito poco incisivo, studiando un'interfaccia mobile che lo vivacizzi, ma senza modificare troppo l'impostazione grafica di base.
Cri8ive ti aiuterà a scegliere la soluzione più adatta per la tua piattaforma, valutando il modo migliore per dare risalto al tuo sito o al tuo brand. Contattami attraverso il modulo che trovi sul sito ufficiale o mandami una mail; i servizi del Cri8ive Network sono a tua disposizione.
