Je opent je eigen website op een telefoon. De tekst is leesbaar, het menu klapt netjes in en afbeeldingen veranderen van formaat zonder iets van het scherm te duwen. Zo werkt responsive websiteontwerp als het goed gaat. Als het niet zo werkt, vertrekken bezoekers voordat ze een woord lezen.
Je website heeft één set inhoud en één set code. Responsive websiteontwerp is de aanpak die deze ene codebase elke bezoeker goed laat bedienen, of die nu op een breedbeeldmonitor zit of een telefoon rechtop vasthoudt. In plaats van een aparte mobiele versie van je site te bouwen, past een responsive ontwerp de lay-out, afbeeldingen en navigatie automatisch aan op basis van het scherm dat wordt gebruikt.
Een site die alleen op een desktop goed oogt, laat de meeste bezoekers in de steek voordat ze iets lezen. Voor de meeste ondernemers is responsive design geen beslissing om te overwegen. Het is een basisverwachting die je voor de lancering controleert.
Hoe werkt responsive design?
Een responsive website gebruikt CSS-regels, media queries genoemd, om de grootte van het scherm van een bezoeker te herkennen. Op basis daarvan past de lay-out zich aan. Een sectie met drie kolommen op desktop wordt op mobiel misschien één kolom. Een horizontaal navigatiemenu klapt misschien in tot een knop. Afbeeldingen veranderen van formaat om in de beschikbare breedte te passen zonder buiten hun vlak te vallen.
Het belangrijkste principe is dat de inhoud hetzelfde blijft. Wat verandert, is hoe die inhoud wordt geordend en getoond. Een responsive site is geen andere site voor mobiele gebruikers. Het is dezelfde site, aangepast aan een ander scherm.
Voor een diepere technische uitleg over hoe dit werkt, behandelt het artikel over wat responsive design is de werking in detail, inclusief hoe vloeiende rasters en flexibele afbeeldingen werken op verschillende apparaatformaten.
Wat is het verschil tussen responsive design en een aparte mobiele site?
Voordat responsive design de standaard werd, bouwden veel bedrijven een aparte mobiele versie van hun site, vaak op een andere URL. Een bezoeker op een telefoon werd doorgestuurd naar de mobiele versie. Een bezoeker op een desktop zag de hoofdsite.
Die aanpak leverde twee aparte dingen op om bij te houden. Wijzigingen in de een werden niet automatisch toegepast op de ander. Inhoud liep uit de pas. De mobiele versie had vaak minder functies of minder inhoud. Twee codebases beheren verdubbelde het werk zonder het resultaat te verdubbelen.
Responsive design verving dit door één site overal te laten werken. Eén URL, één set inhoud, één codebase, aangepast aan alle schermformaten. Het is eenvoudiger te bouwen, eenvoudiger te onderhouden en beter voor zoekmachines, die de voorkeur geven aan één gezaghebbende URL voor elk stuk inhoud.
Wat verandert er tussen desktop en mobiel op een responsive site?
De aanpassingen tussen desktop en mobiel zijn uitgebreider dan de meeste mensen in eerste instantie beseffen.
Kolommen in de lay-out klappen in. Een sectie met vier productkaarten naast elkaar op desktop wordt op mobiel een scrollbare stapel. Navigatiemenu's veranderen van vorm. Horizontale menu's worden uitklapbare panelen of zijpanelen die inschuiven. Lettergroottes passen zich aan om leesbaar te blijven zonder in te zoomen. Knoppen worden groter zodat ze makkelijker met een vinger aan te tikken zijn dan met een muis aan te klikken.
Afbeeldingen veranderen van formaat om hun vlak te vullen zonder eruit te vallen. Achtergrondafbeeldingen worden misschien anders bijgesneden om te werken in staande verhoudingen. Formulieren passen veldgroottes en witruimte aan, zodat ze bruikbaar zijn met een mobiel toetsenbord.
De toets voor een goed uitgevoerd responsive ontwerp is niet alleen dat het op mobiel niet stukgaat. Het is dat de ervaring op mobiel doordacht voelt en niet samengedrukt.
Hoe hangt responsive design samen met paginasnelheid?
Responsive design en paginasnelheid hangen nauw samen. Een responsive site die afbeeldingen in volledige desktopresolutie aan mobiele bezoekers levert, is technisch responsive maar in de praktijk traag. Mobiele bezoekers op een mobiele verbinding downloaden afbeeldingen die veel groter zijn dan hun scherm kan tonen.
Een goed uitgevoerd responsive ontwerp lost dit op door afbeeldingen van het juiste formaat aan elk apparaat te leveren, bestanden te comprimeren voor mobiele verbindingen en niet-essentiële elementen uit te stellen die de eerste laadtijd vertragen. Het doel is niet alleen aanpassing van de lay-out. Het is een snelle, soepele ervaring, ongeacht het apparaat of de verbindingssnelheid.
Het artikel over wat websitesnelheid is legt uit hoe laadprestaties de gebruikerservaring en zoekposities beïnvloeden, en wat ervoor zorgt dat sites trager zijn dan nodig.
Waar let je op bij de responsiviteit van een sjabloon?
Niet elk sjabloon dat als responsive wordt aangeduid is even goed ontworpen voor mobiel. Als je er een beoordeelt, zijn er een paar dingen die je controleert voordat je kiest.
Open de demo van het sjabloon op je telefoon, niet alleen in een desktopvoorbeeld. Loop door elke sectie. Controleer of het menu netjes opent en alle links bereikbaar zijn. Controleer of tekst leesbaar is zonder in te zoomen. Controleer of call-to-action-knoppen groot genoeg zijn om prettig aan te tikken. Controleer of afbeeldingen goed worden getoond en geen inhoud van het scherm duwen.
Let op de witruimte op mobiel. Secties die op desktop ruim ogen, kunnen krap voelen als kolommen op een klein scherm inklappen. Controleer of inhoudssecties genoeg marge hebben, zodat tekst niet van rand tot rand loopt. Het artikel over hoe je een websitesjabloon kiest behandelt testen op mobiel als onderdeel van de volledige beoordeling van een sjabloon.
Aan welke signalen zie je dat een website niet goed responsive is?
Sommige mislukkingen van responsiviteit zijn duidelijk. Andere zijn zo subtiel dat je ze misschien pas merkt als een klant het zegt.
Veelvoorkomende signalen dat een site niet goed responsive is: tekst die horizontaal scrollen vraagt om hem helemaal te lezen, afbeeldingen die buiten hun vlak vallen en aan de randen worden afgesneden, navigatiemenu's die zonder cursor onmogelijk te gebruiken zijn, knoppen die te klein zijn om betrouwbaar aan te tikken en formulieren waarvan de invoervelden niet goed meeschalen voor een mobiel toetsenbord.
Minder opvallende signalen zijn een lay-out die technisch op mobiel past maar eruitziet als een desktopsite die in een smalle kolom is geperst. Secties met te veel kolommen die in een verwarrende volgorde inklappen. Headers en footers die op mobiel anders werken op manieren waar het oorspronkelijke ontwerp geen rekening mee hield.
De standaardcontrole is elke pagina langslopen op een echte telefoon. Browservoorbeelden zijn handig tijdens het bouwen, maar geven de ervaring van een apparaat met aanraking niet volledig weer.
Hoe beïnvloedt responsive design je zoekposities?
Zoekmachines gebruiken de mobiele versie van je website als primaire versie voor indexeren en rangschikken. Een site die goed werkt op mobiel en snel laadt op een telefoon, presteert over het algemeen beter in zoekresultaten dan een site die vooral voor desktop is gebouwd.
Naast de voorkeur voor indexering stuurt een slecht responsive site negatieve signalen. Hoge bouncepercentages van mobiele bezoekers, trage laadtijden op mobiele verbindingen en inhoud die moeilijk te lezen is, drukken allemaal de prestaties in de loop van de tijd. Bezoekers die direct vertrekken omdat de site niet werkt op hun telefoon, vertellen zoekmachines dat de pagina ze niet heeft geholpen.
Voor het volledige beeld van hoe zoekmachineoptimalisatie werkt en welke technische factoren het zwaarst wegen, behandelt het artikel over wat SEO is het onderwerp uitgebreid.
Zo regelt WEMASY responsive design
Elk sjabloon in de Websitebouwer van WEMASY is gebouwd om responsive te zijn op desktop, tablet en mobiel. De visuele editor bevat een mobiel voorbeeld naast de desktopweergave, zodat je tijdens het bouwen kunt controleren hoe secties zich gedragen op verschillende schermformaten. Prestaties en mobiele responsiviteit regelt het platform in plaats van dat je ze handmatig moet instellen.
Bekijk wat erbij zit op de WEMASY Websitebouwer of bekijk de abonnementen op de prijspagina.
Veelgestelde vragen
Is mijn website automatisch responsive als ik een websitebouwer gebruik?
De meeste moderne websitebouwers gebruiken standaard responsive sjablonen. Heb je een sjabloon gekozen uit een actuele websitebouwer, dan is hij waarschijnlijk responsive. De belangrijke controle is niet of het sjabloon als responsive wordt aangeduid, maar of het zich goed gedraagt op een telefoon. Loop je site langs op een echt mobiel apparaat en test de navigatie, afbeeldingen, tekstgrootte en formulieren voordat je ervan uitgaat dat alles goed werkt. Met de Websitebouwer van WEMASY zet je dit direct op je website.
Kan een oudere website responsive worden gemaakt zonder hem opnieuw te bouwen?
Dat hangt af van hoe de oorspronkelijke site is gebouwd. Bij sites op moderne websitebouwers kun je de mobiele ervaring vaak verbeteren door de instellingen van het sjabloon aan te passen of over te stappen op een beter sjabloon. Sites die van de grond af zijn gecodeerd of op oudere platforms zijn gebouwd, vragen mogelijk veel herwerk. In veel gevallen is opnieuw bouwen op een actueel platform sneller en geeft het een beter resultaat dan responsiviteit achteraf inbouwen in een oudere codebase.
Beïnvloedt responsive design hoe snel mijn website laadt?
Responsive design zelf maakt een site niet trager. Hoe het is uitgevoerd wel. Een site die afbeeldingen in volledig desktopformaat aan mobiele bezoekers op een mobiele verbinding levert, laadt traag, ook als de lay-out zich goed aanpast. Een goed uitgevoerd responsive ontwerp bevat afbeeldingsformaten die bij mobiel passen, gecomprimeerde bestanden en uitgesteld laden voor niet-essentiële elementen. De lay-out die zich aan het scherm aanpast is maar een deel van een complete mobiele ervaring.
Wat is mobile-first design?
Mobile-first design is een aanpak waarbij de mobiele versie van een site wordt ontworpen en gebouwd voordat de desktopversie komt, in plaats van andersom. Het begint bij de meest beperkte omgeving en breidt van daaruit uit. Eerst voor mobiel ontwerpen dwingt duidelijkere prioriteiten af. Als de ruimte beperkt is, overleeft alleen de belangrijkste inhoud en acties. De desktopversie heeft dan ruimte om op dat fundament voort te bouwen.
Hoe controleer ik of mijn website mobielvriendelijk is?
Loop elke pagina langs op een echte telefoon. Test de navigatie, afbeeldingen, tekstgrootte, formulieren en knoppen. Zoekmachines bieden ook gratis mobiele testtools waarin je je URL invoert en die specifieke problemen aanwijzen, zoals tekst die te klein is om te lezen of aanklikbare elementen die te dicht op elkaar staan. De combinatie van een handmatige controle en een controle met een tool brengt de problemen aan het licht die het meest tellen.