Appunti di Responsive Web Design

Appunti di Responsive Web Design
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:

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

3 thoughts on “Appunti di Responsive Web Design

  1. 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 🙂

Rispondi