Een responsive website past zich automatisch aan het scherm aan waarop iemand kijkt. Op een telefoon staat alles onder elkaar, met grote knoppen en leesbare tekst. Op een laptop gebruik je de ruimte breder. Zo werkt de site goed voor iedere bezoeker, op elk apparaat.
Veel bezoekers komen tegenwoordig via hun telefoon binnen. Werkt je site daar niet prettig, dan haken ze af en kiezen ze een concurrent. In dit artikel lees je wat responsive precies betekent, hoe je test of jouw site mobielvriendelijk is en wat je kunt verbeteren.
Wat is een responsive website precies?
Responsive webdesign is een manier van bouwen waarbij één website zich aanpast aan de breedte van het scherm. Er is dus geen aparte mobiele site. De opbouw, de grootte van teksten en afbeeldingen en de plek van menu's verschuiven mee.
Vroeger hadden sommige bedrijven een losse mobiele versie, bijvoorbeeld op een apart adres. Dat betekende dubbel onderhoud en vaak een kale versie voor mobiele bezoekers. Met responsive design heb je één site, één beheer en dezelfde inhoud voor iedereen.
Waarom een mobielvriendelijke website belangrijk is
Er zijn drie goede redenen om mobiel serieus te nemen:
- Je bezoekers. Mensen zoeken vaak onderweg naar een bedrijf, een openingstijd of een telefoonnummer. Dan moet het direct werken.
- Google. Google kijkt vooral naar de mobiele versie van je site om te bepalen hoe goed die is. Dit heet mobile-first indexering.
- Aanvragen. Een formulier dat op mobiel lastig invult, levert minder aanvragen op. Ook al werkt het op de computer prima.
Een site die op mobiel niet goed werkt, kost dus klanten en vindbaarheid. Vaak zonder dat de eigenaar het doorheeft, omdat die zelf vooral op de laptop kijkt.
Zo test je of je website responsive is
Je hoeft geen technicus te zijn om een eerste check te doen. Pak je eigen telefoon en loop deze lijst langs:
- Kun je alles lezen zonder in te zoomen?
- Hoef je niet zijwaarts te scrollen om tekst of afbeeldingen te zien?
- Zijn knoppen en links groot genoeg om met je duim te raken, zonder per ongeluk iets anders aan te tikken?
- Werkt het menu goed en vind je snel wat je zoekt?
- Kun je het contactformulier makkelijk invullen? Verschijnt bij een telefoonnummer het juiste toetsenbord?
- Kun je met één tik bellen of mailen?
- Laadt de pagina vlot, ook op mobiel internet?
Test ook op een tablet en kantel je telefoon eens. In een browser op je computer kun je het venster smaller maken om te zien hoe de site meebeweegt. De meeste browsers hebben daarnaast een ontwikkelaarsmodus waarin je verschillende schermformaten kunt nabootsen.
Veelvoorkomende problemen op mobiel
Bij sites die we bekijken, komen we vaak dezelfde problemen tegen:
- Te kleine tekst, zodat bezoekers moeten inzoomen.
- Pop-ups die op mobiel het hele scherm vullen en lastig weg te klikken zijn.
- Tabellen of afbeeldingen die buiten het scherm vallen.
- Zware foto's die op mobiel lang laden.
- Een menu met te veel onderdelen, waardoor bezoekers verdwalen.
- Formulieren met te veel velden, of velden die niet goed werken met het mobiele toetsenbord.
- Belangrijke informatie, zoals prijs of contact, die pas helemaal onderaan staat.
Snelheid en mobiel hangen sterk samen. Wil je daar dieper op ingaan, lees dan website sneller maken en ons artikel over de Core Web Vitals, de meetpunten die Google gebruikt voor gebruikservaring.
Je website mobielvriendelijk maken: waar begin je?
Is je site niet goed responsive, dan zijn er twee routes. Bij kleine problemen kun je het bestaande thema of de opmaak aanpassen. Denk aan grotere tekst, betere knoppen en lichtere afbeeldingen.
Is de site ouder en niet vanaf het begin responsive gebouwd? Dan is opknappen vaak lappenwerk. Een nieuwe site die vanaf de start voor mobiel is ontworpen, is dan meestal de betere en uiteindelijk goedkopere keuze. Dit heet ook wel mobile first: je ontwerpt eerst voor het kleine scherm en breidt daarna uit naar grotere schermen.
Mobile first dwingt je om keuzes te maken. Wat is echt belangrijk voor je bezoeker? Dat komt bovenaan. Dat maakt de site vaak ook op de laptop rustiger en duidelijker.
Twijfel je welke route past? Stel jezelf deze vragen:
- Is de site jonger dan een paar jaar en gaat het om kleine schoonheidsfoutjes? Dan is aanpassen vaak genoeg.
- Moet je voor elke pagina apart de mobiele weergave repareren? Dan wordt het lappenwerk.
- Is de site ook traag, lastig te beheren of niet meer up-to-date? Dan is vernieuwen meestal slimmer.
- Wil je toch al nieuwe functies, zoals online boeken? Combineer dat dan met een nieuwe, responsive basis.
Meer over die afweging lees je in ons artikel over website vernieuwen.
Tips voor een goede responsive website
- Zet de belangrijkste actie, zoals bellen, boeken of offerte aanvragen, goed zichtbaar bovenaan.
- Houd zinnen en alinea's kort. Op een klein scherm leest een lap tekst zwaar.
- Gebruik afbeeldingen in het juiste formaat per scherm, zodat mobiele bezoekers geen grote bestanden laden.
- Maak formulieren kort. Vraag alleen wat je echt nodig hebt.
- Test elke nieuwe pagina eerst op je telefoon voordat je hem publiceert.
- Let ook op toegankelijkheid, zoals voldoende contrast en duidelijke knoppen. Dat helpt iedereen.
Een responsive website laten maken bij Violexa
Bij Violexa is elke website die we bouwen responsive. Een ontwerp dat op elk scherm werkt, zit standaard in de prijs. We testen op telefoons, tablets en desktops voordat de site live gaat.
Bekijk projecten bij ons werk.
Een website of webapplicatie op maat begint bij €1.799 excl. btw (€2.177 incl. btw) per project, inclusief ontwerp, bouw, SEO-basis, Google Analytics, CMS-koppeling en uitleg. Meer informatie vind je bij websites en apps.
Benieuwd hoe jouw site het doet op mobiel? Plan een gratis quickscan. In 30 minuten, online of op locatie, kijken we samen naar je site. Daarna krijg je een kort schriftelijk advies met een prijsindicatie, zonder verplichtingen.
Veelgestelde vragen
Wat is het verschil tussen een responsive en een mobiele website?
Een responsive website is één site die zich aanpast aan elk scherm. Een losse mobiele website is een aparte versie, vaak met minder inhoud en dubbel onderhoud. Tegenwoordig is responsive de gangbare aanpak.
Hoe weet ik of mijn website mobielvriendelijk is?
Open je site op je telefoon en kijk of je alles kunt lezen zonder in te zoomen of zijwaarts te scrollen. Controleer of knoppen groot genoeg zijn en of formulieren goed werken. Maak in je browser het venster smaller om andere schermen na te bootsen.
Telt mobielvriendelijk mee voor Google?
Ja. Google beoordeelt vooral de mobiele versie van je site. Een site die op mobiel traag of onhandig is, heeft daardoor vaak meer moeite om goed te scoren.
Kan mijn oude website responsive gemaakt worden?
Soms wel, met aanpassingen aan de opmaak. Bij oudere sites die nooit voor mobiel zijn gebouwd, wordt dat vaak lappenwerk. Dan is een nieuwe site meestal de betere keuze.
