Wat is responsive webdesign?

Responsive webdesign betekent dat je website zich aanpast aan het scherm waarop hij wordt bekeken. Eén adres, dezelfde inhoud, een indeling die meebeweegt van een telefoon van 320 pixels breed tot een monitor van 2560.

Dat is al jaren de standaard manier om een site te bouwen. Een aparte mobiele versie op een eigen adres kom je nog tegen bij oude systemen, en dat is geen route die je nu nog zou kiezen.

Dit artikel gaat over de techniek eronder. Wil je een bestaande site mobiel laten werken, dan is optimaliseren voor mobiel het praktische stuk, en begin je aan een nieuw ontwerp, dan hoort daar mobile first ontwerpen bij.

Waar het vandaan komt

De term is van Ethan Marcotte, die er in mei 2010 een artikel over schreef in A List Apart. Zijn idee was dat je niet per apparaat een ontwerp maakt, maar één ontwerp dat zich aanpast. Dat was destijds een breuk met de gewoonte om naast je site een aparte mobiele versie te draaien.

Wat het doorzette was Google. Op 21 april 2015 ging een aanpassing van het algoritme live waarbij mobielvriendelijkheid meewoog voor de posities in mobiele zoekresultaten. Binnen een jaar was responsive de norm bij zo ongeveer elke bouwer.

Sindsdien is de discussie verschoven. De vraag is niet meer of je site meebeweegt, want dat doet elk fatsoenlijk thema. De vraag is of hij dat ook goed doet, en daar valt in de praktijk nog genoeg op af te dingen.

De drie technieken die het werk doen

Onder de motorkap zitten drie dingen die samen zorgen dat een pagina meebeweegt.

• Een flexibel raster. Blokken krijgen hun breedte in procenten of in flexibele eenheden in plaats van in vaste pixels, zodat ze rekken en krimpen met de ruimte die er is.
• Media queries. Blokken regels in je stijlbestand die alleen gelden vanaf of tot een bepaalde breedte. Bijvoorbeeld: onder de 900 pixels komen deze drie kolommen onder elkaar.
• Flexibele afbeeldingen. Beelden die nooit breder worden dan hun vak, en waarbij de browser afhankelijk van het scherm een kleinere of grotere versie ophaalt.

Zo staat het in elke uitleg, ook in de mijne, en het is inmiddels niet meer het hele verhaal. Sinds moderne indelingstechnieken in CSS gemeengoed zijn, schrijf je voor veel gevallen helemaal geen media query meer.

De regel waar alles op staat of valt

In de kop van je HTML hoort een regel te staan die de browser vertelt dat de pagina de breedte van het apparaat moet aanhouden en niet moet uitzoomen. De viewport-instructie heet dat.

Ontbreekt hij, dan toont een telefoon je site als een verkleinde desktopversie van rond de 980 pixels breed. Alle media queries in je stijlbestand slaan dan nergens op, want het apparaat doet alsof het een breed scherm is. Het gekke is dat je site er dan niet kapot uitziet, alleen onleesbaar klein.

Bij elk modern WordPress-thema staat die regel er. Bij oude maatwerksites en bij pagina's die iemand ooit met de hand heeft gebouwd, ontbreekt hij nog wel eens. Dat is het eerste wat ik controleer als een site op een telefoon uitgezoomd opent.

Breekpunten kiezen

Een breekpunt is de breedte waarop je indeling van vorm verandert. Er is geen officiële lijst, en de lijstjes met apparaatnamen die je online tegenkomt zijn achterhaald zodra er een nieuw model uitkomt.

Kies je breekpunten daarom op je eigen ontwerp. Rek het venster van je browser langzaam op en kijk waar het lelijk wordt: waar een kop op vier regels komt, of waar een kolom te smal wordt om nog prettig te lezen. Daar hoort een breekpunt, en niet bij 768 omdat de eerste iPad die breedte had.

Voor de meeste bedrijfssites zijn drie of vier genoeg. Telefoon, tablet, laptop, breed scherm. Zie je een stijlbestand met elf breekpunten, dan is er meestal niet nagedacht over de indeling maar achteraf gerepareerd per geval.

