10 strumenti per il Responsive Web Design

• Web Design
• 4 comments

Il concetto di responsive web design è considerato un argomento di stretta attualità tra i web designers di professione. Questo è dovuto al fatto che negli ultimi anni le modalità di accesso ai websites si sono moltiplicate a dismisura grazie allo sviluppo e alla diffusione planetaria di devices sempre più sofisticati e innovativi, soprattutto per quel che riguarda il settore mobile. Ipad, Iphone, Android mobile devices, desktops e netbooks costituiscono differenti mezzi di accesso alla Rete, ad ognuno dei quali corrispondono specifiche caratteristiche tecniche che occorre assolutamente prendere in considerazione nella creazione di un sito web.

Illustriamo di seguito una serie di strumenti utili allo sviluppo di siti internet che siano in grado di adattarsi in maniera reattiva e dinamica (responsive) alle diverse modalità di utilizzo da parte degli utenti.

Lettering.js – E’ un plug-in JQuery che può tornarvi utile per un check-up tipografico del vostro sito web. Avrete in questo modo la possibilità di effettuare un controllo preciso dello spacing, del leading e del kerning, allo scopo di garantire una lettura ottimale per i vostri utenti.

FitText – Si tratta di un plug-in JQuery per la creazione di titolazioni responsive. FitText assicura una visualizzazione ottimale dei titoli su ogni tipo di device. Facile da implementare e da usare.

ImgSizer.js – Come sottolineato da Ethan Marcotte, teorico del responsive web design, questo semplice script gioca un ruolo fondamentale nel rendering delle immagini, in particolar modo su piattaforma Microsoft Windows.

Fluid 960 Grid System – Il punto centrale di ogni responsive web design è la realizzazione di layouts che si adattino alle dimensioni dello schermo e alle caratteristiche del browser. Questo sistema, creato da Nathan Smith, è uno dei più famosi e usati.

Gridless – Un altro agile grid system per la costruzione di responsive layout, focalizzato principalmente sull’adattabilità dei web contents a diverse piattaforme per la lettura multimediale.

PxtoEM – Potente strumento di calcolo per la conversione di unità di misura assolute (px e pt) in unità di tipo relativo come gli ems e le percentuali. Perfetto per convertire dimensioni dei fonts, spacing e larghezza dell’elemento container.

Adobe Device Central – Un aspetto importante del responsive web design è la compatibilità cross-browser. Questo tool di Adobe vi permette di testare l’adattabilità del vostro sito a differenti web devices semplicemente digitando lo Uniform Resourse Identifier (sia in locale che in remoto) nell’apposito spazio indicato.

Web Developer – Estensione gratuita per Firefox e Google Chrome, rappresenta un’ottima alternativa ad Adobe Device Central.

Respond.js – Un leggero script open-source per testare l’adattibilità del vostro sito web ai browser più obsoleti, come IE6 e IE7.

Modernizr – Simile a Respond.js, ma indubbiamente meno leggero, anch’esso vi permette di verificare la compatibilità del vostro sito web sui browser più datati.

In conclusione possiamo affermare che le pratiche per il responsive web design sono ancora ad uno stadio iniziale, ma stanno acquisendo sempre maggiore importanza vista anche la crescente diversificazione degli strumenti e dei metodi di visualizzazione (come ad esempio il 3D). Questo breve elenco di tools rappresenta un buon punto di partenza per il giusto approccio al tema.