Responsive website: wat het is en waarom je hem nodig hebt

Een responsive website past zich aan het scherm aan waarop je hem bekijkt. Op een breed scherm staan blokken naast elkaar, op een telefoon onder elkaar. Teksten, knoppen en afbeeldingen schalen mee.

Het is één website met één adres en dezelfde inhoud. Alleen de opmaak verandert per schermbreedte. Vroeger bouwden bedrijven soms een aparte mobiele site op m.domein.nl. Dat is nu zeldzaam.

Responsive websites werken op elke telefoon, tablet, laptop en monitor. Ook een scherm dat volgend jaar op de markt komt, krijgt vanzelf een passende opmaak.

1. Je bezoekers zitten op hun telefoonBij veel websites komt het grootste deel van de bezoekers via de telefoon. Ze zoeken onderweg, op de bank of tussen afspraken door.
2. Google kijkt eerst naar mobielGoogle gebruikt mobile-first indexering. Het beoordeelt je site op de mobiele versie, ook voor wie op een computer zoekt.
3. Meer aanvragenEen mobielvriendelijke website maakt bellen, appen en een afspraak plannen makkelijk. Elke tik minder verlaagt de drempel.
4. VertrouwenEen site die op de telefoon rommelig oogt, voelt verouderd. Een strakke mobiele site laat zien dat je bedrijf bij de tijd is.
5. Eén site om bij te houdenJe past je inhoud één keer aan en hij klopt op elk scherm.

Responsive design rust op een paar technieken die samen zorgen dat je site op elk scherm goed oogt.

1. Viewport-instellingEen korte regel in de code vertelt de telefoon dat hij de pagina op de echte schermbreedte toont. Zo leest een bezoeker alles direct op ware grootte.
2. Flexibele rastersKolommen en blokken krijgen breedtes in procenten of flexibele eenheden. Ze schuiven mee met het scherm.
3. BreekpuntenBij bepaalde schermbreedtes verandert de opmaak, bijvoorbeeld van drie kolommen naar één. Dat regel je met media queries in CSS.
4. Flexibele afbeeldingenAfbeeldingen schalen mee en de browser laadt op een telefoon een kleinere versie. Dat scheelt laadtijd.
5. Leesbare tekstEen lettergrootte van zo'n 16 pixels voor lopende tekst leest prettig op een klein scherm.
6. Grote tikvlakkenKnoppen en links zijn groot genoeg voor een duim, met ruimte ertussen. Google adviseert minstens 48 bij 48 pixels.

Een mobielvriendelijke website begint bij de vraag wat je bezoeker op de telefoon wil doen. Meestal is dat snel iets opzoeken, bellen of een afspraak maken. Daar ontwerp je de pagina omheen.

1. Begin bij het kleinste schermOntwerp eerst de telefoonversie en voeg daarna ruimte en details toe voor grotere schermen. Zo staat het belangrijkste altijd bovenaan.
2. Zet de actie in beeldEen knop om te bellen, te appen of een afspraak te plannen staat in het eerste scherm en blijft binnen bereik van de duim.
3. Schrijf korte alinea'sOp een smal scherm wordt een alinea al snel een lange lap. Twee tot vier zinnen per alinea lezen prettig.
4. Maak formulieren lichtWeinig velden, het juiste toetsenbord per veld en automatisch aanvullen. Zo vult iemand een aanvraag in een paar tellen in.
5. Gebruik pop-ups met mateEen melding die het hele scherm bedekt, irriteert op de telefoon. Een kleine balk onderaan werkt vriendelijker.

Een responsive website die traag laadt, verliest alsnog bezoekers. Op de telefoon zit je vaak op 4G of 5G, met een zwakker signaal dan thuis op wifi.

Lever daarom afbeeldingen in moderne formaten zoals WebP of AVIF en in meerdere maten. Laad afbeeldingen onder de vouw pas als de bezoeker erheen scrolt. Houd het aantal lettertypes en scripts klein.

1. Op je eigen telefoonOpen je site en loop elke belangrijke pagina door. Kun je alles lezen, scrollen en aantikken met één duim?
2. In je browserIn Chrome open je met F12 de ontwikkelaarstools. Met de apparaatweergave bekijk je je site op verschillende schermformaten.
3. Met PageSpeed InsightsDeze gratis tool van Google meet de snelheid en het gebruiksgemak van je site op mobiel en geeft concrete verbeterpunten.
4. In Search ConsoleHier zie je hoe Google je pagina's leest en hoe de laadervaring op mobiel scoort.
5. Let op deze signalenTekst die buiten het scherm valt, horizontaal scrollen, knoppen die te dicht op elkaar staan en pop-ups die het hele scherm bedekken.

Vrijwel elke webbouwer belooft een responsive website. Het verschil zit in de uitwerking. Vraag bij het laten maken naar deze vier punten.

1. Ontworpen voor mobielHet ontwerp begint bij de telefoon en groeit door naar grotere schermen. Zo krijgt de mobiele bezoeker de beste versie.
2. Snel op 4GLichte afbeeldingen, weinig zware scripts en snelle hosting. Vraag naar de PageSpeed-score van eerdere sites.
3. Contact met één tikBellen, WhatsApp en een afspraak plannen staan op de telefoon binnen handbereik.
4. Getest op echte toestelleniPhone en Android, klein en groot, staand en liggend.

Elke website van Delta Six is ontworpen voor desktop en telefoon, met premium 3D-design op maat in jouw kleuren. We bouwen in eigen code op eigen servers, snel en veilig.

Op de telefoon plant je bezoeker met een paar tikken een afspraak, en de AI-chatbot beantwoordt vragen. We bouwen je complete website eerst gratis en je betaalt pas als je tevreden bent.