Schrijf je zelf CSS, werk dan van klein naar groot. Je basisregels gelden dan voor de telefoon en elk breekpunt voegt iets toe vanaf een grotere breedte. Andersom werkt ook en levert bijna altijd meer regels op om weer ongedaan te maken.

Flexbox en grid nemen het meeste over

Het grootste deel van wat vroeger media queries vergde, doen de moderne indelingstechnieken vanzelf.

Een rij blokken die met flexbox is gemaakt, mag afbreken naar de volgende regel zodra ze niet meer passen. Je hoeft daar geen breedte voor op te geven. Bij grid kun je een raster opdragen om zoveel kolommen te maken als er passen, met een minimum breedte per kolom. Zes productblokken worden dan vanzelf drie bij twee op een tablet en één kolom op een telefoon.

Dat is een ander soort ontwerpen dan vroeger. Je legt niet meer per schermbreedte vast hoe het eruitziet, je geeft regels op waarbinnen de browser het zelf mag uitrekenen. Het resultaat werkt ook op formaten waar je nooit aan hebt gedacht, en dat is precies de bedoeling.

Media queries verdwijnen daarmee niet. Voor de grote structuur van je pagina heb je ze nog: het moment waarop een zijbalk onder de hoofdtekst schuift, of waarop het volledige menu een uitklapknop wordt.

Containerqueries voor onderdelen

Een media query kijkt naar de breedte van het scherm. Een onderdeel heeft daar weinig aan, want dat wil weten hoeveel ruimte het zelf krijgt.

Neem een kaartje met een foto links en tekst rechts. In de brede hoofdkolom werkt dat, in een smalle zijbalk moet de foto boven de tekst. Met alleen media queries los je dat op met twee varianten van hetzelfde kaartje en een extra label om ze uit elkaar te houden.

Met een containerquery reageert het kaartje op de breedte van het blok waarin het staat. Je bouwt het onderdeel dan één keer en het past zich overal aan. Chrome en Safari kregen dit in de tweede helft van 2022, Firefox begin 2023, dus je kunt het zonder terugvaloptie gebruiken.

Voor wie een site in herbruikbare onderdelen opbouwt, en dat is bij WordPress met globale rijen en herbruikbare blokken vrijwel iedereen, is dit de grootste verbetering van de laatste jaren.

Vloeiende maten in plaats van sprongen

Met alleen breekpunten springt je tekst. Bij 899 pixels is je kop 32 pixels en bij 900 opeens 48. Daartussen gebeurt er niets.

Sinds 2020 kun je in CSS een minimum, een gewenste waarde en een maximum in één regel opgeven. Je kop schaalt dan vloeiend mee tussen twee grenzen. Dat scheelt in een typografieblok tientallen regels en het ziet er op elke tussenbreedte goed uit, ook op de formaten die je niet hebt getest.

Gebruik voor lettergroottes rem in plaats van pixels. Dan blijft de instelling werken van iemand die zijn browser op een grotere basisletter heeft gezet, en dat is een grotere groep dan je denkt.

Let ten slotte op de eenheid voor honderd procent vensterhoogte. Op een telefoon rekent die de adresbalk mee die tijdens het scrollen wegschuift, waardoor een blok van een volledig scherm hoog net te hoog wordt. Sinds eind 2022 bestaan er aparte eenheden voor de kleine, de grote en de dynamische vensterhoogte die dat oplossen.

Afbeeldingen die zich gedragen

Een afbeelding is de meest voorkomende oorzaak van een indeling die omvalt. Drie dingen regelen dat.

Nooit breder dan het vak. Eén regel CSS die zegt dat een afbeelding maximaal honderd procent van zijn omhullende blok mag zijn. Zonder die regel duwt een foto van 2000 pixels je hele pagina naar rechts.

Meerdere formaten aanleveren. De browser kiest dan zelf welke versie hij ophaalt op basis van het scherm. WordPress doet dit sinds versie 4.4 uit december 2015 automatisch: het maakt bij het uploaden meerdere maten aan en zet ze allemaal in de code. Een telefoon haalt dan de kleine op en een breed scherm de grote.

