La Bibbia del Responsive Web Design

Risorse, Strumenti, Libri, Tutorials, Presentazioni, Roundups sul Responsive Web Design

by Janeth Kent Date: 01-01-1970 responsive design web sviluppo apps risorse ebook pdf gratis strumenti

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: 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)

 

 

 
by Janeth Kent Date: 01-01-1970 responsive design web sviluppo apps risorse ebook pdf gratis strumenti visite : 16887  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Articoli correlati

Come scaricare un'e-mail in formato PDF in Gmail per Android

Ora scoprirete quanto sia facile salvare un'e-mail ricevuta o inviata tramite Gmail in formato PDF, il tutto con il vostro smartphone Android. Gmail è una delle applicazioni di posta elettronica più…

Introduzione alle CSS Container Queries

Il responsive web design è una componente essenziale dello sviluppo web. Come sviluppatori front-end, dobbiamo preoccuparci continuamente della moltitudine di nuove risoluzioni e dispositivi. Va da se che creare una versione…

Come inviare foto e video autodistruttivi su WhatsApp

WhatsApp ha rilasciato una nuova funzione che consente di inviare foto e video a vista singola, una funzione che è stata in sviluppo per mesi e ora è finalmente live…

Un approccio a Java: Il ciclo while

Ciao a tutti e bentornati! Dopo aver fatto una breve, ma corposa, introduzione sui cicli, andiamo oggi a vedere finalmente le prime implementazioni che utilizzano quello che abbiamo definito ciclo precondizionale. In Java, come…

Un approccio a Java: I cicli - Introduzione

Ciao a tutti e bentornati! Sino ad ora, abbiamo parlato di variabili e di strutture di selezione, andando a considerare alcuni degli aspetti fondamentali di questi due concetti. Teoricamente, per…

Un approccio a Java: operatori booleani

La volta precedente, abbiamo ampiamente parlato delle variabili booleane, cercando di delineare quali siano le principali operazioni che si possono effettuare proprio a livello pratico.  Di tutti i casi esaminati, non abbiamo…

Netflix gratis: tutto ciò che si può vedere senza abbonamento

Per visualizzare i contenuti di una piattaforma di streaming audiovisivo come Netflix è necessario pagare un canone mensile di connessione. Tuttavia, l'azienda ha attivato una serie di contenuti che possono…

Come eseguire il backup delle foto e dei video di Facebook su Google Photos

Sebbene Instagram o TikTok siano attualmente due dei social network più utilizzati, la verità è che Facebook ha ancora molti utenti attivi da anni. Sia che siate un utente veterano…

come trasformare il tuo smartphone in una webcam per il tuo pc

Con la propagazione del Covid-19 tutti noi abbiamo dovuto adattarci a una nuova situazione di quarantena in casa, e, dato che l'essere umano ha bisogno di comunicare costantemente, abbiamo usato…

WhatsApp: In arrivo Videoconferenza per 8 e nuovi emoji

Viviamo in un momento in cui, a seguito del confinamento da parte della Covid-19, molte persone stanno utilizzando strumenti alternativi che permettono loro di stare con un numero sufficiente di…

Facebook: come rimuovere i dati nascosti e le informazioni personali

Facebook è un fantastico social network che ci permette di essere sempre aggiornati su tutte le notizie dei nostri amici o della nostra famiglia o anche sulle notizie più rilevanti…

Come sapere quali applicazioni hanno accesso alla propria posizione, al microfono e alla telecamera

Quando si installa un'applicazione sul proprio smartphone, si decide quali permessi dare, ma non sempre è tutto così chiaro ed evidente. Oggi, spiegheremo come sapere se quei permessi  eccedono la legalità…

Clicky