Responsive website: zo past je site op elk scherm

Pak je telefoon en open je eigen website. Grote kans dat je klanten dat ook zo doen: even snel kijken op de bank, tussen twee appjes door. Past je site zich netjes aan dat kleine scherm aan, dan heet dat responsive. Past hij zich niet aan, dan moet je bezoeker knijpen, schuiven en inzoomen. In dit stuk leg ik in gewone taal uit wat responsive betekent, waarom het belangrijk is voor je bezoekers en voor Google, en hoe je zelf checkt of jouw site het is.

Wat betekent responsive?

Responsive komt van het Engelse woord respond, reageren. Een responsive website reageert op het scherm waarop hij wordt bekeken. Open je de site op een laptop, dan staan er bijvoorbeeld drie blokken naast elkaar. Open je dezelfde site op een telefoon, dan schuiven die blokken netjes onder elkaar. De tekst blijft leesbaar, de foto's passen in beeld en de knoppen blijven goed te tikken.

Het belangrijkste om te onthouden: het is een website, niet drie. Zelfde teksten, zelfde foto's, zelfde adres. Alleen de indeling verandert mee met het scherm. Vergelijk het met water dat de vorm van het glas aanneemt.

Vroeger bouwden bedrijven soms een aparte mobiele site naast de gewone site. Dat betekende dubbel onderhoud en dubbel werk. Tegenwoordig is responsive bouwen de normale manier van werken.

Waarom responsive telt

Veel mensen bekijken websites op hun telefoon. Niet aan een bureau, maar op de bank, in de pauze, of onderweg. Wie een lekkende kraan heeft, zoekt een loodgieter op zijn telefoon.

Voor die bezoeker is een site die niet meebeweegt hard werken. De letters zijn piepklein, dus knijpen en zoomen. De pagina is te breed, dus zijwaarts schuiven. De belknop is zo klein dat je er steeds naast tikt. De meeste mensen houden dat niet lang vol: ze drukken op terug en proberen het volgende zoekresultaat. Zo verlies je bezoekers aan een concurrent. Niet omdat je werk minder goed is, maar omdat je site niet lekker werkt op een telefoon.

En andersom: een site die soepel meebeweegt voelt verzorgd. Dat straalt af op je bedrijf, nog voordat iemand een letter gelezen heeft.

Google kijkt vooral naar de telefoonversie

Niet alleen je bezoekers letten hierop, Google doet het ook. Google gebruikt voor het opnemen en beoordelen van pagina's de mobiele versie van je site, bekeken alsof er een telefoon op de lijn zit. Dat heet mobile-first indexing en het staat in de eigen uitleg van Google over mobile-first indexing. Google raadt daar bovendien responsive bouwen aan, omdat dat de makkelijkste manier is om een site te bouwen en te onderhouden.

Simpel gezegd: de telefoonversie van je site is voor Google niet de bijzaak, maar het uitgangspunt. Werkt je site slecht op een telefoon, dan laat je dus niet alleen bezoekers iets missen, maar ook Google.

Zo check je het zelf

Je hoeft geen vakman te zijn om dit te controleren. Pak je telefoon en open je eigen site. Let op drie dingen: is de tekst leesbaar zonder inzoomen, zijn de knoppen en links goed te tikken met je duim, en valt er niets buiten beeld? Hoef je nergens zijwaarts te schuiven en kun je het contactformulier gewoon invullen, dan zit het goed.

Zit je achter de computer, dan is er nog een simpele test. Maak het browservenster smaller door de rand met je muis naar binnen te slepen. Bij een responsive site schuift de indeling netjes mee: blokken gaan onder elkaar staan, foto's worden kleiner, de tekst blijft leesbaar. Bij een site die het niet is, blijft de indeling star staan en verdwijnt een deel uit beeld.

Wat als je site niet responsive is?

Is je site niet responsive, dan is dat zelden een los foutje. Het is meestal een teken dat de site op leeftijd is. Sites van vijftien jaar of ouder zijn gebouwd voor computerschermen, in een tijd dat de telefoon bij het surfen nog een bijrol speelde.

Je hebt dan twee routes. Soms kan een webbouwer de huidige site aanpassen, al is dat bij een oude site vaak lastiger dan het klinkt. Welke verbeteringen sowieso de moeite waard zijn, lees je in mijn artikel over website optimaliseren. Is de site echt verouderd, dan is opnieuw bouwen meestal de betere route: sneller klaar en meteen goed. Of je dat zelf doet of uitbesteedt, die afweging help ik je maken in zelf een website maken of laten maken.

Voor de duidelijkheid over mijn eigen werk: elke site die ik bouw past zich aan elk scherm aan. Geen extra optie, geen meerwerk, gewoon hoe ik bouw.

Waar het op neerkomt

Responsive betekent dat je website meebeweegt met het scherm: zelfde site, andere indeling. Je bezoekers zitten vaak op de telefoon, en Google kijkt vooral naar die telefoonversie. De check kost je twee minuten: site openen op je telefoon, venster smaller maken op de computer. Beweegt je site niet mee, dan weet je wat de eerste klus is.