Responsive webdesign past je website automatisch aan elk schermformaat aan. Lees wat responsive design is en waarom het telt voor je merk.
Open nu een willekeurige website op je telefoon en open dezelfde website daarna op een laptop. De lay-out ziet er anders uit, toch? Het menu verplaatst misschien, de afbeeldingen veranderen van formaat en de tekst loopt anders om zodat hij op het scherm past. Dat is responsive webdesign aan het werk. De website bestaat niet uit twee losse versies. Het is dezelfde site die zichzelf aanpast aan het scherm dat je gebruikt.
Meer dan de helft van al het webverkeer komt tegenwoordig van telefoons en tablets. Als je website alleen op een desktop goed oogt, verlies je meer bezoekers dan je houdt. Responsive design lost dit op door ervoor te zorgen dat je site overal werkt, op elk apparaat, zonder aparte pagina's voor elk schermformaat.
Wat is responsive webdesign?
Responsive webdesign is een manier om websites te bouwen waarbij de lay-out, afbeeldingen, tekst en knoppen zich automatisch aanpassen aan de grootte van het scherm. Of iemand je site nu bezoekt op een grote desktopmonitor, een tablet of een klein telefoonscherm, de website herschikt zichzelf zodat hij past.
Dat betekent niet dat je de desktopversie verkleint tot hij op een telefoon past. Het betekent dat de website vanaf het begin is ontworpen om op alle schermformaten te werken. Tekst blijft leesbaar zonder in te zoomen. Knoppen blijven groot genoeg om op te tikken. Afbeeldingen schalen mee zonder af te kappen of uit te rekken. De inhoud blijft hetzelfde, maar de manier waarop ze wordt gepresenteerd past zich aan, zodat de bezoeker de beste ervaring heeft op elk apparaat dat hij gebruikt.
Hoe werkt responsive design?
Responsive design gebruikt flexibele rasters en regels die in de code van de website zijn ingebouwd. Die regels zeggen tegen de browser: "Als het scherm zo breed is, zet de inhoud dan zo neer. Is het scherm smaller, zet haar dan anders neer."
Op een desktop toont je website misschien drie kolommen naast elkaar. Op een tablet worden die drie kolommen misschien twee. Op een telefoon komen ze onder elkaar in één enkele kolom, zodat de bezoeker er makkelijk doorheen kan scrollen. Dezelfde inhoud wordt getoond, alleen anders ingedeeld om in de beschikbare ruimte te passen.
Ook afbeeldingen passen zich aan. Een grote bannerafbeelding op een desktop wordt op een telefoon misschien kleiner, zodat hij sneller laadt en niet het hele scherm vult. Navigatiemenu's schakelen op kleinere schermen vaak over naar een compacte vorm, zoals een hamburgermenu, om ruimte te besparen en bezoekers toch toegang tot alle pagina's te geven.
Waarom heeft je website responsive design nodig?
Dit is geen extraatje. Als je website niet responsive is, stuur je actief mensen weg.
1. De meeste bezoekers zitten op hun telefoon
De meeste mensen die tegenwoordig op internet surfen, doen dat op een mobiel apparaat. Als je website moeilijk te lezen is, traag laadt of onhandig werkt op een telefoon, vertrekken die bezoekers en gaan ze naar een site die beter voor ze werkt.
2. Zoekmachines rangschikken mobielvriendelijke websites hoger
Zoekmachines kijken hoe goed je website werkt op mobiele apparaten als ze bepalen waar ze hem rangschikken. Een mobielvriendelijke website heeft meer kans om in zoekresultaten te verschijnen dan een website die alleen op desktop werkt. Als je site niet responsive is, kunnen je posities eronder lijden.
3. Eén website in plaats van twee
Voor responsive design bouwden sommige bedrijven een aparte mobiele versie van hun website. Dat betekende twee sites onderhouden, inhoud op twee plekken bijwerken en werken met twee sets URL's. Responsive design haalt dat allemaal weg. Je bouwt één site en die werkt overal.
4. Het houdt bezoekers langer op je site
Als een website makkelijk te gebruiken is, blijven mensen langer. Ze lezen meer pagina's, scrollen verder en ondernemen eerder actie. Een responsive site haalt de frictie weg die komt van piepkleine tekst, elementen die over elkaar vallen en knoppen die te klein zijn om aan te tikken. Het houdt de ervaring soepel, ongeacht op welk apparaat je bezoeker zit.
Responsive design en websitenavigatie gaan hand in hand. Een site die zich aan elk scherm aanpast, heeft nog steeds duidelijke menu's en links nodig, zodat bezoekers weten waar ze heen moeten. Wil je leren hoe je menu's opzet die op elk apparaat goed werken? Lees dan hoe je een websitemenu structureert. En als je ook wilt weten hoe je je site voor iedereen toegankelijk houdt, lees je hoe je een website bouwt die voor iedereen toegankelijk is.
Veelgestelde vragen
Hoe test je of je website responsive is?
De eenvoudigste manier is je website openen op je telefoon, tablet en laptop en kijken hoe hij er op elk uitziet. Je kunt ook het venster van je browser op een desktop verkleinen en kijken hoe de lay-out meebeweegt. Voor een nauwkeurigere controle hebben de ontwikkelaarstools van browsers een apparaatweergave waarmee je verschillende schermformaten simuleert zonder meerdere apparaten nodig te hebben. Volg hoe je mobiele bezoekers zich gedragen met belangrijke cijfers om de prestaties van je website te volgen.
Wat is het verschil tussen mobile-first design en responsive design?
Responsive design betekent dat de website zich aan elk schermformaat aanpast. Mobile-first design is een aanpak waarbij je eerst voor het kleinste scherm ontwerpt en daarna opschaalt naar grotere schermen. Mobile-first is een strategie binnen responsive design. Beide leiden tot een website die op alle apparaten werkt, maar mobile-first geeft vanaf het begin voorrang aan de telefoonervaring.
Beïnvloedt responsive design je SEO-posities?
Ja. Zoekmachines gebruiken mobielvriendelijkheid als rankingfactor. Werkt je website niet goed op mobiele apparaten, dan kan hij lager scoren in zoekresultaten. Een responsive site die op alle schermformaten goed laadt, heeft meer kans om hoger te scoren. Lees meer over hoe snelheid en prestaties samenhangen met posities in wat websitesnelheid is en waarom het ertoe doet.
Wat zijn de meest gemaakte fouten bij responsive design?
Lay-outs met een vaste breedte die niet meebewegen, knoppen die te klein zijn om op een telefoon aan te tikken, belangrijke inhoud verbergen op mobiel en niet testen op echte apparaten. Een andere veelgemaakte fout is alleen kijken hoe de site eruitziet op één telefoonmodel in plaats van meerdere schermformaten te testen. Slechte navigatie op mobiel is ook een veelvoorkomend probleem, waarbij menu's over elkaar vallen of links te dicht op elkaar staan.
Heb je een aparte mobiele website nodig als je site responsive is?
Nee. Dat is precies het punt van responsive design. Eén website werkt op elk apparaat. Een aparte mobiele site bouwen betekent dubbel onderhoud, dubbele inhoudsupdates en twee verschillende URL's. Responsive design haalt dat allemaal weg. De sjablonen van WEMASY zijn allemaal vanaf het begin responsive gebouwd, dus je site ziet er op elk scherm goed uit zonder extra werk.
Kun je een oude website responsive maken zonder hem opnieuw te bouwen?
Dat hangt af van hoe de site is gebouwd. Sommige oudere sites kun je bijwerken met responsive codewijzigingen. Andere zijn gebouwd op starre structuren, waardoor het makkelijker is om opnieuw te beginnen met een responsive sjabloon. Is je huidige site niet mobielvriendelijk en voelt de lay-out verouderd aan, dan is opnieuw bouwen met een moderne websitebouwer vaak sneller en geeft het betere resultaten dan een oud ontwerp oplappen.