Responsive design: come funziona?

Il primo articolo del 2012 vuole essere una sorta di introduzione ad una tecnica che sarà sempre più utilizzata, parlo del responsive design; ma di cosa si tratta? E’ una tecnica che sfrutta la capacità di una pagina web ad adattarsi in maniera logica a risoluzioni diverse. Tanto per farla breve, con un solo css, una sola pagina web posso sviluppare la stessa versione del mio sito web che differisce graficamente in base alla risoluzione adottata, in maniera veloce, dinamica e assolutamente compatibile con tutti i principali browser web e mobile.

Se pensate al settore degli smartphone e tablet, adottare una soluzione di design responsivo potrebbe essere una valida soluzione nell’osservare sostanzialmente lo stesso lavoro ma con risultati mirati ed ottimizzati in base alla periferica utilizzata (che sia su pc, un netbook, smartphone o tablet). Ma come illustrerò durante la vita di questo articolo è una tecnica che va utilizzata nelle giuste condizioni di sviluppo.

Alcuni esempi?

Prima di passare alla parte tecnica vi mostro alcuni esempi di responsive design, tanto per schiarirvi le idee in merito. Provate a visualizzare questi lavori partendo da una finestra del browser a tutto schermo, riducendola pian piano fino a fargli assumere la risoluzione di uno smartphone, è fantastico no?

L’importanza delle media queries

Per realizzare un prodotto che risponda alle specifiche del design responsivo è fondamentale familiarizzare al meglio con le media queries che CSS mette a disposizione. Per capirci meglio “una media query definisce una o più condizioni di validità entro il quale è possibile effettuare determinate operazioni”.

Sintassi:

@media screen and ("condizione di validità") {
    //Condizioni CSS
}

Capirete, infatti, che in questo modo è possibile gestire gli oggetti all’interno di una pagina in base alla risoluzione della finestra del browser, immaginate di avere una pagina web per versioni standard con un menu molto complesso ed abbastanza ingombrante per essere visualizzato con un device mobile, per far si che possa essere fruibile anche da smartphone dovrò definire una media query per evitare che esso possa essere visualizzato anche su risoluzioni più basse, ecco un esempio concreto:

@media screen and (max-width: 320px) {
    .bigmenu {
       display:none;
    }

    .smallmenu {
       display:block;
    }
}

Alla fine del mio CSS che regola l’aspetto grafico della pagina potrò definire delle variazioni nel caso in cui la finestra fosse più piccola di 320px di larghezza…

@media screen and (max-width: 320px)

…se questa condizione è soddisfatta opero im modo tale da nascondere il menù più ingombrante e far comparire quello per la versione “mobile”:

.bigmenu {
   display:none;
}

.smallmenu {
   display:block;
}

Allo stesso modo posso regolare le proprietà di altri oggetti all’interno della pagina.

Molto più chiaro ora?

Esempio pratico

Tanto per farla breve ho realizzato un esempio pratico che potete visualizzare qui;
scaricare i file sorgenti cliccando sul link sottostante

SCARICA

I detrattori del responsive design

Prima di cimentarmi in questa tecnica ho vagato per il web cercando feedback più o meno rassicuranti, trovandoli. Tuttavia una nicchia non del tutto isolata sostiene che di questa tecnica non bisogna farne il “vangelo”…ed io sto con loro.
Come già detto all’inizio di questo articolo la regola generale che l’informatica prevede in qualsiasi tipo di progetto è la fase di analisi all’interno della quale si prevedono diverse soluzioni per ottenere un prodotto di qualità e sicuro; nel nostro caso, questa tecnica non può sempre essere presa alla lettera solo perché presentata come innovazione e novità. Campiamo il perché.

Quando non è corretto utilizzare il responsive design?

Quando parliamo di sviluppo web per mobile affrontiamo un capitolo delicato poiché in fase d’analisi dobbiamo prevedere tecniche, problematiche e soluzioni che devono andare bene non solo per “iPhone” ma per tutti i principali sistemi operativi e dispositivi in circolazione, alcuni esempi? Android, iOSx, Windows Mobile, Symbian e compagnia bella. Vi elenco una serie di domande che dovreste porvi prima di iniziare a sviluppare un progetto con questa tecnica:

• Quanto è pesante il mio sito?
  Questo quesito deve rimbombarvi nella mente fino alla noia, la maggior parte dei siti web mobile vengono realizzati come un prodotto a parte poiché la velocità di caricamento di un cellulare non è quella consueta che ci aspettiamo sul web. Immaginate di avere un portale con centinaia di immagini, informazioni e testi. Sarebbe opportuno utilizzare questa tecnica? Lascio a voi la risposta.
• Posso alleggerire il sito nascondendo le informazioni?
  La risposta è semplice: NO! Anche se utilizziamo stratagemmi come “display : none” o “visibility : hidden” non risolviamo affatto il problema dell’alleggerimento poiché gli oggetti sono nascosti ma comunque letti dalla pagina e quindi il tempo di caricamento della stessa rimane tale e quale.
• Posso scalare le immagini?
  Seppure risulta una tecnica abbastanza diffusa è anche una soluzione assolutamente errata, qualcuno dovrebbe preoccuparsi di leggere le policy sui browser, Safari, ad esempio nella sua guida ufficiale (fonte qui) cita testuali parole:

  "You also need to size images appropriately. Don’t rely on browser scaling. For example, don’t put a 100 x 100
  image in a 10 x 10  element. Tile small backgrounds images; don’t use large background images."
  

  Tradotto: E’ NECESSARIO utilizzare immagini del formato appropriato. Non affidarsi al “browser scale”. Per esempio non ridimensionare a 10×10 un’immagine già grande 100×100. Non usare immagini di sfondo di grandi dimensioni.

  Questo perché la CPU dello smartphone, che non è quella di un PC è sottoposta a maggior sforzo quando deve affrontare questo tipo di lavoro.

• Elementi di disturbo per la versione mobile?
  Non tutti i dispositivi riescono ad interpretare correttamente video, animazioni flash, javascript, nuove tecnologie come html5, css3 o jquery per cui analizzare la presenza di questi elementi nel sito web versione desktop è una soluzione premurosa e successivamente decidere se è opportuno procedere o no.
• Riportare le stesse informazioni è sempre corretto?
  Chi è orientato allo sviluppo mobile (web e non) sa perfettamente che l’esperienza di navigazione dell’utente differisce rispetto a quella desktop. Per questo motivo si mettono in risalto le informazioni principali, tralasciando quelle secondarie in modo tale da facilitare la navigazione poiché principalmente i display non sono abbastanza grandi e il tempo di connessione è nettamente inferiore rispetto a quello di un PC. Organizzare meglio la disposizione delle informazioni è una delle cose che possiamo fare tranquillamente via CSS proprio come illustrato negli esempi sopra (via media queries) ma come possiamo ridurre le informazioni per il lettore? Chi naviga via smartphone si aspetta realmente di trovare un testo chilometrico o solo un estratto più importante? Siate bravi a captare le intenzioni della vostra nicchia di pubblico e agite di conseguenza.

Ovviamente questo non vi deve spaventare, sono assolutamente favorevole all’approccio di nuove soluzioni poiché rappresentino un giusto compromesso per quello che sto andando a realizzare. Tuttavia chi si avvicina a questo approccio deve essere consapevole dei PRO e dei CONTRO da affrontare in modo tale da non essere colto di sorpresa e di preservarsi più di una soluzione di sviluppo in fase di analisi.