Test je responsive design in enkele kliks met Viewport Resizer
Viewport resizer is een handige tool die je helpt bij het testen van je responsive design. In een handomdraai check je hoe jouw webdesign eruit ziet in verschillende resoluties of apparaten als smartphones, tablets en widescreens.
Je kan je eigen bookmarklet samenstellen, zodat je zelf bepaalt welke resoluties en apparaten je standaard aan je bookmarklet wil toevoegen. Zo kies je zelf uit apparaten gaande van de Apple iPhone, Samsung Galaxy Tab, Blackberry tot een Sony Ericsson.
Hoe ga je te werk?
Voeg de bookmarklet toe aan je browser, open de webpagina die je wil testen, activeer de boookmarklet en kies check de verschillende schermresoluties van de pagina.
Enkele tips:
- Gebruik Viewport resizer samen met een web development tool zoals Firebug. Zo kan je al een pak css aanpassingen testen vooraleer je echte css bestand aan te passen.
- Maak gebruik van de ‘Reload current page’ feature in de toolbar van Viewport resizer. Op die manier wordt je pagina binnen het huidige scherm herladen en kan je meteen de aanpassingen bekijken die je in het (echte) css bestand gemaakt hebt.
- Viewport resizer is -zoals de meeste gratis online responsive design tools- geen simulatie van een echt apparaat. Bekijk je design dus steeds op alle mogelijke aparaten die je ter beschikking hebt.
Happy Responsive Designing!
Leave a reply