Breedte en hoogte opgeven. Dan reserveert de browser de ruimte voordat de afbeelding binnen is en verspringt de tekst niet tijdens het laden. Dat is een van de dingen waar Google op meet.

Kies daarnaast een modern bestandsformaat. Bij gelijke kwaliteit levert webp merkbaar kleinere bestanden op dan jpeg, en WordPress ondersteunt dat sinds 2021 in de mediabibliotheek. Op een matige mobiele verbinding is dat het verschil tussen wachten en niet wachten.

Waarom een vaste breedte in een paginabouwer je site sloopt

Dit is de fout die ik het vaakst tegenkom bij sites die met een paginabouwer zijn gemaakt, en hij is op een breed scherm volledig onzichtbaar.

In elke bouwer kun je bij een rij, een kolom of een module een breedte opgeven. Zet je die in pixels, bijvoorbeeld 1140 op een rij of 400 op een afbeeldingsmodule, dan blijft dat blok op een telefoon van 390 pixels breed precies 1140 of 400 pixels. De pagina wordt daarmee breder dan het scherm. Je krijgt een horizontale schuifbalk, en omdat de browser probeert de hele breedte te tonen lijkt de rest van je site uitgezoomd.

Wat je in plaats daarvan doet: geef een maximale breedte op in plaats van een vaste. Het blok mag dan wel krimpen en wordt niet groter dan je bedoelde. In de meeste bouwers is dat een aparte instelling die vlak naast de verkeerde staat.

Dezelfde soort fout zit in negatieve marges, in binnenruimte die je in pixels op alle apparaten hetzelfde laat, in een tabel die je uit Word hebt geplakt, en in een achtergrondafbeelding met een vaste afmeting. Ook een insluiting van een kaart of een video met vaste afmetingen doet dit.

De snelste manier om de boosdoener te vinden: zet in het veld voor eigen CSS tijdelijk een dun randje om elk element. Het blok dat buiten het scherm steekt zie je meteen. Werk je met Beaver Builder, dan kun je bovendien per apparaat een eigen waarde instellen voor marges, binnenruimte en lettergrootte. Dat is precies de plek waar je het hoort te regelen.

Zoomen hoort er ook bij

Responsive gaat niet alleen over kleine schermen. Iemand die slecht ziet en op een laptop tot 200 procent inzoomt, komt in dezelfde situatie terecht als iemand met een telefoon: minder ruimte, dus je indeling moet meebewegen.

De richtlijn WCAG 2.1 uit 2018 heeft daar twee eisen voor. Tekst moet tot 200 procent te vergroten zijn zonder dat er inhoud of functie verdwijnt. En de inhoud moet leesbaar zijn op een breedte die overeenkomt met 320 pixels zonder dat je twee kanten op moet schuiven. Dat laatste is meteen de reden dat 320 pixels het formaat is waarop je test.

Sinds WCAG 2.2 uit oktober 2023 is er ook een eis over de grootte van aanklikbare doelen. Vierentwintig bij vierentwintig pixels is de ondergrens op niveau AA; in de praktijk houd ik vierenveertig aan, want dat is wat Apple al jaren adviseert en het voelt op een telefoon meteen anders.

Wat de bezoeker zelf heeft ingesteld

Een scherm heeft meer eigenschappen dan alleen breedte, en twee daarvan komen rechtstreeks uit de voorkeuren van je bezoeker.

De donkere modus is de eerste. Een groeiend deel van de telefoons staat permanent donker. Je site hoeft daar niet in mee te gaan, maar controleer wel je formulieren en je e-mails, want daar ontstaan onleesbare combinaties zoals witte tekst in een wit invoerveld.

Verminderde beweging is de tweede. Wie last heeft van duizeligheid of bewegingsziekte kan in Windows, macOS, iOS en Android aangeven minder animatie te willen. Die voorkeur komt in je CSS binnen en je kunt er in een paar regels op reageren door overgangen vrijwel stil te zetten. Grote schuivende blokken bij het scrollen zijn voor die mensen misselijkmakend, en dat is geen figuurlijke opmerking.

Responsive en vindbaarheid

