Responsive webdesign: wat is het en waarom mobile first?

6 november 20269 min. lezenAxl Van Steenacker

Veel mensen zien je website voor het eerst op hun gsm, onderweg en met één duim. Met responsive webdesign past je website zich aan elk scherm aan, van een smalle gsm tot een breed computerscherm.

In dit artikel lees je wat responsive webdesign precies is, hoe het verschilt van een adaptieve of een aparte mobiele site, wat mobile first betekent en hoe je zelf test of jouw website mobielvriendelijk is. Je leest ook welke fouten je op een gsm het vaakst tegenkomt.

Wat is responsive webdesign?

Responsive webdesign, soms ook responsief webdesign genoemd, betekent dat één en dezelfde website zich aanpast aan de breedte van het scherm. Op een breed scherm staan blokken naast elkaar, op een gsm schuiven ze onder elkaar. Tekst blijft leesbaar zonder inzoomen, knoppen blijven groot genoeg om aan te tikken en foto's passen altijd binnen het scherm.

De term komt van de Amerikaanse webdesigner Ethan Marcotte, die hem in 2010 introduceerde in het online vakblad A List Apart. Zijn recept bestaat nog altijd uit drie ingrediënten:

Een flexibel raster. Kolommen krijgen geen vaste breedte in pixels, maar een verhouding. Zo vullen ze elk scherm.
Flexibele beelden. Foto's en video's worden nooit breder dan het blok waarin ze staan.
Media queries. Regels in de opmaak die zeggen: vanaf deze breedte staan deze twee blokken naast elkaar, daaronder onder elkaar.

Daarnaast heeft elke responsive pagina een viewport-tag in de broncode. Die vertelt een gsm dat hij de pagina op zijn echte breedte moet tonen. Zonder die regel doet een gsm alsof hij een computerscherm is en verkleint hij de hele pagina tot een onleesbare postzegel.

De punten waarop de opmaak verandert, heten breekpunten. Een goede webbouwer kiest die op basis van de inhoud, niet op basis van één toestel: een website die alleen klopt op een iPhone en een laptop, ziet er op alles daartussen vreemd uit.

Responsive, adaptief of een aparte mobiele site

Er zijn drie manieren om een website geschikt te maken voor een gsm. Het verschil merk je vooral in het onderhoud en in Google.

Responsive

Eén website, één adres, één keer de inhoud. De opmaak vloeit mee met elke schermbreedte en een aangepaste tekst is meteen overal aangepast. Google raadt deze aanpak zelf aan, omdat hij het eenvoudigst te bouwen en te onderhouden is.

Adaptief

Bij adaptief webdesign maak je een paar vaste ontwerpen, bijvoorbeeld voor gsm, tablet en computer, en de website kiest het ontwerp dat het best past. Je kan elk formaat tot op de pixel uitwerken, maar een scherm dat tussen twee formaten valt, krijgt een ontwerp dat net niet past. En elk extra ontwerp is extra werk bij elke aanpassing.

Een aparte mobiele site

Vroeger zag je vaak een tweede website op een apart adres, zoals m.jouwzaak.be. Dat zijn twee websites om bij te houden, en daar loopt het vaak mis: de mobiele versie heeft minder inhoud, of een aanpassing gebeurt maar op één van de twee. Google gebruikt vandaag de mobiele versie om je pagina's op te nemen, dus wat op die uitgeklede versie ontbreekt, telt niet mee.

Wat is mobile first webdesign?

Mobile first betekent dat je een website eerst ontwerpt voor het kleinste scherm en pas daarna uitbreidt naar grotere schermen. De ontwerper Luke Wroblewski maakte het idee bekend met zijn boek Mobile First uit 2011.

Wie start met een breed scherm, heeft ruimte voor alles: drie kolommen, een zijbalk, een grote slider. Daarna moet alles op een gsm geperst worden, en daar sneuvelt meestal iets belangrijks. Wie start met een gsm, moet meteen kiezen. Wat moet een bezoeker als eerste zien? Wat is de belangrijkste knop? Wat mag een klik dieper? Die keuzes maken de pagina ook op een groot scherm beter.

Mobile first ontwerpen is iets anders dan mobile-first indexing

Mobile-first indexing gaat niet over ontwerpen, maar over hoe Google je website leest: Google bekijkt hem zoals een smartphone hem ziet, en gebruikt die versie om je pagina's op te nemen en te rangschikken. Die overstap is intussen afgerond.

De praktische les: zorg dat op je gsm dezelfde inhoud staat als op een groot scherm. Inklappen mag, weglaten niet. Een tekst achter een uitklapblok of een tabblad is geen probleem. Een tekst die je op de mobiele versie schrapt omdat hij te lang is, wel.

Telt de computer dan niet meer mee?

Toch wel. Mobile first gaat over de volgorde waarin je ontwerpt, niet over wie belangrijker is. Wie een takeldienst zoekt, staat vaak langs de kant van de weg met een gsm in de hand. Een aankoper die hout of metalen profielen bestelt, zit misschien vooral achter zijn bureau. Kijk dus naar je eigen cijfers: in Google Search Console zie je in het rapport Prestaties, op het tabblad Apparaten, hoeveel mensen je in Google vinden via een gsm, een computer of een tablet.

