Responsive website test

We hebben hier een tool ingebouwd om je website te testen op verschillende beeldschermen. Vele mensen bekijken websites steeds op hetzelfde toestel. Er wordt dikwijls niet stilgestaan dat op een breder of smaller beeldscherm de website een andere design kan hebben. Met deze responsive test krijg je in 1 oogopslag een beeld van een website.

De test geeft de 4 belangrijkste formaten weer. Desktop, Laptop, Tablet en Smartphone. De test is voortdurend live.

Heeft de website bijvoorbeeld een slider met afbeeldingen, Revolution slider of een andere, dan zie je de website live in actie.

Er bestaan meer van deze pagina's op het internet. Maar nooit helemaal zoals we het zelf wilden en soms zelfs betalend.

Dan dachten we, gewoon even ontwikkelen en gratis houden. Zo dragen we weeral ons steentje bij tot een beter internet. Goed internet is een basisbehoefte, toch?

Soms worden elementen die op een breed scherm te zien zijn weggelaten op een smaller beeldscherm. Soms worden elementen zoals grote foto's niet vertoond op smartphone. Dit kan met layout te maken hebben of om een snellere laadtijd te bekomen. In het begin van het "mobielvriendelijke" tijdperk bouwden heel wat websites een aparte mobiele versie. Persoonlijk hebben we daar nooit in geloofd.

RWD Responsive Webdesign

RWD of Responsive Webdesign is een veel betere aanpak. De website is zo gecodeerd dat het breekpunten heeft in de layout. Deze breekpunten hangen af van het aantal beeldpunten, pixels. RWD is gebaseerd op een kolommenraster. Meestal van 12 kolommen. Op een breekpunt schuiven een aantal van de rechterkolommen onder de linkerkolommen. Je gaat zo bijvoorbeeld van 12 naar 8 naar 6 ... tot je aan 1 kolom op smartphone zit. De aandachtige surfer denkt nu, waarom zie ik dan soms nog 2 kolommen op mijn smartphone? Dat komt door geneste kolommen, kolommen in kolommen zeg maar.

De laatste jaren is er een trend geweest naar het mobile first webdesign. Omdat er meer mobiel gesurft wordt dan via laptop of desktop. Allemaai mooi maar smartphones groeien, 4 inch, 5 inch, 6 inch, en wat te denken van openklapbare smartphones.

En met een Smart TV kan je nu ook internetten. Spijtig genoeg zijn de meeste templates gefocust op een limiet van rond de 1200 pixels breed. Met een paar webdesign trukken, kunnen we wel een aantal rijen gaan uitrekken tot de volledige breedte. Maar om even terug te komen waarom 1200 pixels als een HD scherm 1920 pixels breed (en 1080 pixels hoog) is? En nu zijn we bij 4K aanbeland. 4K is 4 x HD of 2 x 2.

4k resolutie is 3840 breed op 2160 hoog.