webzwerver

wandering through the world (wide web)

Testen van responsive design

Je website moet goed naar voren komen op elk device. Telefoon, tablet, PC of TV. hebben allemaal verschillende afmetingen. Zeker als je ook nog rekening wilt houden met het draaien van schermen. Dan komen er weer een aantal schermformaten bij. Naast het schermformaat is de browser erg bepalend voor de look-and-feel van de website. Een aantal pixels verschil kan er net voor zorgen dat t plaatje niet aan het eind van de regel staat, maar aan het begin van de volgende regel. Eigenlijk wil je dat allemaal controleren.

Het is ondoenlijk om voor elke browser/scherm combinatie een aparte stylesheet of apart contentkanaal te maken. Derhalve is het responsive design al geruime tijd populair. Verschillende CSS frameworks zijn hiervoor op de markt met allemaal hun eigen sterke/bewezen punten. Maar hoe controleer je nu makkelijk of deze frameworks dat doen dat ze beweren te doen?

Dat kan heel makkelijk met het volgende websites:

Op de tool browsershots.org  kan je een URL invoeren. Vervolgens gaat deze tool je website bezoeken met verschillende combinaties van systemen en browsers. Daar zitten erg gangbare browsers tussen zoals IE en Firefox maar ook wat meer exotischere exemplaren als Rekonq. Na een kleine tijd verschijnen er allemaal screenshots die je stuk voor stuk kan aanklikken. Eventueel kan je nog een selectie maken op schermresolutie.

Screenfly van quircktools heeft een mooi design waarin je per apparaat (Telefoon, Tablet, PC of TV) je website in kan laden. Per gekozen apparaat en type kan je bekijken hoe je website er in uitkomt. Een andere tool, maar dan een extensie (resize windows) kan dat direct vanuit Chrome doen. Even snel een ontwerp testen tegen verschillende verhoudingen.


Tags: online · webtool

There are no comments yet...Kick things off by filling out the form below.

Leave a Comment

Leave this field empty: