MoebiusMania

L'ultimo anno di web design ha visto nel RWD il principale trend, specialmente visto l'affermarsi della diffusione di smartphone e tablet e quindi le aspettative degli utenti finali che giustamente cercano e preferiscono esperienze di uso e visualizzazione idonee a questi dispositivi. Tuttavia visto la "giovinezza" di questo settore solo adesso stiamo vedendo emergere degli strumenti adatti a questo scopo, ecco perché in questo articolo ho voluto fare una piccola risorsa dei 10 migliori, tra software e librerie.  Per chi fosse nuovo a questo mondo facciamo un breve riassunto:

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 degli schermi su cui vengono visualizzate modificando la visualizzazione degli elementi del layout. Il cuore di questo processo risiede nella specifica CSS3 Media Queries che permette appunto di "rilevare" la risoluzione dello schermo attualmente in uso e  attivare o disattivare un preciso set di regole CSS. 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 blog.

Software

Adobe Edge Reflow CC (preview) - Il nuovo tool di Adobe (attualmente in fase di anteprima) per creare layout responsive in maniera visuale, ottimo per i designers un po' meno per i developers. RD Tool (estensione per Brackets) - Realizzata da Lee Brimelow è un'estensione per l'editor open source Brackets strutturata in maniera simile a Edge Reflow ma che non genera codice lasciando maggiore libertà ai developers. Responsive Wireframe - Un semplice schema interattivo che dimostra l'adattabilità di alcuni tipi di layout comuni sugli schermi più piccoli. ResponsiView - Un'estensione per Chrome che permette di aprire il sito attualmente visualizzato in una scheda separata con una dimensione diversa, scegliendo tra quelle "standard" dei device mobile o dei valori di altezza e larghezza precisi.

Librerie

Zurb Foundation - Uno dei primi framework CSS ad incorporare un sistema di griglia responsive, ormai essenziale per lo sviluppo di pagine web multi schermo. Twitter Bootstrap - Attualmente uno dei framework CSS più diffusi che oltre ad includere una griglia responsive include anche alcune piccole classi "utility" per il RWD. Pure CSS - Nuovo framework CSS progettato da Yahoo per entrare in competizione con Bootstrap e Foundation dal look molto più minimalista. 320 and up - Altra griglia CSS responsive ma che si basa sul concetto di "mobile first", ovvero di realizzare prima la versione più "piccola" del sito e successivamente scalare ai layout più larghi. Fitvid.js - Ottima utility Javascript per ridimensionare i video player in base alla dimensione dello schermo e servire sorgenti video differenti. Fitext - Altra utility Javascript per adattare la dimensione dei titoli in base alla larghezza del loro contenitore.

Letture

Responsive Web Design | Ethan Marcotte - Edito da A Book Apart uno dei testi fondamentali in questo settore, e costa solo 9 dollari (circa 7 euro).

Offline

Interface Sketch - Se preferite realizzare delle bozze a mano dei vostri siti o interfacce per app in questa collezione troverete diversi file pdf da stampare con le forme e dimensioni di diversi dispositivi mobile.

Volete rendere questa lista più numerosa? Segnalate altre risorse nei commenti!