De meeste mensen bezoeken een website voor het eerst op hun telefoon, vaak onderweg en met weinig geduld. Een ontwerp dat alleen op een breed scherm klopt, laat juist die groep in de steek. Responsive ontwerp lost dat op: de site past zich automatisch aan elk scherm aan, van telefoon tot brede desktop. Maar responsive is geen technisch sluitstuk dat je achteraf toevoegt; het is een uitgangspunt dat je vanaf de eerste schets meeneemt. Deze gids legt uit waarom dat zo is en hoe je het van de grond af aanpakt.

Wat responsive ontwerp inhoudt

Responsive ontwerp betekent dat een website zich aanpast aan de grootte van het scherm. In plaats van een vaste, voor desktop gemaakte pagina die op de telefoon wordt verkleind, schuiven en schalen de onderdelen mee. Kolommen worden rijen, menu's vouwen samen, tekst blijft leesbaar. De bezoeker krijgt op elk apparaat een opzet die past, zonder in te zoomen of horizontaal te scrollen.

Het alternatief, een aparte mobiele site naast de desktopversie, betekent dubbel onderhoud en loopt snel uit de pas. Een responsive opzet is één site die overal werkt, eenvoudiger te beheren en beter voor je vindbaarheid, omdat zoekmachines mobiel gebruik zwaar laten meewegen.

Waarom mobiel eerst

De meest robuuste aanpak begint niet bij de desktop maar bij de telefoon. Wie eerst voor het kleinste scherm ontwerpt, wordt gedwongen tot scherpe keuzes: wat is echt belangrijk, en wat kan weg? Die discipline maakt het hele ontwerp sterker, ook op grote schermen.

Vanaf de mobiele basis bouw je naar boven: ruimte en extra elementen voeg je toe naarmate het scherm groter wordt, niet andersom. Deze denkwijze werk ik uit in het artikel over mobiel eerst ontwerpen. Het sluit aan op de gedachte uit de gids over een conversiegerichte website ontwerpen: minder afleiding, meer focus op wat telt.

Flexibele lay-outs

Het hart van responsive ontwerp is een flexibele lay-out. In plaats van vaste breedtes in pixels werk je met verhoudingen en een raster dat meeschaalt. Een rij van drie kolommen op de desktop wordt netjes een kolom onder elkaar op de telefoon.

Beeld dat meebeweegt

Beeld is vaak de plek waar responsive ontwerp misgaat. Een foto die op de desktop prachtig is, kan op de telefoon de halve schermhoogte vullen of juist het belangrijkste deel afsnijden. Goed responsive ontwerp houdt daar rekening mee: beelden schalen mee, en bij verschillende schermen wordt een passende uitsnede getoond.

Ook de bestandsgrootte telt. Een zware foto die op desktop nog acceptabel laadt, maakt een mobiele verbinding traag. Beeld dat is geoptimaliseerd voor snelheid hoort bij responsive ontwerp; de samenhang tussen beeld, snelheid en ontwerp behandel ik in snelheid en design.

Interactie op elk apparaat

Een muis en een vinger zijn niet hetzelfde. Op een telefoon bedien je met je duim, zonder de precisie van een cursor en zonder hover-effecten. Responsive ontwerp houdt daar rekening mee: knoppen en links zijn groot genoeg om makkelijk te raken, en belangrijke acties staan binnen handbereik.

Het mobiele menu verdient daarbij aparte aandacht. Een hamburgerknop is gangbaar, maar niet altijd de beste keuze. Hoe je een mobiel menu echt bruikbaar maakt, lees je in een mobiel menu is meer dan een hamburger.

Werken met breakpoints

Breakpoints zijn de punten waarop de lay-out verandert: bijvoorbeeld waar een rij van kolommen overschakelt naar onder elkaar. De kunst is om breakpoints te kiezen op basis van waar het ontwerp gaat knellen, niet op basis van een vaste lijst apparaten. Schermformaten veranderen voortdurend; je ontwerp moet daar tussendoor ook goed werken.

Een veelvergeten gebied is de tablet, dat qua breedte tussen telefoon en desktop in zit en daardoor makkelijk wordt verwaarloosd. Hoe je dat formaat netjes meeneemt, behandel ik in responsive breakpoints en de tablet tussen wal en schip.

Zelf doen of uitbesteden?

Veel websitebouwers en templates zijn standaard responsive, dus een basisniveau krijg je vaak vanzelf. Het verschil zit in de details: knellende lay-outs op tussenformaten, beeld dat niet meeschaalt, een mobiel menu dat irriteert. Wie het laat ontwerpen vanaf de grond, krijgt een site die op elk scherm doordacht aanvoelt in plaats van net acceptabel. Bekijk de dienst webdesign of UX en gebruiksvriendelijkheid, of neem vrijblijvend contact op.

Veelgestelde vragen

Responsive webdesign betekent dat een site zich automatisch aanpast aan de schermgrootte: van telefoon tot brede desktop. De lay-out, het beeld en de tekst schuiven en schalen mee, zodat de site op elk apparaat prettig te gebruiken is in plaats van een verkleinde versie voor de desktop.

In de meeste gevallen bij mobiel. De grootste groep bezoekers komt via de telefoon, en wie eerst voor het kleine scherm ontwerpt, wordt gedwongen tot scherpe keuzes over wat echt belangrijk is. Vanaf die basis bouw je naar grotere schermen toe.

Nee. Bij responsive is er een site die zich aanpast aan elk scherm. Een aparte mobiele site is een tweede versie die je los moet onderhouden en die snel uit de pas loopt. Een responsive opzet is vrijwel altijd eenvoudiger te beheren en beter voor je vindbaarheid.

Dan haakt een groot deel van je bezoekers af. Een site die op de telefoon te klein, te traag of lastig te bedienen is, jaagt mensen weg en schaadt je vindbaarheid, omdat zoekmachines mobiel gebruik zwaar laten meewegen. Responsive is daarom geen luxe maar een basisvoorwaarde.

Verder in de kennisbank: Een conversiegerichte website ontwerpen · Toegankelijkheid en WCAG in de praktijk · Webdesign: de complete gids