Een responsive website past zich automatisch aan het scherm van de bezoeker aan: dezelfde pagina toont er op een telefoon anders uit dan op een laptop of tablet, zonder dat daar een aparte mobiele versie voor nodig is. Tekst, afbeeldingen en indeling schalen mee met de beschikbare ruimte, zodat de website op elk apparaat prettig te gebruiken blijft.
Hoe responsive design technisch werkt
Elementen worden opgebouwd met percentages in plaats van vaste pixelwaarden, zodat ze meeschalen met de schermbreedte.
CSS-regels die bepalen hoe de opmaak verandert bij verschillende schermformaten, bijvoorbeeld door kolommen onder elkaar te plaatsen op een smal scherm.
Afbeeldingen worden in verschillende formaten aangeboden, zodat een mobiel apparaat geen onnodig grote afbeelding hoeft te laden.
Het ontwerp start bij het kleinste scherm en wordt vervolgens uitgebreid voor grotere schermen, in plaats van andersom.
Responsive versus adaptive
Responsive
Eén ontwerp dat vloeiend meeschaalt met elk schermformaat. Lagere kosten, eenvoudiger onderhoud, werkt voor de meeste websites goed.
Adaptive
Meerdere vaste versies van een pagina, elk afgestemd op een specifiek schermformaat of zelfs specifieke functionaliteit per apparaat. Preciezer, maar complexer en duurder om te onderhouden.
Voor de meeste bedrijfswebsites is responsive de standaardkeuze, simpelweg omdat het minder onderhoud vraagt terwijl het resultaat voor de meeste bezoekers vergelijkbaar goed is.
Waarom dit meer is dan alleen gebruiksgemak
Google gebruikt mobile-first indexing: de mobiele versie van een website wordt gebruikt als primaire basis voor hoe een pagina wordt beoordeeld in de zoekresultaten, ook voor bezoekers op desktop. Een website die op mobiel slecht werkt, wordt dus niet alleen door mobiele bezoekers als vervelend ervaren, het beïnvloedt ook de positie in Google voor iedereen.
De officiële uitleg hierover staat in de documentatie van Google over mobile-first indexing.
Wat gebeurt er zonder responsive design
Een website die niet responsive is, toont op mobiel vaak dezelfde vaste breedte als op desktop, waardoor bezoekers moeten inzoomen en horizontaal scrollen om tekst leesbaar te krijgen. Dat kost geduld die de meeste bezoekers niet hebben, met een hogere bounce rate en minder conversie als gevolg. Bij bedrijfswebsites die niet meer aan te passen zijn zonder complete herbouw, is dat vaak een teken dat het platform of thema verouderd is.
De keuze voor het juiste platform speelt hierbij een grote rol. Welk CMS zich hier het beste voor leent, staat toegelicht in welke CMS het beste is voor SEO, waarbij responsive gedrag één van de factoren is.
Twijfel of de huidige website goed werkt op mobiel? Bij website laten maken of vernieuwen is een volledig responsive opzet standaard onderdeel van het fundament, samen met andere basiszaken zoals een goed beveiligde website.