Il Responsive Web Design è un importante concetto che ha a che fare con la "progettazione" o, in inglese, il "planning" del lavoro che si andrà a fare.
Soltanto pochi anni fa le tematiche relative ai telefoni cellulari, ai tablet e ai diversi tipi schermi non ci preoccupavano troppo, fondamentalmente perché non ce n'erano molti in giro (o non ce n'era proprio nessuno!).
Bene, il mondo dell'informatica è ormai cambiato e ad oggi esistono diversi schermi con varie dimensioni che i designer devono imparare a gestire.
Christian Vasile su 1stwebdesigner.com ci da qualche utile consiglio per capirne la logica ed essere operativi fin da subito.

Con Responsive Web Design si tende ad indicare un sito web che dovrebbe adattarsi a qualunque dispositivo sul quale venga visualizzato: non si parla soltanto i dispositivi mobili, ma anche di tablet e certi tipi di computer fissi.

responsive web design

 

Secondo Ethan Marcotte, che ha scritto l'interessante libro "Responsive Web Design" questo approccio si compone di tre parti:

  1. una griglia flessibile
  2. delle immagini flessibili
  3. media query.

Ciò significa che le dimensioni dei classici layout non trovano più spazio nella rete moderna e che, di conseguenza, dobbiamo cambiare il nostro modo di lavorare.

Questo è il motivo per cui, in questa sede, tratteremo delle parti più importanti del nuovo approccio, parlando di ognuna di esse.

Quando dovete creare il design per un sito vi viene affidata una grande responsabilità: se volete essere in grado di usare questo approccio dovrete innanzitutto capire il significato di Responsive Web Design e successivamente verificare se il nuovo layout funzionerà nella maniera corretta.

 Sistema a griglia

Il sistema a griglia utilizzato nelle riviste, per esempio, deve essere usato anche nel Responsive Web Design.

Non è possibile applicare questo tipo di design senza avere un sistema a griglia.

Affinché il layout sia flessibile, dovete dare le misure in percentuale, non in pixel.

Ciò significa che un'ampiezza del 50% sarà sempre la metà dello schermo in cui il sito verrà visualizzato, indipendentemente dalla sua dimensione.

Ecco cosa si intende con web design flessibile.

Immagini di sfondo

Se volete usare delle immagini di sfondo fate pure, ma dovete selezionare quelle più adatte.

Le fotografie, le illustrazioni o altre nuove immagini che non possono essere quadrettate non vanno bene per dei sistemi a griglia fluidi.

Quindi non usate gradienti orizzontali, perché in proporzione non sono versatili a livello orizzontale; inoltre, anche i bordi ne risentirebbero e potrebbero apparire piuttosto brutti.

Quello che potete usare tranquillamente sono certi tipi di filtri, come il seppia, lo sgranato etc

Riduzione di tutte le proporzioni

Quando utilizzate l'approccio Responsive dovete ridurre le proporzioni di tutti gli elementi sullo schermo.

Ciò significa che dovete dimenticarvi dell'approccio basato sulla larghezza standard utilizzato finora, così come dello scorrimento orizzontale. Nella pratica, provate a inserire ogni informazione o elemento web in modo che ridimensionando la larghezza del browser ogni singola informazione continuerà ad essere visualizzata senza problemi.

Con un wrapper flessibile dato in percentuale (invece che in pixel) tutto questo sarà possibile.

La maggior parte delle pagine web non sono flessibili e ciò impedisce che vengano visualizzate correttamente sui dispositivi mobili.

Lavorare in percentuale o lavorare in pixel è praticamente la stessa cosa, tranquilli, non sarete costretti ad imparare altre proprietà o selettori CSS.

Lavorare in percentuale è anche più semplice: per esempio, il concetto di "larghezza: 100%" è piuttosto intuitivo.

Indipendentemente dalle dimensioni dello schermo, il div qui citato sarà sempre alla massima larghezza.

Se invece della percentuale aveste utilizzato i pixel, il div sarebbe sempre stato fissato a 100 pixel, indipendentemente dalla grandezza dello schermo.

