Bekijk
Eerdere winnaars van FD Gazellen, De Sterkste Schakel Rijnland & EY Entrepreneur of The Year.

Waarom een responsief webdesign echt een must is

28-10-2022 7 min leestijd

Desktop first of mobile first? Nee. Ga juist voor balans met een volledig responsief webdesign.

Wist je dat 80% van de websitebezoekers een website via smartphone of tablet bezoekt? Dat geeft wel aan hoe belangrijk het is dat je website goed werkt op zowel desktop als mobiele devices. Waar vroeger speciaal een aparte mobiele website gebouwd werd, kiezen we nu juist voor webdesigns die volledig responsief zijn. Maar hoe pak je dat aan?

Mobiel of desktop. Voor welk device ga je designen? De ene organisatie geeft de voorkeur aan desktop designs omdat ze zien dat de meeste websitebezoekers hun desktop gebruiken, terwijl het andere bedrijf juist veel meer bezig is met de mobiele designs.

Bij SERA zien we ook dat mobiele websitebezoekers flink aan terrein winnen. Maar betekent dit dat alle websites voortaan alleen voor mobiele devices ontworpen moeten worden? Nee, zeker niet. De kracht zit hem juist in een volledig responsief webdesign.

Beloning van Google

Een website scoort hoger in Google wanneer deze mobielvriendelijk is. Huh, echt? Ja, echt. De zoekmachine stuurt namelijk aan op mobile first indexing. Kortgezegd houdt dit in dat organisaties die een mobielvriendelijke website hebben, beloond worden door Google. Hiermee erkent Google dat de meeste mensen hun mobiele apparaat gebruiken om een website te bezoeken.

Deze trend heeft gezorgd voor een omslag bij webdesigners. Een website die responsief is op mobiele devices is geen luxe meer, maar een must. Voorheen stond desktopgebruik centraal en werd er zelfs een afzonderlijke mobiele versie van een website gebouwd (je kent ongetwijfeld m.facebook.com wel). Maar dat concept is achterhaald. Daar zijn we het allemaal over eens. Webdesigns worden nu in veruit de meeste gevallen mobile first gebouwd.

Daar plaatsen we als SERA wel een essentiële kanttekening bij: een goede desktopervaring blijft ook vandaag de dag van belang. Dat de focus meer ligt op een mobielvriendelijk design betekent namelijk niet dat we de desktop helemaal moeten vergeten. Waar deze verandering wel om vraagt is een volledig responsief ontwerp voor de website. Dit houdt in dat de website zich automatisch aanpast naar de grootte van het scherm van de gebruiker.

Belangrijke functionaliteiten

Heel leuk natuurlijk dat we onze mobiele devices zoveel gebruiken, maar dat betekent wel dat front-end developers rekening moeten houden met de lay-out van het webdesign op kleinere (mobiele) schermen. Het schermformaat is anders, waardoor de content anders ingedeeld moet worden. Klikken gebeurt met een vinger, niet met een cursor. En mensen gebruiken hun telefoon ook onderweg, wat gevolgen heeft voor zaken als de laadsnelheid, lichtinval en aandachtsspanne.

Navigatie

Eén van de belangrijkste uitdagingen bij het ontwikkelen van volledig responsieve webdesigns is navigatie. Want hoe kleiner het scherm, hoe lastiger het wordt om dezelfde inhoud te tonen als bij een desktopdesign. Tegelijkertijd wil je niet inleveren op de gebruikerservaring; alles moet net zo soepel werken als op de desktopversie van de website. Als dit niet het geval is, klikken websitebezoekers sneller weg, wat omzet kost. En dat willen we natuurlijk voorkomen.

Het zogenaamde ‘hamburgermenu’ is daarom erg populair. Je weet wel, dat icoontje met drie streepjes boven elkaar. De grootte van dit menu moet natuurlijk precies goed zijn: niet onnodig groot, maar wel groot genoeg om met je vinger op te kunnen drukken. Een aandachtspunt is wel om vooraf altijd een uitgebreid gebruikersonderzoek uit te voeren. Dat voorkomt dat je alles vanuit je eigen visie ontwerpt. Tenslotte staat de ervaring van de websitebezoeker centraal.

Schermen van smartphones worden steeds groter. En websitebezoekers navigeren het liefst met één hand. Op veel websites zie je daarom ‘sticky buttons’ terug. Dit zijn knoppen die altijd op dezelfde plek blijven staan. Denk aan inloggen, toevoegen aan favorieten en contact opnemen. Maar denk ook aan een ‘floating’ back-to-top button rechts onderin, vooral handig bij een langere webpagina. Punt van aandacht: de ruimte die deze buttons innemen, moeten ze wel verdienen. En zorg dat ze andere content op de website niet in de weg zitten. Dan voorkom je dat websitebezoekers afgeleid worden.