Waarom een mobielvriendelijke website loont

Een bezoeker op een gsm heeft weinig geduld en weinig plaats. Moet hij inzoomen, opzij schuiven of drie keer mis tikken, dan gaat hij terug naar de zoekresultaten en kiest hij de volgende. Dat merk je niet, want hij laat geen bericht achter.

Op een gsm gebeurt bovendien vaak de belangrijkste stap: iemand belt je, plant een route naar je zaak, reserveert een tafel of vraagt een offerte. Is die stap één tik, dan is de kans groter dat hij hem ook zet. Voor een webshop op maat geldt dat nog sterker, want daar moet de hele bestelling, van zoeken tot betalen, met een duim lukken.

Veel webbureaus kijken vooral naar het design. Wij kijken bij elke website ook naar hoe vindbaar hij is in Google en hoe makkelijk een bezoeker klant wordt. Responsive werken is daarbij een basiskenmerk. In ons artikel over wat een goede website maakt lees je de andere.

Zo test je of jouw website mobielvriendelijk is

Google had vroeger een aparte Mobile-Friendly Test, maar die tool bestaat niet meer. Met deze vier gratis stappen kom je verder.

1. Kijk op je eigen gsm, en op die van iemand anders

Doe wat een klant zou doen: zoek je telefoonnummer, open het menu, vul het contactformulier in. Vraag daarna iemand met een ander toestel hetzelfde. Zelf ken je je website te goed om te zien waar een ander vastloopt.

2. Chrome DevTools

In Chrome of Edge open je de ontwikkelaarstools met F12, op een Mac met Cmd+Option+I. Met Ctrl+Shift+M, of Cmd+Shift+M op een Mac, schakel je de apparaatweergave in. Kies een toestel of sleep de breedte groter en kleiner. Waar iets verspringt, overlapt of buiten beeld valt, zit een breekpunt dat niet klopt. In dezelfde balk kan je ook een tragere mobiele verbinding nabootsen. Je bootst zo wel een schermformaat na, geen echt toestel: hoe groot je duim is, zie je alleen op een echte gsm.

3. PageSpeed Insights

Op pagespeed.web.dev vul je het adres van een pagina in. Je krijgt een rapport voor mobiel en een voor computer; begin bij mobiel. Heeft je website genoeg bezoekers, dan staan bovenaan de cijfers van echte Chrome-gebruikers. Bij kleinere websites ontbreken die vaak en krijg je alleen de testmeting, die een gemiddelde gsm op een tragere verbinding nabootst. Kijk vooral naar de drie Core Web Vitals:

Largest Contentful Paint (LCP): hoe snel het grootste element op het scherm staat, meestal je hoofdfoto of titel. Goed is 2,5 seconden of minder.
Interaction to Next Paint (INP): hoe snel de pagina reageert als je ergens op tikt. Goed is 200 milliseconden of minder.
Cumulative Layout Shift (CLS): hoeveel de pagina verspringt tijdens het laden. Goed is 0,1 of minder.

Daaronder staan concrete verbeterpunten, zoals te zware afbeeldingen. De testmeting gebeurt met Lighthouse, dat je ook in Chrome DevTools vindt.

4. Google Search Console

Gebruik je Search Console, kijk dan naar het rapport Core Web Vitals. Als er genoeg gegevens zijn, zie je daar apart voor mobiel en computer welke pagina's goed, matig of slecht scoren bij echte bezoekers.

Veelgemaakte fouten op mobiel

Deze fouten kom je op mobiel het vaakst tegen. De meeste los je op zonder een nieuwe website.

Te kleine of te bleke tekst. Hou lopende tekst op een gsm op minstens 16 pixels, zeker voor wie buiten in de zon leest. Lichtgrijze tekst op wit oogt chic op een groot scherm, maar verdwijnt op een gsm.
Knoppen en links te klein of te dicht bij elkaar. Een duim is geen muisaanwijzer. Apple en Google raden tikbare zones van ongeveer 44 tot 48 pixels aan, met wat ruimte ertussen.
Pop-ups die het hele scherm bedekken. Een nieuwsbriefvenster, een chatbolletje en een cookiebanner tegelijk laten amper iets van je pagina over. Google raadt zelf af om de inhoud op mobiel te verbergen achter opdringerige pop-ups. Een cookiebanner is vaak nodig, maar hou hem compact.
Zware beelden. Een foto rechtstreeks van een camera weegt al snel enkele megabytes, en een gsm downloadt die volledig, ook al toont hij de foto maar een paar centimeter breed. Laat beelden in verschillende breedtes klaarzetten, in een licht formaat zoals WebP.
Een telefoonnummer dat je niet kan aantikken. Op een gsm wil een bezoeker met één tik bellen of de route naar je zaak openen. Dat lukt alleen als je nummer en adres als tekst met een link op de pagina staan, niet in een afbeelding.
Formulieren die tegenwerken. Te veel velden, het verkeerde toetsenbord (letters waar je een telefoonnummer typt) of invulvelden met een te kleine letter, waardoor een iPhone automatisch inzoomt.
Horizontaal scrollen. Een brede tabel of een afbeelding met een vaste breedte maakt de pagina breder dan het scherm, en dan schuift alles heen en weer onder je duim.
Een hoofdfoto die alles opeist. Een foto over het hele scherm met alleen je bedrijfsnaam erop is indrukwekkend op een computer. Op een gsm moet je bezoeker eerst scrollen voor hij weet wat je doet.

