De term responsive webdesign hoor je steeds vaker als je het hebt over de digitale klantreis en als je het hebt over het bouwen van online omgevingen. Eigenlijk gaat het erom hoe de benadering van een webdesign is waarbij de developer het streven heeft naar een optimale ervaring voor alle apparaten, dus zowel laptops als smartphones als ipad’s. Dat kun je op verschillende manieren bereiken met allemaal zijn eigen voor- en nadelen.
Hoe is responsive webdesign ontstaan?
In 2010 bedacht Ethan Marcotte de term responsive webdesign op zijn weblog A List Apart. Tijdens het bedenken van de term merkte hij op dat steeds meer bedrijven gingen investeren in hun website voor mobiele apparaten. Dit deden de bedrijven om ervoor te zorgen dat niet alleen op een computer of laptop producten besteld konden worden, maar ook mobiel. Doordat er verschillende maten en merken mobiele apparaten werden uitgevonden, bleek één mobiele website niet dé oplossing. Vaste afmetingen komen uit het print tijdperk en Marcotte is gaan werken met relatieve eenheden.
De technieken van een responsive webdesign
Bij het bedenken van de term responsive webdesign heeft Marcotte zich ook beziggehouden met verschillende methoden. Je kunt onderstaande methodes alleen los van elkaar gebruiken en niet samenvoegen omdat ze gebouwd zijn op de structuur van de website.
- Flexibele grids en afbeeldingen. Met deze methode worden breedtes en hoogtes niet in vaste pixels uitgedrukt maar in verhoudingen. Denk daarbij aan percentages bijvoorbeeld. Op deze manier is je website altijd juist te leen als het gaat om verhoudingen.
- Media Queries. Als je apparaat zijn afmetingen doorgeeft aan de webpagina, dan wordt de site in het juiste pixel-formaat weergegeven. Met deze manier past de website zich aan het apparaat aan.
- Breakpoints. Bij de breakpoints methode wordt vanaf een opgegeven punt niet meer in het origineel weergegeven maar verplaatst naar bijvoorbeeld de onderzijde van de website. Dit wordt bijvoorbeeld vaak met sidebars.
- Mobile first. De mobile first methode is erop gebouwd op het weergeven van een kleiner scherm in eerste instantie. De website schaalt op naarmate de viewport groter wordt. Op die manier kan er geen cruciale informatie ontbreken.
Als je wilt werken aan de perfecte digitale klantreis dan is het belangrijk om een van deze methodes te gebruiken.
Let op deze valkuilen
Het testen van websites met designs die reageren is een van de valkuilen. Het is namelijk lastiger dan een gewone website om te testen. Daar komt bij dat bugs dus wisselend aan en afwezig kunnen zijn afhankelijk van het type apparaat en het formaat.
Een andere valkuil is dat afbeeldingen geschikt voor de reguliere website soms niet geschikt zijn voor een mobiele website vanwege bijvoorbeeld hun formaat. Zware afbeeldingen kunnen de laadtijd op een mobiel apparaat onnodig lang maken wat de digitale klantreis niet ten goede komt.
Video’s zijn op zichzelf lastig te veranderen in schaal als het gaat over een responsive webdesign. Dat geldt zowel voor video’s die je zelf plaatst op de website maar ook advertenties met video’s of bewegende beelden.
WIl je er wat extra’s bij doen? Dan kan branding strategie ook handig zijn.