Responsive design: come funziona?

Responsive design: come funziona?

1981
21
CONDIVIDI

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 <img alt="" /> 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.

  • patrikdev

    articolo molto completo…illustra tutti i pro e i contro del responsive web design, personalmente credevo fosse una tecnica giusta a priori da utilizzare ma leggendo i tuoi pareri va usata con le giuste misure….

  • Nando

    Se vi può essere utile aggrego un elenco di compatibilità browser per le media queries: http://caniuse.com/css-mediaqueries. Per il resto hai detto tutto tu!

  • Francesco Smith

    La cosa che mi fa rimanere di stucco è nello scaling delle immagini, cioè praticamente tutti i web design responsivi utilizzano questa tecnica che però non va giù ai browser. C’è pochissimo materiale in giro, grazie per l’informazione 😉

  • EmporioDev

    è anche vero che lo scaling delle immagini è dannoso per la cpu del telefono se si riduce al volo un immagine di background da 1mb…..allora si, ma spesso parliamo di immagini salvate per il web a 72dpi…..possibile che creino problemi?

    • Francesco Smith

      Beh, se le guide ufficiali dicono di non scalare le immagini (e ti fa anche un esempio da 100 a 10) ci sarà un motivo. Magari se ne scali una da 100 il browser non ne risente ma se nella pagina ce ne sono 10 allora forse non è proprio ortodosso come metodo.

  • lorenzo

    Ciao Mario,
    complimenti per l’articolo. Anche io ero tra la cerchia “usiamo le nuove tecniche ad occhi chiusi” :D). Posso farti una domanda? Va bene, per un sito pieno zeppo di immagini e contenuti utilizzare il r.d. fino alle risoluzioni di un tablet (ipad, galaxy tab, ecc..?) e per il mobile studiare versioni mirate? In effetti molti mobile differiscono di versione da marca a marca…ad esempio con iphone ne vedi una, con black berry un’altra….questo avvalora sicuramente la teoria del mobile delicato.

  • Pierpaolo Cerna

    complimenti per l’articolo, molto esauriente.

    domanda: come posso adottare stratagemmi per effetti lightbox utilizzando il responsive?

  • pask82

    Gran bella analisi. Grazie!

  • Silvia Paldini

    Da provare assolutamente!

  • Gran bell articolo chiaro e coinciso.

    Io sono dell’Idea che il responsive design a seconda delle tecniche che si utilizzi, deve essere tenuta conto come una feature in piu del Website o Blog che sia. Nella maggioranza dei casi, le soluzioni che si possono adottare in favore di un device possono essere a discapito di un altro. Un grosso cruccio del Web Design che vede molta gente separata nelle opinioni.

  • Shennon

    Ciao, articolo molto interessante..
    Devo aprire un BLOG che avrà all’interno di ogni sezione circa 12 immagini in preview da 200×100 px nella versione dekstop. E in home page una foto grande 800×500 px circa più 4/8 immagini preview dei post. Tutta presa da questa tecnica, pensavo di realizzarlo in questo modo perchè dovrà essere renderlo usabile anche per tablet e smartphone. Quindi me lo sconsigliate? Quale sarebbe la soluzione migliore, visto che ancora devo iniziare il progetto?

  • Shennon

    …nessuna risposta?

  • Mario Concina

    Dovresti testare il tuo web con diversi dispositivi mobili, verificare i tempi di caricamento della pagina e il peso della stessa. Se eccessivo potresti pensare di realizzare un design reattivo per i tablet e una versione mobile a parte per gli smartphoone.

  • Grazie x le preziose informazioni, sto iniziando a progettare il nuovo sito della mia azienda…

  • Si può usare questa tecnica, ancora un po’ sperimentale, per utilizzare immagini di diverse grandezze in base al width della pagina, quindi in base al dispositivo che si usa:

    https://github.com/filamentgroup/Responsive-Images

    Demo qui: http://filamentgroup.com/examples/responsive-images-new/demos/A-Default/demo.html

    Si deve aggiungere un file javascript alla pagina ma potrebbe risolvere diversi problemi di lentezza del caricamento e di ‘scale’ eccessivo delle immagini.

  • Mario Concina

    Grazie per aver arricchito con ulteriori informazioni.
    Visto che ci sono condivido anch’io un articolo molto interessante sul responsive web design:
    http://www.webdesignshock.com/responsive-web-design/

  • Yftp

    Gran bell’articolo!

  • Pingback: Responsive websites guides « Rendimentozero()

    • Salve,
      vi chiederei gentilmente di aiutarmi in questa problematica. Ho creato un sito dove tramite media css i scompaiono secondo la risoluzione (utilizzando display: block; display: none;). Funziona perfettamente tranne che per IE8 e inferiori. Questi browser sembrano infatti non leggere questi comandi. Come potrei fare secondo voi? Vi ringrazio per l’attenzione dedicata a questo commento. Marco

  • Christoper

    I like the valuable information you provide in your articles.
    I’ll bookmark your blog and check again here regularly. I am quite sure I’ll learn a lot of new stuff right here!
    Best of luck for the next!

  • ben fatto. molto chiaro.