Su un iPhone è molto.

Sullo schermo del mio computer, che ha una risoluzione di 1600x900, non è nulla.

Avete capito la differenza?

È un modo di lavorare molto più logico.

Considerate le media queries

Sono sicuro che tutti voi conoscerete il significato di media queries.

Ma per spiegare meglio cosa si intende per moduli, potete dare un'occhiata alla seguente immagine.

responsive web design

Qui potete farvi un'idea più precisa di come si presenterà il vostro layout, avendo a disposizione un'immagine della piattaforma in cui verrà visualizzato.
Oggi il principale problema è che i designer e gli sviluppatori web non pensano ad altro che alle media query dei fissi e, forse, dell'iPad. Tutti pensano agli schermi di dispositivi più fissi e meno mobili, come gli iPhone.
Quando il sito viene consultato tramite iPhone, i moduli devono essere ridimensionati e modificati, di conseguenza il loro design dovrà essere più flessibile e le media queries dovranno essere modificate di conseguenza, quando sarà possibile.

(Alla fine dell'articolo troverete una lista di ulteriori risorse e leggendole scoprirete qualcosa in più sulle media queries e su come utilizzarle.)

L'idea di fondo dietro al concetto di modulo è che esso cambia la propria posizione e dimensione a seconda della grandezza dello schermo con il quale il sito viene visualizzato.

responsive web design cos'è
Qui vi verranno spiegati alcuni concetti base, attraverso degli ottimi esempi e consigli che potrete usare nella pratica per rendere il vostro sito web pronto per qualunque schermo e dispositivo mobile.

Che fare dunque?

Il motivo per cui internet non possiede un design flessibile è la scarsa conoscenza di questo tema da parte dei designer.
Per questo motivo, ho sempre pensato che i designer dovrebbero conoscere anche il linguaggio l'HTML e il CSS, visto che conoscendo tutti i problemi potenziali, saranno in grado di creare siti in modo tale da evitare certi errori.

Spero che leggendo questo articolo i grafici web capiranno che sul web c'è un gran bisogno di layout flessibili, anche perché la rete si trasforma e continuerà a cambiare negli anni avvenire.
Con l'aggiunta delle codifiche HTML e CSS il layout flessibile è diventato un po' più semplice da applicare, anche se il nuovo linguaggio di codifica è ancora in fase di sviluppo e secondo gli esperti lo sarà sempre, quindi non possiamo farci troppo affidamento nel breve periodo.

Anche la quantità di informazioni è un punto critico, perché un sito visualizzato su fisso dovrebbe avere offrire molte più informazioni e elementi rispetto ad un sito ideato per dispositivi portatili.
Ci sono davvero molte cose a cui pensare prima di applicare l'approccio "responsive" sul web, ma ciò è anche dovuto al fatto che internet cresce e diventa sempre più importante.
Con una tale quantità di decisioni da prendere ancora prima di iniziare a progettare un sito, dovrebbe essere chiaro a tutti che il responsive design è una sfida anche per i maggiori esperti del settore.

Esempi di responsive design

1. CSS Tricks

CSSTrick a dimensione intera CSSTrick a dimensione intera

csstricks_resized CSSTrick ridimensionato

2. Simon Collision

 responsive sito Simon Collision a dimensione intera

responsive sito Simon Collision ridimensionato

3. Hardboiled Web Design

 responsive sito Hardboiled a schermo intero

responsive sito Hardboiled ridimensionato

 

Per maggiori informazioni (ininglese) potete seguire questi link.
Potete vedere anche altri esempi cliccando sull'ultimo link (quello di Line25)

Beginners Guide to Responsive Web Design on Think Vitamin

CSS Media Queries su CSS Tricks

Fluid Grids su A List Apart

Responsive Web Design su Smashing Magazine

Showcase of Outstanding Responsive Web Designs su Line25

 

[fonte: http://www.1stwebdesigner.com/design/introduction-responsive-web-design/]