Questo articolo non ha la pretesa di essere il trattato più completo in assoluto sui vantaggi, sulle limitazioni e le sfide del responsive web design. E’ piuttosto una raccolta di esperienze accumulate in alcuni progetti che ho sviluppato recentemente.
Cosa è il responsive web design?
Un layout grafico del sito web fruibile da tutti i dispositivi: desktop, tablet e smartphone. Questa tecnica consiste principalmente nell’utilizzare le Media Queries che consentono di visualizzare differenti stili CSS (fogli di stile) e adattare il layout grafico in base al dispositivo usato dall’utente. Gli stili CSS possono essere manipolati anche con linguaggi di programmazione avanzati come ad esempio jQuery o altri similari.
In termini molto più semplici, permette d’ottenere la migliore visibilità a prescindere dalla dimensione dello schermo. Non è solo una questione estetica o un vezzo: gli utenti navigano su internet con i computer e monitor dalle più disparate risoluzioni ma sempre di più utilizzano anche altri dispositivi (in aggiunta o in sostituzione del pc).
Perchè scegliere un approccio responsive?
- Un unico sito web da sviluppare, mantenere e promuovere.
- Supporto per una grande varietà di dimensioni dello schermo, non solo i casi estremi di grandi monitor desktop e piccoli dispositivi palmari.
- Future-friendly, perché il layout si ridistribuiscono in base alle dimensioni dello schermo e non solo in base alla dimensione dei dispositivi popolari di oggi, ma anche quelli di domani.
- Si può utilizzare la geolocalizzazione con dispositivi mobili
Svantaggi?
Ehm… Il monte ore dedicato frontend development aumenta considerevolmente.
E i vecchi browser?
Niente paura, basta basta far caricare al browser alcune librerie specifiche:
- https://github.com/scottjehl/Respond o in alternativa http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js
per la gestione delle Media Queries (caricare le librerie dopo aver caricato tutti i fogli di stile) - http://html5shim.googlecode.com/svn/trunk/html5.js
per attivare gli oggetti HTML5
E Internet Explore?
Dopo anni di assoluto strapotere IE non è più il browser più diffuso e Microsoft per riconquistare la fiducia dei designer ha attivato un tool modern.IE che ti aiuta a implementare gli hack necessari per le vecchie versioni di Internet Explorer.
Ma quando navigo con mobile il sito è veloce o ci mette tanto a caricare gli elementi?
Il segreto è affidarsi per quanto più possibile a delle soluzioni in CDN, ad esempio librerie jQuery e relativi plugin possono essere prelevati da alcuni cloud specifici:
Qualche trick?
Interessante plugin di jQuery che implementa alcuni widget (per ora solo sideshow e accordion) già pronti per il responsive web, ossia indipendenti dalla risoluzione del device su cui vengono visti:
https://github.com/dmmalam/Responsly.js
Qualcosa di pronto all’uso?
A Fully Responsive HTML5, CSS & JavaScript Toolkit: http://groundwork.sidereel.com
Degli esempi?
http://mediaqueri.es
Per quanto riguarda la performance dei siti responsivi un vero segreto non esiste.Tutto dipende da come viene progettato.
Utilizzando un approccio “mobile first” (http://www.lukew.com/ff/entry.asp?933) e aggiungendo in seguito, in base alle capacità dei device o dei browser, ulteriori funzionalità al sito esso risponderà in maniera più adeguata alla situazione.
Utilizzando i caricamenti condizionali o librerie come modernizr, enhanceJS, possiamo e dobbiamo rendere accessibile il nostro sito anche a chi non ha dispositivi potenti o reti wifi.
Certo, servirsi di un CDN aiuta, ma non basta 🙂
Grazie per il tuo contributo Nicola. In effetti l’approccio “mobile first” è sicuramente una mossa vincente, su più fronti.
Allen MacCannell liked this on Facebook.