Cosa sia il responsive design è ormai noto a tutti. Si tratta di una tecnica di programmazione delle pagine web che permette l'adattamento dei contenti di un sito ai diversi media come PC, tablet e smartphones.

La percentuale dei visitatori di un sito relativa agli utenti tablet e smartphones è, a seconda del sito, del 40% in rapido aumento.

Questo significa che se il sito non è ottimizzato per questi media il navigatore farà più fatica a navigare all'interno del sito. In particolare menu e dimensione dei caratteri non saranno ottimizzati e risulteranno difficili da utilizzare i primi e da leggere i secondi.

Fino a qualche anno fa si ricorreva ad un secondo layout soprattutto per i palmari che offrono una minore area di visualizzazione. Questa soluzione, tuttavia, offre più svantaggi che vantaggi in quanto il sito va concepito in maniera doppia con conseguente aumento di costi, possibilità di discrepanze, ecc.

I browser di ultima generazione, grazie dall'adozione dei nuovi standard html e css, permettono l'utilizzo di nuove tecniche di programmazione e da qui nasce il design responsivo o responsive design.

Come già dice il nome è un modo di disegnare la pagina web che "risponde" alle dimensioni dello schermo. Si parla infatti di breakpoints, ovvero di dimensioni in cui il layout varia la sua struttura.

 

responsive design

Per capire come funzionano i breakpoints e il responsive design basta ridimensionare il browser. Non fatelo su questo che al momento non è (ancora) responsive ma fatelo ad esempio qui.

Ridimensionando si nota come esistano dei momenti, definiti dalla larghezza in pixel, in cui accade qualcosa al design della pagina.

Qui entrano in gioco altri tre termini: fisso, fluido o elastico. Questi termini fanno riferimento al modo in cui i cambiamenti avvengono tra un breakpoint e l'altro.

Responsive fisso

Il modo fisso indica che vi è un passaggio netto tra un layout e l'altro. Hanno il vantaggio di essere più semplici (economici) da concepire. Lo svantaggio principale è che andrebbero concepiti troppi "step" dal momento che i dispositivi oggi sono tanti e dimensioni molto diverse. Ci sono difatti i PC standard, i PC con il monitor molto grande, i portatili con il monitor medio, i Netbook, i tablet normali in orientamento verticale e orizzontale, i tablet mini in orientamento verticale e orizzontale ed infine gli smartphones in orientamento verticale e orizzontale le cui dimensioni variano a seconda del modello.

In poche parole il modo fisso per essere completamente responsive dovrebbe prevedere troppi breakpoints.

Responsive fluido

Il modo fluido o liquido è quello che permette di variare costantemente la dimensione degli oggetti del layout per adattarsi al media. Il vantaggio principale è che permette lo sfruttamento migliore delle varie dimensioni di schermo mentre lo svantaggio è che non permette un elevato controllo del contenuto grafico. I grafici abituati tradizionalmente a lavorare con dimensioni fisse fanno fatica a concepire il concetto di fluido ovvero di larghezza variabile. E' altresì difficile mostrare al cliente l'effetto finale sui vari dispositivi.

Responsive elastico

Il modo elastico nella pratica è molto simile al fluido. Variano sostanzialmente le modalità tecniche con cui le misure degli elementi vengono prese. Il modo fisso ragiona a pixel, quello fluido in percentuale mentre quello elastico ad "em". "Em" è una unità di misura basata sulla dimensione dei font. Tutte le misure diventano pertanto proporzionate alla dimensione del font. Molto complesso da gestire dovrebbe in teoria riunire i vantaggi dei due modi precedenti. In realtà la sua complessità lo rende molto difficile da implementare correttamente.

Il migliore?

Non esiste il modo migliore ma normalmente si usa fare un saggio "cocktail" (o compromesso) di tecnologie che permettano di ottenere un buon responsive in funzione delle esigenze e delle disponibilità del cliente.

Il modo fluido con un mirato utilizzo dei breakpoints più comuni è quello che meglio permette un rapporto di costi/benefici.

Passare a responsive design dal sito attuale

Per la maggior parte dei clienti che usano già un cms, come Joomla, passare a un design responsive è possibile senza dover rifare tutto il sito. Grazie alla struttura separata tra i dati e template ovvero la parte grafica, è possibile mantenere il sistema esistente, magari aggiornandolo all'ultima versione, rifacendo il design del sito. Questo comporta un notevole risparmio di tempo in quanto i contenuti possono rimanere gli stessi e non vanno reinseriti.