10 strumenti per il Responsive Web Design

responsiveLe statistiche rivelano che sempre più persone preferiscono accedere a internet usando cellulari, smartphone e tablet piuttosto che dal PC.

Assistiamo quindi ad una sempre crescente richiesta per la progettazione di siti web in maniera responsiva, per ottenere la migliore user-experience possibile.

Diamo uno sguardo ai 10 strumenti che possono essere di aiuto sia ai designer che ai developer:

  1. Lettering
    La tipografia in un sito web è fondamentale.
    Questo plugin jQuery ci permette di controllare tutti gli aspetti come gli spazi e la crenatura.
    http://letteringjs.com/
  2. Fit text
    Questo plugin jQuery ci permette di testare in maniera molto efficace la visualizzazione del testo su vari dispositivi.
    http://fittextjs.com/
  3. Fluid 960 Grid systems o il suo successore Unsemantic
    Permettono in maniera semplice e veloce la costruzione di griglie responsive.
    Come suggerisce il nome, la griglia ha una larghezza di 960px con 12 o 16 colonne, il tutto ampiamente personalizzabile.
    http://960.gs/
    http://unsemantic.com/
  4. Imgsizer.js
    Il ruolo di questo script è di assicurarsi che le immagini vengano correttamente visualizzate sui sistemi Windows.
    http://unstoppablerobotninja.com/demos/resize/imgSizer.js
  5. Gridless
    Tramite questo Framework è possibile disegnare pagine senza griglie in maniera molto semplice.
    Il codice è stato realizzato avendo in mente la filosofia del mobile-first e del responsive design, in modo da rendere il sito compatibile con tutti i dispositivi.
    http://thatcoolguy.github.com/gridless-boilerplate/
  6. Adobe Device Central
    Per testare il risultato del nostro lavoro sull’ampia gamma di smartphone e tablet, la soluzione ideale sarebbe quella di farlo dai dispositivi stessi.
    Se non ne abbiamo la possibilità Adobe Device Central è uno dei migliori prodotti sul campo.
    Con una libreria in continua crescita, è possibile scegliere praticamente qualunque dispositivo di rilievo sul mercato, pronto per il test vituale.
    http://www.adobe.com/products/devicecentral.html
  7. PxtoEM
    E’ uno strumento per la conversione di unità di misura assolute (cioè px e pt) in unità di misura relative, per la tipografia, la spaziatura, larghezza del contenitore, ecc.
    http://pxtoem.com/
  8. Respond.js
    Quando parliamo di responsive web design non ci riferiamo solo allo sviluppo per i dispositivi mobili, ma alla tecnica che ci permette di sviluppare siti adatti a qualsiasi tipo di browser anche il più datato.
    Questo script si occupa del responsive web design in IE6, 7 e 8.
    https://github.com/scottjehl/Respond
  9. Web Developer
    Questa straordinaria estensione per Firefox e Chrome fornisce una serie di strumenti estremamente utili allo sviluppo dei siti.
    http://chrispederick.com/work/web-developer/
  10. Modernizr
    Molto simile a Respond.js, Modernizr fornisce anche la funzionalità per il caricamento condizionale.
    Consente cioè di caricare determinate risorse in base al browser che l’utente sta usando al momento, rendendo così le pagine più snelle e il loro caricamento più rapido.
    http://modernizr.com/

Per approfondire: 10+ Responsive Web Design Tools to Speed Up The Work Flow