24 september 2015

Waaraan denken bij een responsive website?

ux / design

Responsive design is ondertussen niet meer weg te denken op het web. Met de grote verscheidenheid aan beeldschermen, tablets en telefoons is het belangrijk om de beleving en content van je website op elk device te waarborgen voor je bezoekers. Maar waar let je op met zoveel diversiteit? W3S design guru Tineke legt het uit!

Wat is een responsive website?
Door een website ‘responsive’ op te zetten, zorg je dat de content van de website zich automatisch aanpast aan de breedte van het scherm. Hierbij worden teksten bijvoorbeeld smaller, titels een paar punten kleiner en het menu klapt in tot een icoontje. Best ingrijpend voor de vormgeving van je website. Daarom helpen we je op weg met een aantal belangrijke punten waar je aan moet denken bij het ontwikkelen van een responsive website.

Pixel perfect is dood, content is king!
Omdat er ontelbaar veel verschillende beeldformaten zijn ontstaan (en nog gaan ontstaan!), is het praktisch onmogelijk om voor al deze beeldschermen een apart ontwerp te maken en dit pixel-perfect na te bouwen. Pixel-perfect betekent dat het ontwerp van de website en de uiteindelijke technische realisatie 100% met elkaar overeenkomen.

Het design is daarom vooral een leidraad geworden en de nadruk ligt eens te meer op, jawel, de content. De boodschap die je wilt overbrengen is immers het belangrijkst aan jouw website. Hoe presenteren we deze content het beste op de verschillende beeldformaten? De designer is tijdens de bouwfase nauw betrokken bij het development team om te zorgen dat de content optimaal gepresenteerd wordt, maar ook om de uitgangspunten van het design te bewaken.

Zorg voor heldere navigatie
Op een mobieltje is de ruimte om je boodschap te communiceren beperkt. Dat betekent dat je creatief met je content zal moeten omgaan. Belangrijke winst kan worden gevonden in de navigatie van de website. Waar op desktop of laptop een navigatiebalk met acht menu-items en verschillende submenu’s prima functioneert, heb je op een mobiele telefoon simpelweg de ruimte niet. Voor een toegankelijke, duidelijke website is het belangrijk om de navigatie zo simpel mogelijk te houden. Ga bijvoorbeeld uit van vier tot zeven hoofdmenu-items en maximaal één sub niveau.

Daarnaast worden pagina’s op mobiel snel erg lang, doordat teksten smaller worden en blokken onder elkaar vallen. Dat betekent heel veel scrollen. Om te voorkomen dat mensen telkens helemaal terug naar boven moeten scrollen om bij het menu te komen, kun je het menu vast zetten bovenaan het browservenster. Zo is het menu altijd zichtbaar en heb je voldoende ruimte om de content weer te geven.

Houd rekening met dikke vingers
Waar je op desktop heel precies dingen aan kunt klikken met je muis, gebruik je op een tablet of mobiele telefoon je vingers om heen en weer te klikken. Dat werkt dus anders en vergt een ander type gebruiksvriendelijkheid. Vingers zijn een stuk minder precies. Een lijstje met links onder elkaar kan al snel zorgen voor problemen om de juiste aan te klikken. Teveel kleine knopjes naast elkaar kunnen frustratie veroorzaken. Om dit te voorkomen moet je bij een responsive website uitgaan van grote knoppen, een wat groter lettertype en regelafstand en meer witruimte.

Scrollen!
Onder de vouw & boven de vouw bestaat niet meer. Door de grote verscheidenheid aan beeldformaten die er zijn. Het is simpelweg onmogelijk om te bepalen welk deel de bezoekers van je website zien. Na jaren bezig geweest te zijn met de belangrijkste content boven de vouw plaatsen, is dit natuurlijk wel even wennen. Het goede nieuws is dat je bezoekers helemaal geen probleem hebben met scrollen. Natuurlijk blijft de bovenkant van de pagina in veel gevallen wel het eerste wat een bezoeker ziet. Daarom is het belangrijk te zorgen dat de info bovenaan de pagina uitnodigt om verder te scrollen. Hiervoor kun je bijv. duidelijk laten zien dat bepaalde info ‘afgeknipt’ is.

Meer weten?
Wil je meer weten over de responsive aanpak van W3S? Neem dan direct contact met ons en Tineke gaat je helpen!

Geschreven door: Tineke de Buck
Cookies?

We gebruiken cookies om het functioneren van onze website te verbeteren. De gegevens worden volledig anoniem verzameld.