responsive design

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.

 

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.

 

 

Leggi tutto...

century-child-moma

Un sito fatto veramente bene questo di Century of the Child del MoMA! Fatto bene sia dal punto di vista della tecnica dell'usabilità e del design.

Leggi tutto...

lapka-set-sensors

Tra i tanti siti che usano il sistema del vertical scrolling questo merita per semplicità, minimalismo e ...per il prodotto!

Da guardare: mylapka.com :-)

Leggi tutto...

contrast-rebellion


Quando uno crea il layout di un sito web, spesso capita che designer sono abituati a rivolgere gran parte del loro focus sull' aspetto estetico.
I problemi che possono accadere in seguito sono vari: Diffetti di funzionalità, manutenzione complicata e costosa del sito e tanti altri.
Uno dei problemi più frequenti è la scarsa leggibilità del testo, causata da contrasto insufficiente del testo di flusso in confronto allo sfondo.

Contrast Rebellion, un sito fatto molto bene, anche dal punto di vista estetico, da degli esempi e arriva a dei conclusioni perchè accade.


Leggi tutto...

ajaxload



Un sito interessante per tutti Webdesigner è  www.ajaxload.info
Con pochi click si può customizzare e scaricare una grafica gif animata di preloading.

Leggi tutto...

zoopa

Creatività sociale!
Ecco un'interessante piattaforma che apre a molti creativi la strada della comunicazione.

http://zooppa.it/

Leggi tutto...

jap

1000 Cranes for Japan

Leggi tutto...