Responsive webdesign: waarom een mobielvriendelijke website onmisbaar is

Je bekijkt een website op je computer en alles ziet er perfect uit. De teksten zijn goed leesbaar, afbeeldingen staan netjes naast elkaar en de navigatie werkt zoals verwacht.

Open dezelfde website vervolgens op een smartphone en het kan er plots helemaal anders uitzien.

Teksten worden te klein. Knoppen staan te dicht bij elkaar. Afbeeldingen vallen buiten het scherm. Of bezoekers moeten horizontaal scrollen om een pagina te kunnen lezen.

Dat is precies waarom responsive webdesign zo belangrijk is.

Een moderne website moet zich automatisch aanpassen aan het scherm waarop iemand hem bekijkt. Niet alleen op een desktopcomputer, maar ook op een laptop, tablet en smartphone.

Wat is responsive webdesign?

Responsive webdesign is een manier om een website zo te ontwerpen en bouwen dat de inhoud zich automatisch aanpast aan verschillende schermformaten.

Je bouwt dus niet noodzakelijk een aparte website voor iedere smartphone of tablet.

Dezelfde website verandert van indeling afhankelijk van de beschikbare ruimte.

Op een groot scherm kunnen bijvoorbeeld drie diensten naast elkaar staan.

Op een tablet worden dat misschien twee kolommen.

Op een smartphone verschijnen dezelfde diensten onder elkaar.

De inhoud blijft hetzelfde, maar de presentatie verandert.

Dat noemen we een responsive website.

Waarom is een mobielvriendelijke website zo belangrijk?

Een mobielvriendelijke website gaat verder dan alles simpelweg kleiner maken.

Bezoekers gebruiken een smartphone namelijk anders dan een computer.

Op een computer heb je een groot scherm, een muis en een toetsenbord. Op een smartphone werk je met een kleiner scherm en je vingers.

Dat heeft invloed op vrijwel ieder onderdeel van een website:

• navigatie.
• lettergrootte.
• knoppen.
• formulieren.
• afbeeldingen.
• witruimte.
• paginaopbouw.

Een ontwerp dat uitstekend werkt met een muis kan frustrerend zijn wanneer iemand dezelfde elementen met een duim probeert aan te tikken.

Een website voor smartphone ontwerpen begint niet bij verkleinen

Een veelgemaakte fout is eerst een volledige desktopwebsite ontwerpen en die achteraf zo klein mogelijk proberen te maken.

Een goede website voor smartphone vraagt soms andere keuzes.

Neem bijvoorbeeld een hero bovenaan een website.

Op desktop heb je misschien ruimte voor:

• een grote titel.
• een langere introductietekst.
• twee knoppen.
• een grote afbeelding.
• extra grafische elementen.

Op een smartphone kan dat te druk worden.

Daar kun je bijvoorbeeld kiezen voor:

• een kortere titel.
• compactere tekst.
• één belangrijke knop.
• een kleinere of anders uitgesneden afbeelding.

De boodschap blijft hetzelfde, maar de informatie krijgt meer prioriteit.

Hoe werkt een responsive website?

Bij responsive webdesign worden verschillende technieken gecombineerd.

Flexibele layouts

Elementen krijgen niet altijd één vaste breedte.

Een contentblok kan bijvoorbeeld een percentage van de beschikbare ruimte gebruiken. Daardoor kan het meegroeien of verkleinen met het scherm.

Breakpoints

Een breakpoint is een schermbreedte waarop de layout verandert.

Bijvoorbeeld:

Desktop: drie kolommen
Tablet: twee kolommen
Smartphone: één kolom

Breakpoints moeten niet gekozen worden omdat één specifiek toestel een bepaalde breedte heeft. Ze worden vooral gebruikt waar de inhoud een andere indeling nodig heeft.

Responsive afbeeldingen

Afbeeldingen moeten eveneens kunnen meeschalen.

Een afbeelding van 1.500 pixels breed zomaar op een klein smartphonescherm tonen is niet altijd efficiënt.

De website kan geoptimaliseerde afbeeldingsformaten en geschikte afmetingen gebruiken zodat bezoekers niet onnodig zware bestanden moeten downloaden.

Responsive webdesign en gebruiksvriendelijkheid

Een responsive website kan technisch correct schalen en toch slecht werken.

Daarom hoort responsive webdesign nauw samen met UX, oftewel user experience.

Stel dat een contactknop op desktop duidelijk zichtbaar is.

Op mobiel staat dezelfde knop helemaal onderaan een lange pagina.

Technisch werkt de website.

Maar vanuit gebruiksvriendelijkheid kan het beter.

Je kunt dan bijvoorbeeld eerder op de pagina een duidelijke contactmogelijkheid aanbieden.

Bij mobiele UX kijk je dus niet alleen naar:

Past alles op het scherm?

Je kijkt ook naar:

