Tips Webontwikkeling

Testen website op verschillende resoluties

Het internet van vandaag de dag is heel anders dan het internet van pak en beet vijf jaar terug. Waar het in die tijd nog volstand om een website te ontwerpen welk alleen geschikt is voor op de computer, moet er vandaag rekening worden gehouden met dat de website geschikt is voor computers, smartphones, tablets, tv’s en niet te vergeten de smartwatch. Hierbij rijst natuurlijk de vraag op hoe weet ik of mijn website geschikt is voor al deze platformen.

Allereerst is het van belang dat de website volgens het responsive-design principe is opgebouwd. Responsive design houd in dat de website zich aanpast aan de breedte van het scherm en hierdoor geschikt is voor verschillende schermgroottes. Wanneer uw website hieraan voldoet is de eerste stap al gezet, helaas hoeft dit nog niet direct te betekenen dat uw website ook geschikt is voor op een smartphone.

De beste manier van testen is natuurlijk met betreffende apparaat in de hand, maar aangezien het onmogelijk is om in bezit te zijn van elk apparaat waarop je de website kan bekijken, zullen we moeten uitwijken naar een eenvoudigere manier van testen.

Vensterbreedte verkleinen
De makkelijkste om te zien hoe een website zich gedraagt op verschillende schermgroottes is door het venster van de browser te verkleinen in breedte.

Mozilla Firefox
Mozilla Firefox heeft een hulpmiddel ingebouwd om website te bekijken op vooraf ingestelde resoluties. Via Development Tools valt dit hulpmiddel terug te vinden.

ResponsiveModeBootstrap

Viewport resizer
Een andere mogelijkheid is door gebruik te maken van MalteWassermann browser bookmark-link. Hiermee is het mogelijk om in de browser websites te testen op verschillende resoluties via de toolbar welk is toegevoegd. Deze plug-in werkt niet in Internet Explorer.
http://lab.maltewassermann.com/viewport-resizer/

Viewport resizer

Paar tips:
Om af te sluiten heb ik nog een paar tips voor jullie over hoe een website het beste kan worden ontwikkeld. Het is raadzaam om uit te gaan van het mobile-first principe. Dit houd in dat de website eerst voor een smartphone wordt ontworpen en daarna word uitgebreid naar andere apparaten, tablets of computers. Hierbij moet gebruik worden gemaakt het responsive design. Verder is het raadzaam om geen tabellen te gebruiken, aangezien dit negen van de tien keer voor problemen zorgt. Wellicht nog belangrijker is om de opzet van de website zo simpel mogelijk te houden.

Onthoud,
Minder is meer!

Mocht je vragen hebben of is het tijd dat jouw website een update krijgt, neem dan gerust contact met mij op.