Viewport-Resizer

Viewport Resize, tool per testare il responsive design

Una volta realizzato il nostro sito responsive occorre testarlo, per verificare la corretta visualizzazione delle pagine con le differenti risoluzioni. Per farlo dovremmo avere un buon numero di tablet e smartphone sui quali effettuare le prove. Questo non è ovviamente possibile, bisogna quindi trovare una soluzione alternativa. Gli strumenti a nostra disposizione sono numerosi, tra questi uno si distingue per semplicità ed efficacia.
Sto parlando di Viewport Resizer, un tool bookmarklet che si fa notare per l’innegabile vantaggio di lavorare in tempo reale.

Per utilizzarlo sono sufficienti pochi passaggi.

La prima cosa da fare è ovviamente collegarsi al sito, dopodiché cliccare sul pulsante Click or Bookmark e trascinarlo sulla barra dei segnalibri. In un’altra scheda va aperta la pagina che intendiamo testare, per poi cliccare su resize.

A questo punto, in alto, visualizzeremo una barra scura con le opzioni che ci interessano, tra cui le cinque risoluzioni di default:

  1. Mobile (e.g. Apple iPhone): 320 x 480
  2. Apple iPhone 5: 568 x 320
  3. Small Tablet: 600 x 800
  4. Tablet (e.g. Apple iPad 2-3rd, mini): 768 x 1024
  5. Widescreen: 1280 x 800

Con la sesta, customize, possiamo impostarla manualmente.

Viewport Resizer

I vantaggi di questo tool sono molteplici, a partire dalla facilità d’uso, la riuscita dei test ed alla possibilità di effettuare le simulazioni senza aprire più pagine. Il suo impiego, inoltre, torna comodo in caso di verifica delle web-pages con i clienti o il team di lavoro.

Il servizio è gratuito, basta collegarsi a Viewport Resizer.


6 Comments

  • Mattia

    23 gennaio 2013

    Senza dover utilizzare servizi online o installare alcunché, è possibile testare il responsive design di un sito attraverso la “Visualizzazione flessibile” di Firefox (si attiva dal menù “Strumenti” -> “Sviluppo web” -> “Visualizzazione flessibile” o premendo i tasti CTRL+MAIUSC+M).

    Reply
    • Andrea

      23 gennaio 2013

      Che ci sia anche per Chrome una funzione simile??

      Reply
  • camu

    23 gennaio 2013

    A quando il sito di Italian Web Design responsive?

    Reply
  • Andrea

    27 gennaio 2013

    Modificare il tema esistente è un po’ complicato… diciamo al prossimo cambio template 😀

    Però c’è installato WP-Touch da mobile si legge molto bene 😉

    Reply
  • Mattia

    28 gennaio 2013

    In Chrome non mi sembra che ci sia nulla per fare tutto ciò, però esiste l’estensione Web Developer (http://chrispederick.com/work/web-developer/) che ha tra le tante funzionalità anche quella per simulare le diverse risoluzioni.

    Reply
  • camu

    28 gennaio 2013

    Andrea, Chrome ha questa funzione all’interno del suo Inspector. Clicca sull’icona a forma di ingranaggio nell’angolo in basso a destra (dopo aver premuto F12) e vai alla seconda linguetta 🙂 Buon divertimento!

    Reply

Lasciaci un tuo commento!

This site uses Akismet to reduce spam. Learn how your comment data is processed.