Google beoordeelt de mobiele versie van je site, ook voor de posities die op een breed scherm verschijnen. Sinds oktober 2023 geldt dat voor alle sites, want toen was de overgang naar mobile-first indexering afgerond. Wat er op je telefoon staat is dus wat telt.

Het voordeel van responsive is dat je één adres en één set inhoud houdt. Geen dubbele pagina's dus, en geen tweede versie die stilletjes achterloopt omdat iemand vergat hem bij te werken.

Verberg daarom geen inhoud op mobiel om ruimte te maken. Wat je op een telefoon weglaat, bestaat voor Google niet meer. En eerlijk gezegd: is iets op een klein scherm overbodig, dan is het dat op een groot scherm meestal ook.

Wat je test

• 320 en 390 pixels breed. Op de smalste van de twee breekt het meeste, en die apparaten zijn nog in gebruik.
• Geen horizontaal schuiven. Veeg op elke pagina één keer opzij. Beweegt er iets, dan zit er een blok te wijd.
• Liggend scherm. Wordt bijna altijd overgeslagen en gaat vaak mis, vooral bij formulieren en video.
• Tekst vanaf 16 pixels, ook in invoervelden, anders zoomt iOS bij het aantikken automatisch in.
• Bedienen, niet bekijken. Open je menu, verstuur je formulier, doorloop je afrekenstappen. Kijken is geen testen.
• Op 200 procent zoom in je browser. Dat kost tien seconden en legt dezelfde fouten bloot.

Pak er een echt toestel bij en vertrouw niet alleen op de weergave in je browser. Een simulator laat je de maten zien, niet je duim die twee knoppen tegelijk raakt en niet een scherm in de volle zon. Test bovendien in Safari op een iPhone en in Chrome op Android, want de verschillen tussen die twee zitten precies in de dingen die stukgaan. Meer daarover staat bij cross-browser compatibiliteit.

Google had jarenlang een mobielvriendelijk-test en een rapport over mobiele bruikbaarheid in Search Console. Beide zijn eind 2023 verdwenen. Kom je een handleiding tegen die daarnaar verwijst, dan is die verouderd.

Fouten die je op een groot scherm nooit ziet

Alleen de indeling aanpassen. Een tekst van drie regels op een monitor wordt er acht op een telefoon. Een kop van vier woorden wordt drie regels. Kort in, en stel je koptekstgroottes per apparaat in.

Menu's met drie niveaus. Op een telefoon niet te bedienen. Werkt je menu daar niet, dan is je structuur te ingewikkeld en dat merken bezoekers op een groot scherm ook.

Alles wat op aanwijzen werkt. Een submenu dat opengaat als de muis eroverheen gaat, bestaat op een aanraakscherm niet. Hetzelfde geldt voor tekst die pas bij aanwijzen verschijnt.

Brede tabellen laten staan. De meest voorkomende oorzaak van horizontaal schuiven. Laat de tabel apart scrollen in zijn eigen vak, of geef hem op een telefoon een andere vorm waarbij elke rij een blokje wordt.

Meldingen stapelen. Een cookiebanner plus een nieuwsbriefvenster plus een chatvenster laat op een telefoonscherm niets van je pagina over. Op je monitor viel het nog mee.

Verborgen blokken die toch laden. Een blok dat je op mobiel verbergt, wordt door de browser vaak wel opgehaald. Je bezoeker betaalt dan laadtijd voor iets dat hij niet ziet. Meer over hoe dat het gebruiksgemak raakt staat bij gebruikerservaring.

Veelgestelde vragen over responsive webdesign

Wat is responsive webdesign precies?

Het is een manier van bouwen waarbij één website zich aanpast aan de breedte van het scherm. De inhoud blijft gelijk, de indeling verandert: kolommen komen onder elkaar, het menu wordt een uitklapknop, afbeeldingen krimpen mee.

Wat is het verschil tussen responsive en mobile first?

Responsive gaat over de techniek: je site beweegt mee. Mobile first gaat over de volgorde waarin je ontwerpt: je begint bij het kleinste scherm en breidt uit.

Je kunt responsive bouwen zonder mobile first te ontwerpen, en dat gebeurt vaak. Je houdt dan een ingedikte desktopversie over in plaats van een ontwerp dat op een telefoon klopt.

