Risorse, Strumenti, Libri, Tutorials, Presentazioni, Roundups sul 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)
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à…