Come creare un sito web responsive in 5 mosse

Le ultime statistiche ci dicono che in Italia il 46% della popolazione naviga su internet utilizzando un dispositivo mobile, soffermandosi in media circa due ore al giorno. Pensare quindi di realizzare un sito web che non faciliti l’accesso ai contenuti per praticamente metà del nostro audience sarebbe come comprare una Ferrari e non superare i 50 all’ora!

Ma che vuol dire davvero creare un sito web responsive?
Il responsive web design è una tecnica di progettazione dei siti web molto in voga negli ultimi tempi che consente di adattare i contenuti delle pagine a qualsiasi risoluzione o orientamento dello schermo su cui si sta navigando. Diciamo subito due cose importanti, la prima è che naturalmente un sito web “non responsive” si vedrà comunque su qualsiasi display ma costringerà molto probabilmente il navigatore a scrollare orizzontalmente la pagina o a zoomare in continuazione per riuscire a leggere i contenuti rendendo il tutto molto difficoltoso e aumentando vertiginosamente le chance che il nostro caro utente se la dia a gambe levate.
La seconda è che il responsive design non è l’unica possibilità che abbiamo per rendere “mobile-friendly” un sito web, ma rappresenta sicuramente la scelta migliore in molti casi perchè ci evita di creare versioni apposite di ogni pagina per ogni tipo di dispositivo.
A questo punto immagino che scatti la domanda: Ok ho capito il responsive design è una bomba, quindi? Come faccio?
Normalmente la risposta a questa domanda prevede lo studio e la ricerca di moltissimo materiale, ma abbiamo sintetizzato il tutto nei seguenti pochi e semplici passaggi.

1. Decidi i contenuti da mostrare

Uno degli errori più frequenti che porta a scarsi risultati è quello di voler mantenere intatto l’intero contenuto sui vari display: nulla di più sbagliato! Elementi come slider super cool, immagini di background, banner, footer complessi, sidebar widgets, menù secondari di navigazione su uno smartphone oltre a non avere molta utilità potrebbero anche essere deleteri e peggiorare la user experience. Se la superficie del display si riduce inevitabilmente deve ridursi anche la mole di oggetti nella pagina! E’ un po come fare la valigia, dovete trasferire degli oggetti dall’armadio ad un contenitore molto più piccolo, potete schiacciare quanto volete ma mettetevi l’anima in pace qualcosa deve restare fuori, ed è bene che sia ciò che è superfluo garantendo uno spazio adeguato all’essenziale.

2. Usare il metatag viewport

E’ ora di sporcarci le mani con un po’ di codice! La prima cosa da fare per rendere una pagina responsive, è inserire nell’head il seguente codice:
<meta name="viewport" content="width=device-width" > 
No tranquilli, non è una formula magica, o almeno non del tutto. Innanzitutto capiamo cos’è questo viewport, si tratta della superficie su cui viene disegnata la pagina web. Attenzione! Se state pensando che su uno smartphone la dimensione del viewport corrisponda alla risoluzione del display state sbagliando di grosso. Quasi tutti i principali smartphone assegnano al viewport una larghezza predefinita di circa 1000 pixel a prescindere dalla risoluzione del display. Il motivo di tale amenità è molto semplice, la maggior parte dei siti web esistenti non ancora responsive, hanno più o meno un layout con quella larghezza per cui sul browser del device riusciremo a visualizzare l’intera pagina senza dover scrollare orizzontalmente, a costo ovviamente di vederla piú piccola. Inserendo questo codice invece stiamo dicendo di assegnare al viewport esattamente la larghezza del device perchè saremo noi ad occuparci di ottimizzare i contenuti e non abbiamo bisogno di nessun adattamento come quello appena descritto. Sorge però a questo punto un altro problema, come facciamo a sapere in pixel quanto è largo il viewport? In realtà questa informazione potrebbe non servirci affatto come vedremo in seguito,  ma se proprio non ne possiamo fare a meno ecco una lista delle dimensioni del viewport sui principali dispositivi.




3. Definire i breakpoint

 
Il concetto principale del web design responsive è quello di mantenere inalterato il codice html della pagine e agire sui fogli di stile per assegnare regole diverse in base al dispositivo dal quale si sta navigando, ad esempio nascondendo un elemento che abbiamo deciso di non far visualizzare solo sugli smartphone. Per ottenere questo risultate dobbiamo ricorrere ad una funzionalità dei CSS3 chiamata media query. In sostanza andremo a porre delle condizioni in base alla quali un blocco di regole CSS può essere applicato o meno in funzione della larghezza delle dimesioni del viewport. La cosa più facile è lavorare solo sulla larghezza per poi inserire qualche query più specifica solo se ci accorgiamo di problemi su particolari modelli. Tipicamente si prendono in considerazione tre versioni del layout: smartphone, tablet e desktop, di conseguenza avremo almeno due media query, supponendo che il desktop non abbia bisogni di css specifici. Ognuna di queste media query potrebbe poi essere sdoppiata in base all’orientamento portait o landscape, i valori di laghezza da utilizzare nelle query sono più o meno standard anche se non mancano le eccezioni, ma per iniziare potreste partire con qualcosa del genere:
@media (min-device-width : 320px) and (max-device-width : 480px) {
/* Smartphone  */
}