Kan iemand gemakkelijk doen waarvoor hij naar deze pagina gekomen is?

Knoppen moeten gemakkelijk aanklikbaar zijn

Op desktop kun je met een muiscursor heel nauwkeurig klikken.

Met je vinger is dat moeilijker.

Daarom moeten knoppen en links voldoende groot zijn en voldoende ruimte rondom hebben.

Denk bijvoorbeeld aan twee kleine links:

Bel mij | Stuur e-mail

Wanneer ze bijna tegen elkaar staan, kan een bezoeker gemakkelijk de verkeerde link aantikken.

Meer witruimte maakt de pagina niet alleen rustiger, maar vaak ook gemakkelijker te bedienen.

Tekst moet leesbaar blijven

Bezoekers zouden niet moeten inzoomen om gewone tekst te kunnen lezen.

Let bij een mobiele website daarom op:

• voldoende grote letters.
• goede regelafstand.
• voldoende contrast.
• niet te lange tekstregels.
• duidelijke tussenkoppen.
• korte alinea’s.

Vooral dat laatste is belangrijk.

Een alinea die op desktop maar vier regels lang is, kan op een smartphone gemakkelijk acht of tien regels innemen.

Korte alinea’s maken lange pagina’s daardoor veel gemakkelijker scanbaar.

Navigatie vraagt extra aandacht

Een groot desktopmenu past meestal niet op een smartphonescherm.

Daarom wordt vaak een mobiel menu gebruikt.

Maar ook daar geldt: eenvoud werkt meestal beter.

Wanneer een bezoeker eerst door verschillende submenu’s moet navigeren om een belangrijke dienst te vinden, ontstaat onnodige frustratie.

Een duidelijke sitestructuur helpt dus zowel desktop- als mobiele bezoekers.

Wie eerst de structuur van een nieuwe website wil bepalen, kan hiervoor bijvoorbeeld met een wireframe werken. Een wireframe maakt duidelijk welke informatie en navigatie-elementen een pagina nodig heeft voordat de visuele vormgeving wordt uitgewerkt.

Mobiele website optimaliseren voor snelheid

Een mobiele website optimaliseren betekent ook aandacht besteden aan prestaties.

Smartphonegebruikers zitten niet altijd op een snelle wifi-verbinding.

Zware afbeeldingen, video’s, animaties en scripts kunnen daardoor extra merkbaar worden.

Enkele praktische verbeteringen zijn:

• afbeeldingen comprimeren.
• WebP of een ander modern formaat gebruiken.
• afbeeldingen niet groter laden dan nodig.
• caching gebruiken.
• onnodige scripts beperken.
• video’s pas laden wanneer ze nodig zijn.

Snelheid en mobiele UX versterken elkaar.

Een prachtig mobiele ontwerp dat vijf seconden nodig heeft voordat het bruikbaar wordt, biedt nog steeds geen optimale ervaring.

Heeft responsive webdesign invloed op SEO?

Mobiele bruikbaarheid en technische toegankelijkheid zijn ook relevant voor zoekmachines.

Google gebruikt de mobiele versie van websitecontent voor indexering en ranking via mobile-first indexing. Een website hoeft daarbij geen aparte mobiele URL te hebben; responsive webdesign is een gebruikelijke aanpak waarbij dezelfde inhoud zich aan het scherm aanpast.

Voor SEO blijft vooral belangrijk dat essentiële inhoud ook op mobiel beschikbaar en toegankelijk is.

Verberg dus niet zomaar belangrijke teksten of links omdat de mobiele versie anders te lang wordt.

Maak de presentatie beter in plaats van waardevolle inhoud weg te halen.

Website mobiel maken: controleer meer dan de homepage

Wanneer ondernemers hun website mobiel maken of controleren, bekijken ze vaak alleen de homepage.

Maar bezoekers komen via Google misschien rechtstreeks terecht op:

• een dienstenpagina.
• blogartikel.
• projectpagina.
• contactpagina.
• productpagina.

Controleer daarom verschillende paginatypes.

Een blog kan bijvoorbeeld uitstekend werken op mobiel terwijl een contactformulier buiten het scherm valt.

Vergeet formulieren niet

Een contactformulier is vaak een van de belangrijkste conversiepunten op een bedrijfswebsite.

Toch wordt het soms pas helemaal op het einde getest.

Controleer op smartphone of:

• velden voldoende groot zijn.
• labels duidelijk zichtbaar zijn.
• foutmeldingen begrijpelijk zijn.
• keuzelijsten goed werken.
• de verzendknop gemakkelijk bereikbaar is.
• het juiste toetsenbord verschijnt waar mogelijk.

Iemand die bijna contact wil opnemen, wil je niet verliezen door een lastig formulier.

Test op echte toestellen

Een websitebouwer kan verschillende schermbreedtes simuleren.

Dat is handig tijdens het ontwerpen.

Maar test daarnaast ook op echte apparaten.

