Responsive design: Hoe belangrijk is het?
In de wereld van websiteontwikkeling is ‘responsive design’ een veelgebruikt begrip. Het is een term die je vast weleens voorbij hebt horen komen, maar wat betekent het nu eigenlijk? Responsive design betekent kortgezegd dat je site goed moet functioneren op allerlei verschillende apparaten, zoals tablets en mobiele telefoons. Hoe belangrijk dat is en hoe je dat het beste kunt toepassen lees je in dit artikel.
Wat is responsive design?
Responsive design betekent dat een website goed functioneert op alle verschillende schermgroottes. Dat betekent dat als je een website bijvoorbeeld opent op een mobiel apparaat, je de tekst direct kunt lezen zonder dat je hoeft in te zoomen. Het betekent ook dat de hele website gewoon op het scherm past en dat je niet horizontaal hoeft te scrollen op de pagina. Dit alles draagt bij aan een veel prettigere ervaring voor de bezoeker.
Sinds wanneer bestaat responsive design?
De eerste website op het internet werd gelanceerd op 6 augustus 1991, ruim dertig jaar geleden dus. In deze tijd bestonden er nog geen mobiele telefoons en al helemaal niet een waarmee je toegang had tot het internet. Je hoefde daarom dus nog helemaal geen rekening te houden met responsive design, want het bestond nog nauwelijks. Je had hooguit een aantal verschillende computerschermen waar de site op moest werken, maar dat was het dan ook wel.
Ongeveer sinds 2007 begon de grootschalige opkomst van de smartphone met onder andere de introductie van de eerste iPhone. Internet was vanaf deze tijd ook toegankelijk vanaf de telefoon, iets revolutionairs in deze tijd. Het enige probleem was dat de websites die toen bestonden alleen gemaakt waren voor desktopcomputers. Tot die tijd was er slechts een beperkt aantal schermresoluties waar men rekening mee moest houden bij het bouwen van een website.
De technische mogelijkheden om een site überhaupt goed te laten werken op een mobiel apparaat waren in 2007 nog redelijk beperkt. De ontwikkelingen voor het responsive kunnen maken van een website hebben ongeveer tot 2012 geduurd. Vanaf dat jaar werd het gebruik van breekpunten op je site pas grootschalig gebruikt. Bijvoorbeeld: als het scherm minder dan een x aantal pixels breed is, dat de site dan een aparte styling toepast.
Mobile first of desktop first?
Tegenwoordig is een veelgebruikte methode bij het maken van websites juist ‘mobile first’. Daarmee wordt bedoeld dat de site eerst voor mobiele apparaten wordt gemaakt en pas daarna wordt de site voor desktop goed ontwikkeld. Een tegenhanger van dat principe is juist ‘desktop first’, een methode waarbij je het juist omdraait: je maakt de site eerst voor desktop en gaat daarna de site op mobiele apparaten aanpassen. Voor beide methoden valt wat te zeggen en daarom is het een niet per se beter dan het ander.
Hoe belangrijk is responsive design voor Google?
De meeste gebruikers bezoeken een website via een mobiel apparaat. De meningen over hoeveel procent dat is zijn wel wat verdeeld, maar je mag er in ieder geval wel vanuit gaan dat het meer is dan 50%. Daarom is het natuurlijk ontzettend belangrijk dat de site goed werkt voor deze groep mensen. Dat vinden ze ook bij zoekmachines als Google en Bing. Wanneer iemand zoekt op een bepaalde term, zal Google een site hoger rangschikken in de resultaten als deze goed werkt voor mobiele apparaten. Wat precies de invloed is, is lastig te zeggen. Google geeft zijn algoritme namelijk niet helemaal prijs, maar dat het invloed heeft op het vindbaar worden in Google is wel zeker.
Dat een site responsive moet zijn, heeft niet alleen invloed op de positie in de zoekresultaten van Google. Het zorgt er ook voor dat mensen überhaupt op je pagina blijven. 61% van de mensen die een site bezoekt die niet responsive is, gaat terug naar Google om een andere website te openen die wel responsive is. Ook zegt 67% van de mensen sneller geneigd te zijn iets te kopen vanaf een site die responsive is. Dit onderzoek is al uit 2012, een tijd waar responsive design nog vrij nieuw was. Zou je hetzelfde onderzoek nu opnieuw uitvoeren, dan zou het goed kunnen dat het percentage nog veel hoger uitvalt, omdat men nu min of meer ‘gewend’ is dat een site responsive is.
Hoe maak je een website responsive?
Vroeger was het een hele uitdaging om een website responsive te maken, maar tegenwoordig is de techniek al een heel stuk verder. Ook zijn er veel bestaande oplossingen beschikbaar die je met een paar drukken op de knop op jouw website geïmplementeerd hebt. Hieronder vind je daarom een aantal tips die je kunt gebruiken op jouw website responsive te maken:
1. Layout
Het eerste en meest voor de hand liggende is de layout van de website. Voor een desktop website heb je uiteraard veel meer ruimte in de breedte van de pagina, terwijl een mobiel scherm een stuk smaller is, maar wel langer. Als je layout bijvoorbeeld bestaat uit meerdere kolommen, zou het beter zijn om deze kolommen onder elkaar te tonen op een mobiele versie van de pagina.
2. Schaal
Als je een niet-geoptimaliseerde website opent op een mobiel apparaat, zul je zien dat de tekst veel te klein is om te lezen. Daarom moet je de schaal van de pagina aanpassen voor mobiele apparaten, zodat mobiele gebruikers een meer ‘ingezoomde’ pagina zien.
3. Laadsnelheid
Je zou er misschien minder snel aan denken, maar de laadsnelheid is ook iets om rekening mee te houden bij een mobiele-vriendelijke website. Een telefoon is namelijk meestal minder krachtig dan een desktopcomputer. Bovendien is een telefoon met het internet verbonden via WiFi of 4G. Een desktopcomputer is vaak verbonden via een internetkabel, waardoor de verbinding veel sneller is. De laadtijd van de website kun je onder andere verbeteren door afbeeldingen te verkleinen, want hier gaat vaak de meeste snelheid van een site aan verloren.
4. Optimaliseer voor touchscreen
Een smartphone maakt uiteraard gebruik van touchscreen. Het is daarom belangrijk dat je site goed werkt hiermee. Dit doe je door klikbare elementen, zoals knoppen, dusdanig groot te maken dat ze makkelijk te klikken zijn.
5. Gebruik een pagebuilder
Als je graag een website wilt hebben die responsive is, dan is het verstandig om een pagebuilder als Elementor te gebruiken. Met zo’n pagebuilder kun je eenvoudig zien hoe je website er voor desktop-, tablet- en mobiele gebruikers uit zal zien. Ook kun je een pagina voor een specifieke groep gebruikers aanpassen. Zonder technische kennis kan het namelijk nogal een uitdaging worden om in de code te duiken en een website responsive te maken
6. Veel experimenteren
Een website responsive maken kan soms een uitdaging zijn; helemaal als je kiest voor complexe layouts. Dit kun je bijna niet goed doen zonder het uitvoerig te testen om zo tot het beste resultaat te komen. Experimenteer ook op verschillende apparaten, zoals een iPhone en een Android-apparaat. Tussen deze verschillende besturingssystemen zit ook nog weer verschil.
Conclusie
Een website responsive maken is dus het optimaliseren van je website voor verschillende schermgroottes. Het is erg belangrijk voor de vindbaarheid van je website en voor de ervaring van je bezoekers. Ook zijn er veel dingen die je zelf kunt doen om jouw website responsive te maken. Ben je nou niet zo’n techneut of heb je helemaal geen zin om je er druk over te maken dat je tekst nét iets over de rand van het scherm loopt? Dan kun je uiteraard ook gewoon je website laten maken. Wellicht scheelt je dat een hoop frustratie.