Wat zijn breekpunten?

Breekpunten zijn de schermbreedtes waarop je indeling verandert. Onder een breekpunt gelden andere regels dan erboven, bijvoorbeeld dat drie kolommen een stapel worden.

Welke breekpunten moet ik aanhouden?

Er is geen vaste lijst en de bekende getallen komen uit apparaten die niet meer verkocht worden. Rek je browservenster langzaam op en zet een breekpunt op elk punt waar je ontwerp lelijk wordt.

Voor een gewone bedrijfssite kom je meestal uit op drie of vier, ergens rond de 600, 900 en 1200 pixels. Dat zijn richtwaarden, geen wet.

Wat zijn media queries?

Media queries zijn blokken in je stijlbestand die alleen gelden onder een voorwaarde, meestal een minimale of maximale schermbreedte. Ze kunnen ook kijken naar de afdrukmodus of naar voorkeuren van de bezoeker, zoals de donkere modus.

Wat is een flexibel raster?

Een indeling waarin de breedtes relatief zijn in plaats van vast. Een kolom is dan bijvoorbeeld een derde van de beschikbare ruimte in plaats van 380 pixels, waardoor hij meekrimpt als er minder ruimte is.

Is mijn WordPress-thema automatisch responsive?

Vrijwel elk thema dat de laatste tien jaar is uitgebracht beweegt mee. Dat wil niet zeggen dat je site dat ook doet, want de instellingen die je zelf in een paginabouwer maakt kunnen het thema overrulen.

Een vaste breedte op een rij, een grote binnenruimte die op alle apparaten hetzelfde blijft of een ingesloten element met vaste afmetingen zijn genoeg om het te breken.

Hoe test ik of mijn website responsive is?

Rek het venster van je browser smaller en kijk of de indeling meebeweegt. Doe het daarna op een echte telefoon, want dat is de enige test die telt.

Kijk vooral of je opzij kunt schuiven, of de tekst leesbaar is zonder in te zoomen en of je knoppen te raken zijn met een duim.

Waarom kan ik op mijn telefoon opzij schuiven?

Omdat een element breder is dan het scherm. In de meeste gevallen is dat een blok met een breedte in pixels, een tabel, een grote afbeelding zonder maximale breedte of een negatieve marge.

Geef tijdelijk elk element een dun randje via je eigen CSS. Het blok dat buiten beeld steekt vind je dan binnen een minuut.

Is responsive webdesign goed voor SEO?

Ja, en vooral omdat het alternatief slechter is. Google beoordeelt de mobiele versie van je site, dus wat daar staat bepaalt je posities, ook op desktop.

Met één adres voor alle apparaten voorkom je dubbele inhoud en hoef je maar één versie te onderhouden.

Kan ik een bestaande website responsive maken?

Meestal wel. Zit de site in WordPress met een modern thema, dan gaat het om instellingen bijstellen en vaste breedtes weghalen. Dat is werk van uren, niet van weken.

Bij een oude maatwerksite waarin de indeling met tabellen is gebouwd, ben je vaak sneller en goedkoper uit met opnieuw opbouwen.

Moet ik een aparte mobiele website maken?

Nee. Een aparte mobiele site op een eigen adres betekent twee keer onderhoud, twee keer inhoud bijwerken en verwarring bij zoekmachines. Kom je er nog een tegen, dan is samenvoegen de juiste oplossing.

Wat is het verschil tussen responsive en adaptive design?

Bij responsive is er één indeling die vloeiend meebeweegt. Bij adaptive maak je een paar vaste indelingen voor een paar vaste breedtes en kiest de server of de browser er een uit.

Adaptive kom je nog tegen in oudere systemen. Het probleem is dat je op de tussenformaten en op nieuwe apparaten altijd iets overhoudt wat niet past.

Werkt responsive webdesign op alle apparaten?

Op alles met een moderne browser, dus telefoons, tablets, laptops, monitoren en ook op een televisie. Je hoeft er niets extra's voor te doen zolang je maten relatief houdt.

Wat je niet oplost met responsive is een trage verbinding of een oud toestel met weinig rekenkracht. Daar helpt alleen een lichtere pagina.