La Bibbia del Responsive Web Design

Il Responsive Web Design o RWD è il principale trend degli ultimi 2 anni, spinto sicuramente dalla diffusione di smartphone e tablet e quindi dalle sempre piú esigenti aspettative degli utenti finali che giustamente cercano e preferiscono esperienze di uso e visualizzazione idonee a questi dispositivi.

Cos’è il RWD? (Responsive Web Design)

Per Responsive Web Design si intende il processo di realizzazione di pagine web che reagiscono al cambio di dimensione delle device su cui vengono visualizzate adattando gli elementi del layout. Il cuore di questo processo risiede nella specifica CSS3 Media Queries che permette di rilevare la risoluzione dello schermo attualmente in uso ed  attivare o disattivare un preciso set di regole CSS.

IL CONTROLLO CHE I DESIGNER POSSONO ESERCITARE NELLA STAMPA, E CHE SPESSO DESIDERANO ANCHE NEL WEB, È SEMPLICEMENTE UNA FUNZIONE DEI LIMITI DELLA PAGINA STAMPATA. DOVREMMO ACCETTARE L’IDEA CHE IL WEB NON HA GLI STESSI LIMITI E PERTANTO PROGETTARE AVENDO IN MENTE LA SUA FLESSIBILITÀ. MA PRIMA DI TUTTO, DOBBIAMO ACCETTARE IL FLUSSO ED IL RIFLUSSO DELLE COSE.

— JOHN ALLSOPP, A DAO OF WEB DESIGN

In parole povere… se visualizzate un sito responsive su dispostivi con schermi con dimensioni diverse (tipo PC, smartphone e tablet) vedrete layout diversi ma senza creare siti diversi.

Potete provare la cosa dal vivo ridimensionando la finestra del browser ora e vedere come cambia il layout del nostro sito.

Il web è dominato dalla transitorietà: canoni stilistici di design e tecnologie sono spesso modificate o sostituite nel giro di un anno o due, ecco perchè i siti web realizzati secondo le regole del responsive web design sono completamente compatibili con quasi tutti i dispositivi multimediali.

GLI ASPETTI TECNICI DEL RESPONSIVE WEB DESIGN

1 LAYOUT FLESSIBILE

Gli elementi chiave e i valori del layout di un sito responsive sono sempre realizzati e misurati in percentuali.

2 IMMAGINI FLESSIBILI

La grandezza delle immagini utilizza valori percentuali.

3 CSS MEDIA QUERY

Con le CSS Media Query le diverse risoluzioni sono facilmente organizzate nel foglio di stile, insieme ad altre informazioni utili. I tal modo i parametri visivi del sito possono essere facilmente modificati senza l’utilizzo di javascript.

4 JAVASCRIPT

Se vogliamo che il sito web presenti una solida retro compatibilità con i browser web più datati saremo comunque costretti a mettere le mani in qualche linea di codice javascript.

Luke Wroblewski ha riassunto alcune delle sfide progettuali del RWD e del mobile design, ed ha creato un catalogo di modelli di layout multi-dispositivo. Suggerisce inoltre che, rispetto ad un semplice approccio RWD, gli approcci Device Experience o RESS possono offrire un'esperienza utente maggiormente ottimizzata per i dispositivi mobili.

Il libro pioneristico del 2010 di Zoe Mickley Gillenwater sul CSS3 include tutorial su layout flessibili, e Adobe'sDreamweaver CS6 ... Classroom in a Book contiene tutorial per la creazione di layout flessibili con Dreamweaver CS6.

Noi oggi vi proponiamo una lista di risorse per il responsive web design, una sorta di BIBBIA che vi guiderá nel labirintico mondo di questo nuovo trend del design.

Tutte le risorse sono state suddivise per macro categorie e successivamente per sotto categorie. Alla fine dell'articolo troverete un link dal quale é possibile scaricare l'e-book in PDF fino al 1 Settembre di quest anno.

Buona lettura!

1. Costruendo un sito responsive

2. Responsive Web Design: approccio e strategie

3. Tools per il responsive Web Design

4. Media Queries per il Responsive Web Design

5. Layout per il Responsive Web Design

6. Sviluppare un sito Responsive: le tecniche

7. Responsive Web Design: gli elementi

8. Responsive Web Design: le immagini

9. Responsive Web Design: la tipografia

10. Testare un sito web Responsive

11. Libri, Tutorials, Presentazioni,Roundups sul Responsive Web Design

Costruendo un sito responsive

• Responsive Web Design
• Responsive Retrofitting
• Common Misconceptions About Touch
• The State of Responsive
• Improving UX through Front-End Performance
• Printing the Web

Responsive Web Design: approccio e strategie

Tools per il responsive Web Design

Media Queries per il Responsive Web Design

Layout per il Responsive Web Design

Sviluppare un sito Responsive: le tecniche

Responsive Web Design: gli elementi

Responsive Web Design: le immagini

Responsive Web Design: la tipografia

Testare un sito web Responsive

Libri, Tutorials, Presentazioni,Roundups sul Responsive Web Design

SCARICA LA BIBBIA DEL RESPONSIVE WEB DESIGN (PAGA CON UN TWEET)