Wat is een responsive website die zich aanpast?

Een responsive website (responsieve website) past zich automatisch aan het scherm waarop je kijkt, of dat nu een laptop, tablet of telefoon is. Stel je een rubberen band voor. Die rekt uit of krimpt in, afhankelijk van de ruimte. Een responsive website gedraagt zich net als een rubberen band: hij rekt uit of krimpt in, afhankelijk van de ruimte. In Nederland is dit extra belangrijk, want 95,5% van de bevolking gebruikt dagelijks een smartphone. Een website die niet meeschaalt, kan in Nederland leiden tot gefrustreerde bezoekers en gemiste kansen, gezien het hoge smartphonegebruik.

Op een desktop zie je bijvoorbeeld meerdere kolommen, terwijl op een telefoon alles netjes in één kolom staat. Dit is geen luxe, maar een noodzaak: Nederlandse bezoekers verwachten dat een website er op elk apparaat goed uitziet.

Is responsive design duur of ingewikkeld?

Veel Nederlandse ondernemers vragen zich af of responsive design binnen hun budget past. Het korte antwoord: het hangt ervan af. Een professionele responsive website voor een MKB-bedrijf begint bij €4.500 (inclusief SEO, gestructureerde data en conversie-tracking), terwijl maatwerkoplossingen variëren van €6.000 tot €15.000, afhankelijk van de complexiteit. Eenvoudige one-page websites variëren van €750 tot €1.500, maar missen vaak belangrijke functionaliteiten zoals SEO en conversie-optimalisatie.

Een goedkope website lijkt aantrekkelijk, maar kan duurder uitpakken. Zoals een expert zegt:

Een website van €800 die niemand vindt of waar niemand iets koopt, is honderden euro's weggegooid.

• Sabi's Socials

Een responsive website van €5.000 kan zichzelf binnen een jaar terugverdienen als deze bijvoorbeeld 100 extra klanten per jaar oplevert (met een gemiddelde orderwaarde van €500). Dit genereert €50.000 aan omzet en dekt daarmee de initiële investering ruimschoots in het eerste jaar. Responsive design is niet per se ingewikkeld, maar het vereist wel expertise. Een goede ontwikkelaar zorgt ervoor dat je site op elk scherm werkt - zonder dat je zelf technische kennis nodig hebt.

Het alternatief - een niet-responsive site - kost je klanten, zichtbaarheid en uiteindelijk geld.

Hoe werkt responsive design?

Een responsive website past zich aan elk scherm aan dankzij twee technische principes: media queries en fluid grids. Deze principes lossen een fundamenteel probleem op: een website moet er zowel op een groot desktopscherm als op een kleine telefoon goed uitzien, zonder dat je twee aparte versies hoeft te bouwen.

Media queries zijn regels die bepalen hoe een website eruitziet op verschillende schermgroottes. Ze werken als verkeerslichten. Als het scherm een bepaalde breedte bereikt, wordt een andere lay-out geladen. Een veelgebruikte grens is bijvoorbeeld 768 pixels, maar de exacte waarde hangt af van de inhoud van je website.

Hoe zorgen deze principes er samen voor dat alles meeschaalt? Dat zie je in het onderstaande overzicht.

Hoe dit er in de praktijk uitziet? In 2015 zag je bijvoorbeeld bij Coolblue.nl op een desktop meerdere kolommen, maar op een telefoon paste alles in één kolom. Dit werd mogelijk gemaakt door media queries en fluid grids.

Fluid grids zorgen ervoor dat de lay-out meeschaalt met het scherm. In plaats van vaste breedtes (zoals 900 pixels) gebruiken ze percentages. Zo blijft alles in verhouding, of je nu op een telefoon of een desktop kijkt.

Een belangrijk principe is mobile-first: ontwerp eerst voor telefoons, omdat dit helpt om je inhoud te prioriteren en aan te passen aan de beperkingen van kleinere schermen. In Nederland, waar 95,5% van de bevolking een smartphone gebruikt, is dit extra relevant.

Begin met het kleine scherm eerst, en breid dan uit tot het er niet meer goed uitziet. Tijd voor een breekpunt!

• Stephen Hay

In dit fictieve voorbeeld van een Nederlandse bakkerijwebsite zie je hoe elementen zich aanpassen:

Het menu klapt in, afbeeldingen schalen mee en tekst vloeit opnieuw. Zo blijft je website bruikbaar, ongeacht het apparaat. Dit zorgt voor tevreden bezoekers en betere vindbaarheid.

Hoe controleer je of je website responsive is?

Heb je een website en wil je weten of die responsive is? Met deze drie stappen kom je er snel achter:

• Open je website op verschillende apparaten en kijk of de lay-out zich automatisch aanpast aan het scherm van je telefoon, tablet en desktop.
• Voer je URL in op de Google Mobile-Friendly Test en bekijk het resultaat.
• Als je op een laptop werkt, verklein dan het venster van je browser. Zie je dat de lay-out meeschaalt? Dan is je website responsive.

Als je website zich aanpast aan verschillende schermen, is hij responsive. Zo niet, dan is het tijd om aan de slag te gaan. Wil je meer weten over mobielvriendelijkheid en andere eisen voor een goede website?