Responsive website laten maken betekent dat je één website krijgt die zich automatisch aanpast aan het scherm waarop hij geopend wordt: telefoon, tablet en desktop. Het is geen aparte mobiele site en geen extra module, maar de standaard manier waarop websites tegenwoordig gebouwd worden. Reken er dus op dat het in de basisprijs zit; een bouwer die responsive als meerprijs opvoert, verkoopt je iets dat er sowieso hoort te zijn.
Wat een responsive website laten maken precies inhoudt
Een responsive website is één website: één adres, één set teksten, één plek waar je dingen aanpast. Het verschil zit in hoe die site zich gedraagt als het scherm smaller wordt. Op een breed beeldscherm staan drie blokken naast elkaar; op een telefoon schuiven diezelfde blokken onder elkaar. Knoppen worden groter zodat je ze met je duim raakt, afbeeldingen krimpen mee en tekstregels blijven leesbaar in plaats van door te lopen tot de rand van het scherm.
Technisch werkt dat met een flexibel raster en een paar breekpunten: schermbreedtes waarop de opmaak omklapt. Als ondernemer hoef je daar niets van te snappen. Wat je wél moet weten is dit: het is geen los onderdeel dat je erbij bestelt. Wil je je website laten bouwen, dan hoort dit gewoon in de basis te zitten. En of je nu kiest voor een bestaand thema of voor een maatwerk website: in beide gevallen hoort het er zonder discussie bij.
Responsive is niet hetzelfde als een aparte mobiele site
Dit is de hardnekkigste verwarring. Jaren geleden bouwden bureaus naast de gewone site een tweede, uitgeklede versie op een eigen adres. Bezoekers met een telefoon werden daarheen gestuurd. Dat leverde twee sites op die je allebei moest bijhouden, waarbij de mobiele versie bijna altijd achterliep: oude prijzen, ontbrekende pagina's, een formulier dat alleen op desktop werkte.
Responsive draait dat om. Niet twee sites, maar één site die zich voegt naar het scherm waarop hij geopend wordt. Je past een tekst één keer aan en het klopt overal.
| Aanpak | Wat de bezoeker ziet | Wat het jou kost aan onderhoud |
|---|---|---|
| Vaste breedte, niet responsive | De desktopsite in het klein; zoomen en slepen om iets te lezen | Eén site, maar je verliest mobiele bezoekers |
| Aparte mobiele site | Een uitgeklede versie op een eigen adres | Twee sites bijhouden, versies lopen uit elkaar |
| Responsive | Dezelfde inhoud, anders ingedeeld per schermformaat | Eén site, één keer aanpassen |
Waarom mobiel het uitgangspunt is en niet de uitzondering
De volgorde waarin een site ontworpen wordt bepaalt wat er sneuvelt. Begin je op desktop, dan heb je alle ruimte: een brede balk, een grote foto, vier kolommen onderaan. Vervolgens moet dat allemaal ingepropt worden op een scherm ter breedte van een hand. Daar gaat het mis. Er wordt geschrapt, verstopt en dichtgeklapt tot er iets overblijft dat technisch werkt maar niet prettig leest.
Andersom werkt beter. Begin je op de telefoon, dan dwingt de ruimte meteen tot keuzes: wat is de belangrijkste boodschap, welke knop moet als eerste in beeld, welke informatie mag verderop staan. Alles wat je daarna op een groot scherm toevoegt is winst in plaats van een noodgreep. Niet toevallig bekijken veel ondernemers hun eigen site ook als eerste op hun telefoon, en voelen ze daar direct of het klopt.
Daar komt bij dat zoekmachines je site beoordelen op basis van de mobiele versie. Wat daar ontbreekt of onleesbaar is, telt dus gewoon mee.
Waar het in de praktijk misgaat
Een site is zelden helemaal wel of helemaal niet responsive. Meestal klopt het grote geheel en gaat het mis in vier hoeken.
Het menu
Op desktop staan zeven items netjes naast elkaar, op mobiel worden het drie streepjes. Vaak is dat prima. Het wordt vervelend als submenu's niet open te krijgen zijn met een duim, als het menu over de tekst heen blijft liggen nadat je het sluit, of als juist de belangrijkste knop, bellen, offerte, afspraak, in dat dichtgeklapte menu verdwijnt.
Tabellen
Prijstabellen en vergelijkingsoverzichten zijn gemaakt voor breedte. Op een telefoon worden ze óf platgedrukt tot onleesbare kolommetjes, óf duwen ze de hele pagina opzij zodat je horizontaal moet schuiven. Een tabel die op mobiel per rij onder elkaar valt, of die je binnen zijn eigen kader kunt schuiven, lost dat op.
Formulieren
Hier verlies je het vaakst een aanvraag zonder dat je het merkt. Velden die te smal zijn om je eigen antwoord terug te lezen. Labels die verdwijnen zodra je begint te typen. Een verzendknop die onder het toetsenbord blijft hangen. Een telefoonveld dat geen cijfertoetsenbord opent. Stuk voor stuk kleine dingen die samen het verschil maken tussen een verstuurd formulier en een afgehaakte bezoeker.
Afbeeldingen
Een foto die op desktop de volle breedte vult hoeft op een telefoon lang niet zo groot te zijn. Gebeurt dat toch, dan krijg je twee problemen tegelijk: een bezoeker die op een matige verbinding staat te wachten, en een beeld dat zo strak wordt bijgesneden dat het onderwerp erbuiten valt. Logo's en foto's met kleine letters erin zijn daar berucht om.
Zo controleer je zelf of je site het goed doet
Hier heb je geen bureau voor nodig. Een klein rondje met je eigen telefoon levert de meeste knelpunten al op. Loop deze volgorde af:
- Pak je telefoon, niet je laptop. Open je site zoals een bezoeker dat doet: via Google of via een link in een appje, niet via een bladwijzer.
- Draai het toestel een kwartslag. Blijft de indeling kloppen in liggende stand, of springt er iets uit beeld?
- Probeer of je ergens horizontaal kunt schuiven. Kan dat, dan steekt er iets uit: meestal een tabel, een brede afbeelding of een ingesloten kaart.
- Open het menu en ga naar je drie belangrijkste pagina's. Lukt dat met één hand, zonder in te zoomen?
- Vul je eigen contactformulier helemaal in en verstuur het. Niet half, maar echt tot en met de bevestiging in je mailbox.
- Tik op het telefoonnummer en op het e-mailadres op je site. Doen die links wat ze horen te doen?
- Laat iemand die niet dagelijks op een telefoon werkt hetzelfde proberen, zonder uitleg. Wat die persoon niet vindt, vindt je klant ook niet.
Kom je er niet uit, of wil je verder kijken dan alleen de indeling, dan kun je je website analyseren op meer punten tegelijk.
Wanneer responsive als meerprijs een waarschuwingssignaal is
Nu het eerlijke stuk. Zet een bouwer responsive als losse regel op de offerte, mobiele optimalisatie, mobiele versie, geschikt maken voor telefoon, dan is dat geen extra service. Dan word je iets verkocht dat er sowieso hoort te zijn. Vergelijk het met een aannemer die een meerprijs rekent voor deuren die dichtgaan.
Stel die vraag dus gewoon, en let op het antwoord. Hoor je dat het in de basis zit: prima. Hoor je een bedrag, vraag dan door wat je krijgt in de versie zónder dat bedrag. Er bestaat geen goed antwoord op die vraag, en dat merk je meteen aan de reactie.
Er is nog een tweede eerlijk punt, en dat kost ons soms een opdracht. Is je huidige site inhoudelijk prima en oogt hij alleen op mobiel rommelig, laat je dan geen nieuwe site aanpraten. Een menu dat beter opent, een tabel die omklapt en een formulier dat op een klein scherm werkt zijn meestal reparaties binnen je bestaande site. Dat is een stuk goedkoper dan opnieuw beginnen. Bouw opnieuw als de inhoud, de structuur of het beheer niet meer kloppen, niet omdat er iets uitsteekt op een iPhone.
Wat je vraagt voordat je tekent
Een paar vragen die je zonder technische kennis kunt stellen en die veel zeggen over hoe er gewerkt wordt:
- Op welk scherm ontwerpen jullie als eerste? Mobiel als startpunt is een heel ander antwoord dan achteraf passend maken.
- Kan ik tussentijds meekijken op mijn eigen telefoon? Een testomgeving die je zelf kunt openen zegt meer dan een screenshot in een presentatie.
- Wat gebeurt er met mijn tabellen en formulieren op een klein scherm? Komt daar geen concreet antwoord op, dan is er niet over nagedacht.
- Wie kijkt er na oplevering nog naar? Telefoons en browsers veranderen; wat vandaag klopt kan later gaan schuiven.
Je hoeft geen van die antwoorden zelf te kunnen controleren. Je merkt aan de reactie of iemand hier dagelijks mee bezig is of niet.