Open je website bijvoorbeeld op een smartphone en probeer zelf:

1. het menu te openen.
2. een dienst te vinden.
3. een volledig artikel te lezen.
4. op een knop te klikken.
5. een formulier in te vullen.
6. terug naar de homepage te gaan.

Zo merk je problemen die tijdens het ontwerpen gemakkelijk over het hoofd worden gezien.

Veelgemaakte fouten op mobiele websites

Een aantal problemen komt regelmatig terug.

Veel van deze problemen zijn relatief eenvoudig te voorkomen wanneer mobiel gebruik vanaf het begin onderdeel is van het ontwerp.

Moet je eerst voor mobiel ontwerpen?

Dat hangt af van het project.

Een mobile-first aanpak begint bij het kleinste scherm en breidt de layout daarna uit naar grotere schermen.

Dat kan nuttig zijn omdat je gedwongen wordt eerst de belangrijkste inhoud te bepalen.

Maar het belangrijkste is niet welke schermgrootte als eerste ontworpen wordt.

Belangrijker is dat desktop, tablet en mobiel allemaal bewust worden uitgewerkt en getest.

Wanneer is je bestaande website niet mobielvriendelijk genoeg?

Een oudere website hoeft niet vervangen te worden alleen omdat hij enkele mobiele problemen heeft.

Soms kunnen gerichte aanpassingen voldoende zijn.

Een grondigere aanpak wordt interessanter wanneer:

• de website regelmatig horizontaal scrollt;
• teksten structureel te klein zijn.
• het menu moeilijk bruikbaar is.
• formulieren niet goed werken.
• de website erg traag is op mobiel.
• belangrijke pagina’s niet logisch herschikt kunnen worden.
• aanpassingen telkens nieuwe problemen veroorzaken.

In dat geval kan het efficiënter zijn om de structuur en techniek opnieuw te bekijken in plaats van losse problemen te blijven herstellen.

Responsive design bij een nieuwe website

Laat je een nieuwe website maken? Dan hoort responsive gedrag vanaf het begin bij het project.

Bij het ontwerp kun je vooraf bepalen:

• welke informatie bovenaan moet staan.
• hoe kaarten onder elkaar komen.
• wat er met grote afbeeldingen gebeurt.
• hoe het menu verandert.
• waar call-to-actions komen.
• hoe formulieren op kleinere schermen werken.

Daarmee voorkom je dat mobiel pas na de desktopversie als laatste taak wordt behandeld.

Kies je voor een templatewebsite, controleer dan eveneens hoe flexibel de gekozen template is.

Bij een website op maat kan de mobiele ervaring specifieker afgestemd worden op de inhoud en doelstellingen van de onderneming.

Veelgestelde vragen over responsive webdesign

Wat is het verschil tussen responsive en mobielvriendelijk?

Responsive beschrijft vooral hoe een layout zich technisch aan verschillende schermgroottes aanpast. Mobielvriendelijk is breder en gaat ook over leesbaarheid, snelheid, navigatie en bediening.

Heb ik een aparte mobiele website nodig?

Voor de meeste moderne bedrijfswebsites is dat niet nodig. Eén responsive website kan dezelfde inhoud geschikt presenteren op desktop, tablet en smartphone.

Is WordPress geschikt voor responsive websites?

Ja. WordPress kan uitstekend gebruikt worden voor responsive websites. Het uiteindelijke resultaat hangt wel af van het thema, de gebruikte pagebuilder, instellingen en de manier waarop de website gebouwd wordt.

Kan ik testen of mijn website responsive is?

Ja. Verklein je browservenster, gebruik de responsive hulpmiddelen van je browser en test vooral ook op echte smartphones en tablets.

Moet alle desktopinhoud ook op mobiel zichtbaar zijn?

Belangrijke inhoud hoort in principe toegankelijk te blijven. Soms kan de presentatie veranderen of kunnen minder belangrijke visuele elementen verdwijnen, maar verwijder niet zonder reden essentiële informatie.

Conclusie

Responsive webdesign is geen extraatje dat je achteraf aan een website toevoegt.

Bezoekers verwachten dat een website prettig werkt, ongeacht het apparaat dat ze gebruiken.

Een goede responsive website houdt daarom rekening met meer dan alleen schermbreedte. Tekst moet leesbaar zijn, knoppen moeten gemakkelijk werken, navigatie moet duidelijk blijven en pagina’s moeten snel laden.

Voor een onderneming betekent dat uiteindelijk iets heel praktisch: minder frustratie voor bezoekers en een gemakkelijkere weg naar een aanvraag of contact.

Is je huidige website op desktop prima, maar werkt hij minder goed op smartphone of tablet? Dan hoeft een volledige nieuwe website niet altijd de eerste stap te zijn. Een analyse van de mobiele structuur, snelheid en gebruiksvriendelijkheid kan duidelijk maken welke verbeteringen het meeste verschil maken.