Il Responsive Web Design è una tecnica con la quale la realizzazione strutturale di un progetto web, viene eseguita con lo scopo di ottimizzare un layout a seconda delle dimensioni dello schermo o dispositivo mobile corrente.
Questo layout diventa reattivo a seconda dell’ambiente in cui si trova, grazie all’uso di diverse tecniche tra cui le Media Queries CSS.
Con l’avvento dei supporti mobile, si è sentita la necessità di avere a disposizione la possibilità di poter costrutire dei layout potenzialmente adattabili su diverse dimensioni.
Design Reattivo, ma di cosa si tratta?
Nel Maggio 2010 si è iniziato a parlare di web design reattivo e oggi anche grazie all’introduzione di HTML5 e CSS3 si iniziano a vedere dei progetti interessanti.
L’obiettivo di questa tecnica non è altro che avere la possibilità di progettare un unica versione di un progetto web, che si possa auto-adattare a tutti i supporti, device inlclusi senza preventivare versioni apposite.
WordPress famoso CMS ha rilasciato tempo fa anche un tema gratuito, chiamato Responsive Tweenty Ten, realizzato con queste regole, interessante per andare a curiosare del codice.
Che libri mi consigli?
Su argomento Responsive Web Design ti consiglio vivamente l’e-book pubblicato da A Book Apart: Responsive Web Design.
L’e-book è a pagamento, pochi dollari spesi bene per iniziare a conoscere il design reattivo.
In questo articolo puoi trovare una recensione in italiano sugli argomenti trattati, scritto da Tommaso Baldovino.
Risorse e Tutorial
Ho raccolto alcune risorse riguardo il design reativvo applicato su layout, video, slider, lightboxmenu, immagini e testi.
Questi esempi possono aiutarci molto per capire a fondo la potenzialità del Responsive Web Design.
Responsive Design Framework
Responsive Design Grid
Responsive Design Ligthbox
Responsive Design jQuery slider
Responsive Design Videos
Responsive Design Images
Responsive Design Text
Responsive Design Menu
50+ Tutorial Responsive Web Design
14 Commenti
belle le risorse, in particolare la griglia! Thx
Complimenti per le risorse di cui non conoscevo alcune.. è da un pò che mi sono appassionato a questa pratica anche perchè è ovvio che sarà il futuro e magari cercherò di affinare le mie tecniche anche grazie a tali fonti..
Un bel set di risorse..non c’è che dire..peccato per quella guida in inglese! :( Buon lunedì a tutti!
Grazie Julius per le dritte!
A proposito di Responsive Design, Chris Spooner suggerisce una serie di template per WordPress a tema!
http://line25.com/articles/20-high-quality-responsive-wordpress-themes
Davvero niente male SimpleGrid.
Per il mio primo lavoro “Responsive” sto usando Less Framework e mi sto trovando benissimo
http://lessframework.com/
Grazie per le risorse (e grazie a vik per il framework :) ) adesso proverò a sviluppare il mio template trasformandolo in responsive :D
Gran bella raccolta !
I Like
Utilissime, grazie mille !
con IE8 e non funge!!!! è grave!
mi riferivo al Responsive Design Grid con cui hai fatto la pagina DIVENTARE FREELANCE, quindi anche su quella non funge il resize su IE8
Ciao,
grazie per tutte queste risorse, è da tempo che progetto i siti responsive, in particolare con WordPress. Ultimamente ho riscontrato qualche problema con i video e gli oggetti incorporatoi! Mi sono documentato e ho risolto, se a qualcuno interessa ho scritto un post sull’argomento:
http://www.mattiafrigeri.it/articoli/web/responsive-web-design-e-oggetti-multimediali/
Buon lavoro a tutti!
Ottimo articolo complimenti…