@media (min-device-width : 768px) and (max-device-width : 1024px) {
/* Tablet */
}</div>

4.  Usare layout fluidi e misure relative

Dai punti precedenti probabilmente avrete percepito che quando si parla di design per dispositivi mobile il concetto di pixel così come lo abbiamo sempre utilizzato assume sfaccettature diverse, e non rappresenta più quel caposaldo che abbiamo sempre utilizzato sul mondo desktop. Tra diverse dimensioni del viewport, pixel density specifiche di ogni dispositivo, mille risoluzioni e orientamenti diversi rischiamo di impazzire e rimpiangere i “bei” tempi di quando dovevamo combattere con l’ormai fortunatamente defunto IE6!
Per fortuna la soluzione esiste ed è anche abbastanza semplice: non usare le dimensioni in pixel ma ragionare in termini percentuali, questo ci consente di adattare il layout a qualunque risoluzione facendo in modo che gli elementi si adattino di conseguenza. Questo concetto unito alle media query rappresenta quasi tutto ciò che ci serve per partire con i nostri primi siti responsive, se ad esempio abbiamo una pagina che su desktop presenta tre colonne di contenuto, ognuna di esse avrà una larghezza del 33.333%, quando si passa su smartphone, con l’opportuna media query potremmo settare la dimensione di tutte e tre le colonne al 100% in modo che occupino tutta la larghezza del device e si dispongano piacevolmente una sotto l’altra. Semplice no?
 

5. Usare framework e librerie di supporto

Questo è un concetto fondamentale, non del responsive design, ma di tutta l’informatica: riutilizzare il più possibile quanto di buono è già stato fatto! E vi assicuriamo che in ambito responsive non mancano di certo le opportunità. Innanzitutto però è importante distinguere due casi e cioè se il sito è nuovo o va comunque rifatto da zero, o se dobbiamo adattare qualcosa di già esistente rendendolo responsive. Nel primo caso non c’è che l’imbarazzo della scelta, esistono framework completi, ben fatti, ed efficaci, che implementano già tutte le regole viste e molto di più, per citarne uno fra tutti il mitico Twitter Bootstrap, ne avevamo già parlato, e giunto ormai alla versione 3.2 questo framework è uno dei migliori e più completi, oltre che a dare un valido supporto per la realizzazione di siti web responsive, ci permette di utilizzare un’ampia libreria di componenti UI e utility che ci consentiranno di ottenere ottimi risultati con poco sforzo. Citiamo anche altri due validi framework: Boilerplate e Foundation, per farci rapidamente un’idea basta dare un’occhiate ai rispettivi siti web.
Se invece dobbiamo rendere responsive un sito web già esistente, l’introduzione di un framework potrebbe essere una soluzione troppo invasiva, in questo caso dobbiamo sporcarci un po’ di più le mani e andare a modificare ed ottimizzare  il css pre-esistente. Tuttavia possiamo fare affidamento su librerie javascript che ci semplificano la vita, ne citiamo alcune:
  • HTML5Shiv: ci permette di colmare le lacune di IE precedenti alla versione 9 che non supportava HTML5
  • EnquireJS: ci consente di definire funzioni javascript che vengono eseguite solo a determinate risoluzioni un po’ come accede con il CSS e le mediaquery
  • Moderinzr: ci permette di conoscere quali funzionalità di HTML5 sono supportate sul browser corrente
  • AdaptJS: permette di specificare quali CSS il browser deve caricare in base alla risoluzione dello schermo

 




Conclusioni

Il responsive web design non è una scelta di stile o una moda del momento, ma è una reale necessità se non vogliamo essere tagliati fuori da un mondo sempre più mobile, per cui bisogna darsi da fare non abbiamo scelta! O meglio una scelta ci sarebbe… se siete in difficoltà contattateci e sapremo come aiutarvi 🙂  Alla prossima!
Come creare un sito web responsive in 5 mosse ultima modifica: 2014-07-26T20:15:01+00:00 da Codelab Studio

2 Comments

  1. 27 marzo 2015 at 16:56

    Grazie!!!

  2. Lino Fornaro-Reply
    13 agosto 2016 at 12:52

    Completamente esaustico!
    Spero solo di poterlo mettere in pratica. Altrimenti accetto l’invito a chiedere aiuto.
    Grazie

Lascia un commento