Design responsive, perché è importante

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.

Cri8ive Blog - Hello, World...

Nasce il Cri8ive Blog, dove le idee e la creatività trovano voce e colore.

Benvenuto, Cri8ive Blog. 

Fa uno strano effetto ritrovarmi a scrivere nuovamente su una piattaforma personale, dopo quasi vent'anni di scrittura per conto terzi. Negli ultimi due decenni ho curato i testi di portali, siti e magazine online, e firmato articoli, recensioni e newsletter. Ho imparato a destreggiarmi con la SEO e mi sono dedicata senza sosta al copywriting, in italiano e in inglese. L'idea di un blog personale c'era, ma non riusciva a trovare una sua forma. 

Internet è una realtà illimitata. Si stima che ogni ora vengano create dozzine di nuove pagine, che trattano gli argomenti più diversi. Intimidita da questo "mare magnum" in cui avrei dovuto emergere, non riuscivo a prendere una decisione. Che taglio avrebbe dovuto avere il mio blog? Quali argomenti avrei portato? E che impostazione dare agli articoli? Era meglio scrivere contenuti più tecnici, come recensioni o articoli informativi, oppure riflessioni personali? Nel corso degli ultimi due decenni ho fatto qualche tentativo sporadico di organizzare le idee. Ma, per un motivo o per l'altro, quegli esperimenti avevano tutti vita breve. Mancava un disegno coerente e organico alla base, un progetto solido a cui dedicare tempo ed energie.

Oggi quel progetto c'è, e spiega le ali nel nuovo scintillante sito di Cri8ive (www.cri8ive.it). Un sito che non è solo una vetrina e un portfolio dei miei lavori, ma un'autentica piattaforma multimediale dedicata a ciò che mi appassiona; la comunicazione e la grafica applicate al Web.

Più nello specifico, Cri8ive Blog parlerà di...

Novità Cri8ive: le mie nuove lavorazioni e i progetti in cantiere.

Contenuti digitali: una serie di articoli informativi sulla creazione di contenuti. Ma anche approfondimenti, novità rilevanti per i creator, gli ultimi trend e le nuove sfide di questo ambito così frenetico e in continua evoluzione.

Software e tecnologia per creativi: recensioni di suite grafiche, programmi di fotoritocco o video editing, plugin per Wordpress e ogni genere di software che non possono mancare nell'arsenale di un content creator. Su Cri8ive Blog troverete anche le schede dettagliate delle ultime novità tecnologiche per creativi; computer, tavolette grafiche, stampanti e fotocamere.

Arte & Design: eventi, iniziative e manifestazioni dedicate al mondo dell'arte, della grafica e del design in tutte le sue sfaccettature. Non mancheranno articoli di approfondimento su tecniche e stili, con uno sguardo lungo anche sull'attualità, e soprattutto sui diritti degli artisti (sempre più calpestati dall'insorgere dell'Intelligenza Artificiale).

Intrattenimento e Cultura: recensioni di libri, film e serie TV, di ieri e di oggi. Non solo romanzi, ma anche manuali tecnici, fumetti e graphic novel. 

Editoriali: una serie di riflessioni e scritti personali in cui "dico la mia" su argomenti che mi stanno particolarmente a cuore, o che mi riguardano più o meno direttamente.

Cri8ive Blog oggi prende il volo, e sono convinta che andrà lontano, proponendovi contenuti sempre interessanti e vari. Ma un blog senza un pubblico è una goccia che si perde nel mare. Per questo vi invito di cuore a interagire; lasciate i vostri commenti, oppure condividete i post che vi interessano di più. E' l'essenza stessa di Internet; la comunicazione in tempo reale, che trascende lo spazio e le distanze per farsi coinvolgimento e spunto di discussione.

Seguitemi in questa nuova avventura coloratissima e creativa! Stay tuned, stay Cri8ive!