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:
- Mobile (e.g. Apple iPhone): 320 x 480
- Apple iPhone 5: 568 x 320
- Small Tablet: 600 x 800
- Tablet (e.g. Apple iPad 2-3rd, mini): 768 x 1024
- Widescreen: 1280 x 800
Con la sesta, customize, possiamo impostarla manualmente.
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.
L'Autore
Mi occupo di grafica e webdesign da un decennio. Da un paio di anni mi sono avvicinato al mondo della scrittura online, come webwriter e content editor. Mi reputo fortunato per aver trasformato in lavoro due grandi passioni.
6 Commenti
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).
Che ci sia anche per Chrome una funzione simile??
A quando il sito di Italian Web Design responsive?
Modificare il tema esistente è un po’ complicato… diciamo al prossimo cambio template
Però c’è installato WP-Touch da mobile si legge molto bene
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.
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!