Zorg er bovendien voor dat websitebezoekers zo min mogelijk verticaal hoeven te scrollen. Is dit wel het geval? Dan is de kans groot dat ze het overzicht verliezen, met minder conversie tot gevolg. En dat mag natuurlijk nooit de bedoeling zijn. We waarschuwen je wel graag voor zogenaamde scroll hijacking. Dit komt voor wanneer een website beïnvloedt hoe een websitebezoeker op een pagina moet scrollen. Denk bijvoorbeeld aan horizontaal scrollen bij een content slider. Bij SERA noemen we zo’n carrousel dan ook niet voor niets een sluipmoordenaar.

Gebruikersgemak

Niemand zit te wachten op een website die langzaam laadt. Als websitebezoeker haak je dan af. De laadsnelheid van een webpagina is dan ook van belang om rekening mee te houden. Mobiele gebruikers beschikken tenslotte niet altijd over razendsnelle wifi. Met minder bereik op 4G of 5G wil je dat jouw website ook uitstekend werkt. Zo voorkom je dat ze geïrriteerd raken en naar de website van de concurrent gaan. Onze tip: vermijd auto-play bij video’s op de mobiele website.

Wat je ook doet op de desktopversie, probeer tabbladen op mobiele versie te vermijden. Het effect op een desktop is grafisch vaak aantrekkelijk, maar op mobiel is dit lastiger. Zeker bij een hoger aantal tabbladen zorgt het voor verwarring. We horen het je denken: hoe lossen we dat dan op? Het makkelijkste is om de content te beperken of meer te groeperen. Van alternatieven als tabbladen laten ‘scrollen’, waarbij je tabbladen die initieel niet in het scherm passen verbergt, zijn wij bij SERA geen fan. Dit kan voor onduidelijkheid zorgen bij websitebezoekers.

Bonuspunten scoren als webshop? Zorg voor een goede filter op de website. Dit helpt de websitebezoeker om informatie makkelijker te vinden. Aandachtspuntje: bij het selecteren van meerdere filters is het belangrijk dat de pagina niet ververst wordt als je één filter hebt aangevinkt. Dat zorgt voor onnodige laadtijd. En toon bij het filteren onderin direct hoeveel items er nog overblijven. Dat maakt het visueel voor de gebruiker.

Visueel

Over visueel gesproken, het oog wil natuurlijk ook wat. Een goed leesbaar lettertype is dan ook essentieel. Dit doe je door een goed leesbaar formaat te hanteren, maar ook door afleidende elementen zoals schaduw te vermijden. Houd rekening met de koppen. Op mobiel worden deze vaak kleiner weergegeven. Maar je wil natuurlijk wel dat een bepaalde hiërarchie zichtbaar is in de teksten. Besteed dan ook extra aandacht aan hoe de tekst eruit komt te zien op de website.

Denk ook zeker aan de fold. Deze term kom uit de (papieren) krantenwereld. Het is de informatie op de website die zichtbaar is voordat de gebruiker scrolt. Op de desktop is natuurlijk veel meer ruimte above-the-fold dan bij mobiele devices. Daarom is het van belang om goed na te denken over de content die je toont. Plaats je een button onder de fold? Dan kan dit ervoor zorgen dat de conversieratio op mobiel lager is dan op de desktop. En wil je weten hoe ver je bezoekers scrollen op bepaalde pagina’s? Dat kun je vaststellen met scroll maps van Hotjar.

Afbeeldingen en iconen zijn ook belangrijk voor de mobiele versie van een website. Maak bij afbeeldingen zoveel mogelijk gebruik van horizontale ruimte op het scherm. En zorg dat afbeeldingen in meerdere resoluties beschikbaar zijn, zodat de afbeelding op elk scherm goed laadt. Een icoon wordt vaak gebruikt om tekst te vervangen die je op de desktopversie wel ziet. Denk bijvoorbeeld aan een vergrootglas voor de zoekbalk en een poppetje die verwijst naar het account van de gebruiker. Onze tip: kies altijd voor herkenbare iconen, dat voorkomt een hoop verwarring.

Veel organisaties kiezen ervoor om hun content op desktop in meerdere kolommen weer te geven en op mobiel in een enkele kolom. Bij SERA is die enkele kolom op mobiele devices niet heilig. Soms werkt het namelijk beter om twee kolommen te hanteren. Bijvoorbeeld bij het weergeven van de Unique Selling Points (USP's). Zo voorkom je dat websitebezoekers eindeloos moeten scrollen. Want van eindeloos scrollen wordt niemand gelukkig.

Zelf aan de slag!

De kern van het verhaal? Webdesigns moeten tegenwoordig volledig responsief zijn. Dus niet alleen voor desktop. En niet alleen voor mobiel. Maar juist een webdesign geschikt voor ieder device. Een uitdaging voor webdesigners, maar wel essentieel om websitebezoekers te trekken én te behouden.

Kan jij wel wat hulp gebruiken om jouw website te optimaliseren voor mobiel? De front-end developers van SERA helpen je graag!

Geschreven door

Max van Weenen info@sera.nl 0172 473 430 Neem contact op
afbeelding contactpersoon