Hoe wij bij Necess responsive ontwerpen

Elke website die we bouwen, werkt op elk scherm. Dat is geen extra optie, het hoort bij het werk.

Eerst de structuur, dan het design. Een website vanaf nul bouwen we met de Digital Climax Architect-methode: eerst de pagina's en het zoekwoord per pagina, dan de modules per pagina, dan de inhoud en pas daarna het design en de bouw. Omdat de modules per pagina vastliggen voor er iets ontworpen wordt, kiezen we ook bewust in welke volgorde ze op een gsm onder elkaar komen. Bovenaan staat wat het belangrijkst is, niet wat het mooist is.
Eén tik naar de volgende stap. Op de website van brasserie Bardo in Turnhout is de reservatieknop altijd binnen handbereik en staat het telefoonnummer er duidelijk bij voor een reservatie op de dag zelf. Bij takeldienst Struyfs in Pulle staat het 24/7-noodnummer bovenaan in de kop, ook op een gsm.
Snel op een mobiele verbinding. Een statische HTML-website laadt snel, omdat elke pagina al klaarstaat zonder database die eerst moet rekenen. Kies je voor WordPress of een ander CMS, dan letten we net zo goed op lichte beelden en weinig overbodige scripts.
Samen testen. Tijdens het bouwen houden we regelmatig contact. Bekijk de website dan ook op je eigen gsm: jij weet het best wat je klanten als eerste willen zien.

Bij de meeste cases in ons portfolio met realisaties zie je de website op een groot scherm en op een gsm, zodat je meteen ziet hoe hetzelfde ontwerp zich aanpast. Meer over onze aanpak lees je op de pagina over webdesign bij Necess.

Werkt jouw website goed op een gsm?

Doe eerst zelf de test met je eigen gsm en PageSpeed Insights. Wil je weten wat er beter kan, of denk je aan een nieuwe website? Lees hoe een website laten maken bij Necess verloopt, of plan een vrijblijvend kennismakingsgesprek via de contactpagina. Je kan zaakvoerder Axl Van Steenacker ook rechtstreeks bellen op 0476 24 71 35. Na het gesprek krijg je binnen de 5 werkdagen een offerte op maat.

Veelgestelde vragen

Goed om te weten

Wat is het verschil tussen een responsive en een mobielvriendelijke website?

Mobielvriendelijk is het resultaat: je website is op een gsm goed leesbaar en makkelijk te gebruiken. Responsive webdesign is de manier om daar te komen, met één website die zich aanpast aan elk scherm. Het is de meest gebruikte aanpak en ook de aanpak die Google zelf aanraadt.

Bestaat de mobielvriendelijkheidstest van Google nog?

Nee. Google heeft eind 2023 de aparte Mobile-Friendly Test en het rapport Mobiele bruikbaarheid in Search Console stopgezet. Test je website nu met PageSpeed Insights, met Lighthouse en de apparaatweergave in Chrome DevTools, en vooral op een echte gsm.

Hoe weet ik hoeveel van mijn bezoekers een gsm gebruiken?

In Google Search Console zie je in het rapport Prestaties, op het tabblad Apparaten, hoeveel mensen je via een gsm, een computer of een tablet in Google vinden. Gebruik je Google Analytics, dan zie je de verdeling over al je bezoekers via de dimensie Apparaatcategorie. Zo werk je met je eigen cijfers in plaats van met algemene gemiddelden.

Moet mijn website op een gsm dezelfde inhoud tonen als op een computer?

De inhoud moet dezelfde zijn, de opmaak niet. Op een gsm mag je teksten inklappen of in tabbladen zetten, maar laat ze niet weg. Google gebruikt de mobiele versie van je website om je pagina's op te nemen.

Kan mijn huidige website nog responsive gemaakt worden?

Dat hangt af van hoe hij gebouwd is. Een recent WordPress-thema is vaak al responsive en kan je bijsturen. Een oudere website met vaste breedtes of een aparte mobiele versie bouw je meestal beter opnieuw op. In een vrijblijvend kennismakingsgesprek bekijken we samen wat het verstandigst is.

Kost een responsive website meer?

Bij Necess is elke website responsive: het is geen optie die je apart moet aanvragen. De prijs is altijd op maat en hangt af van wat je website moet kunnen. Na een vrijblijvend kennismakingsgesprek krijg je binnen de 5 werkdagen een offerte.