Responsive webdesign: dat is toch 1 website voor desktop en 1 voor mobiel?

Een aantal jaar geleden onderging webdesign, zoals we het toen kenden, een van de meest ingrijpende veranderingen ooit. Zowel de manier waarop websites werden ontwikkeld, als de manier waarop gebruikers een website ervaarden zouden nooit meer gelijk zijn. Websites, die volgens de principes van responsive webdesign werden opgebouwd, konden content weergeven op een manier die zich automatisch aanpaste aan het apparaat en de schermresolutie van de gebruiker. Met als resultaat een geoptimaliseerde gebruikerservaring die tot hogere conversies en een hogere klant tevredenheid zou leiden.

Toch vragen sommige opdrachtgevers ons nog specifiek om twee ontwerpen te maken. 1 voor mobiele telefoons en 1 voor tablets en grotere schermen. Door je te beperken tot 2 ontwerpen, doe je je eindgebruiker helaas geen plezier. En je statistieken krijgen het daardoor ook zwaar te verduren.

Waarom is responsive webdesign eigenlijk zo belangrijk?

Heb je enig idee hoeveel verschillende schermgroottes en resoluties er op dit moment bestaan? We zijn er snel even ingedoken en waren er zelf even stil van.

24.093 verschillende Android apparaten

De hoeveelheid verschillende schermgroottes en schermresoluties is enorm. Alleen al voor mobiele telefoons zijn er honderden schermresoluties beschikbaar. We vonden onder andere een rapport van Open Signal waarin stond dat er in 2015 al 24.093 verschillende Android apparaten bestonden.

De meest populaire schermresoluties

Natuurlijk zitten er allerlei praktische en psychologische voordelen aan het bieden van een optimale gebruikerservaring van gebruikers van allerlei soorten schermen. Maar welke schermgroottes en resoluties zijn eigenlijk het meest populair? Volg deze links om de meest populaire schermresoluties in Nederland en Europa van Mei 2018 te bekijken.

In vergelijking tot heel Europa, zie je dat de schermen met hogere resoluties in Nederland favoriet zijn. 12.86% gebruikt een scherm met een 1920x1080px resolutie en 12.61% een scherm van 1366x760px. Deze schermresoluties zijn echter zowel beschikbaar voor desktop als voor mobiele apparaten. En dat maakt het eigenlijk nog complexer. Want een website die er prachtig uitziet op een 1920 x 1080px desktop-scherm, moet voor een prettige gebruikerservaring op een 1920 x 1080px smartphone scherm alsnog volledig anders worden opgebouwd. Ook in Nederland zijn de telefoonschermen met een middelhoge resolutie van 360 x 640px nog populair. Op #5 staat de klassieke 1024 x 768 px schermresolutie. Er zijn nog steeds desktop schermen met deze resolutie, maar je vindt deze resolutie ook op veel mobiele apparaten. En is de categorie “other” je al opgevallen. Niet minder dan 30% van alle schermen valt in deze categorie. Waaronder ook het groeiende aantal minischermen op smartwatches.

Het is dus echt belangrijk om je bewust te zijn van schermgroottes, en je daarbij niet te beperken tot schermresoluties. Die kennis is belangrijk, maar wel als deel van een groter plaatje.

Regeert desktop eigenlijk nog altijd?

Dat vroegen wij ons ook af, zeker na het bekijken van de statistieken die we eerder noemden. Dezelfde GlobalStats website voorzag ons ook van die gegevens. Zowel in Nederland, als in Europa is het aantal desktops inderdaad nog steeds groter dan het aantal mobiele apparaten.

“meest gebruikt” = “best converterend”?

Natuurlijk is het ook belangrijk om naar die factor te kijken. Smartinsights.com claimt dat het gebruik van mobiel internet weliswaar snel blijft groeien, maar dat veel mensen nog altijd liever hun desktop gebruiken om producten gedetailleerder te bekijken en om aankopen te doen.

Denk je nog steeds dat ontwerpen voor twee soorten apparaten de juiste aanpak is?

Responsive webdesign, hoe kwamen we daar eigenlijk?

Razendsnelle ontwikkeling

De tijd vliegt. Maar waar het om websites gaat lijkt de tijd sneller te gaan dan de snelheid van het licht. Websites van tien jaar geleden zijn nauwelijks nog te vergelijken met websites van 2018. Ze zien er niet alleen anders uit, maar ze functioneren ook volledig anders. Tien jaar geleden was er in technisch opzicht ook veel minder mogelijk. Gelukkig maar. Websites zijn er enorm op vooruit gegaan. En je bedrijf plukt er de voordelen van.

Ontwerp: van per pixel geoptimaliseerd naar geoptimaliseerd voor de gebruiker.

Webdesign groeide van statische ontwerpen naar het gebruik van animaties om gebruikers te helpen sneller en makkelijker hun doelen te bereiken. Van passen en meten om pixels in verschillende browsers op dezelfde plek te krijgen naar ontwerpen die zich vloeiend aanpassen naar verschillende apparaten en schermgroottes. Van de druk om alle belangrijke informatie in de eerste schermweergave, ofwel “above the fold”, te krijgen (en alles was altijd zo belangrijk!) naar langere, scrollbare pagina’s waarin gebruikers veel makkelijker kunnen vinden wat ze zoeken. Van drukke lay-outs naar rustige, bijna minimalistische ontwerpen die gebruikers niet in de war brengen. Waardoor ze op je site blijven en niet op “terug” klikken om vervolgens de site van je concurrent te gaan bekijken.

Functionaliteit: van online brochures naar selfservice portals en videochat

Websites waren ooit de onlineversie van een brochure en een visitekaartje samen. De meeste ondernemers publiceerden vooral wat bedrijfs-, en productinformatie, en een contactformulier.

Tegenwoordig kunnen klanten bijna ieder product en iedere dienst ook online kopen. Bovendien zijn websitegebruikers eraan gewend geraakt dat ze bepaalde zaken zelf online kunnen doen. Denk daarbij aan het doen van aanpassingen in hun account en het betalen van rekeningen. Ze vinden het wel prettig dat er medewerkers klantenservice beschikbaar zijn om ze te helpen, via chat of zelfs videochat. Daardoor worden er ook hogere eisen gesteld aan hoe een website in technisch opzicht functioneert. Want, stel je voor dat een bezoeker videochat op je website opent, om hulp te krijgen. En helaas loopt de video chat diverse keren vast. En iedere keer krijgt je bezoeker een andere medewerker klantenservice op de chat, waardoor hij of zij weer helemaal opnieuw moet beginnen met alles uitleggen. Als een bezoek aan je website niet tot een positieve ervaring leidt, is de kans groot dat je bezoeker simpelweg het winkelwagentje achterlaat. Het gevolg? Je conversieratio heeft net zoveel te lijden als je bezoeker had.

Door alle technologie die tegenwoordig voorhanden is, verwachten gebruikers gewoonweg dat het ontwerp van een website zich automatisch aanpast aan het apparaat en de schermgrootte. En ze verwachten dat ze op alle apparaten van alle functies gebruik kunnen maken.

Personalisering

Bij personalisering, in de context van web development, moet je denken aan hoe content zich aanpast aan de gebruiker, aan eerdere interactie en aan de locatie. En natuurlijk hebben we het dan ook over hoe content zich aanpast aan het gebruikte apparaat. Het is algemeen bekend dat personalisering een positieve invloed heeft op conversie. Wij zijn er dan ook van overtuigd dat personalisering in ieder ontwerpproces moet worden meegenomen.

Optimaliseer user experience en zie je conversie stijgen

Al deze, vrij nieuwe, ontwikkelingen, hebben de user experience flink verbeterd. Bezoekers die op ieder apparaat snel en makkelijk hun doelen kunnen bereiken, converteren beter, geven hogere beoordelingen en zijn meer betrokken. Daar heeft toch iedereen baat bij?

De reputatie van je bedrijf is sterk afhankelijk van hoe je website bezoekers het gebruik van je site ervaren.

Ben je klaar voor de toekomst?

Volgens een onderzoek van Business Insider zijn er in 2020 meer dan 24 miljard apparaten die verbonden zijn met het internet. Dat zijn meer dan vier apparaten, en daarmee waarschijnlijk ook meer dan vier verschillende schermgroottes per persoon.

En heb jij enig idee welke schermgrootte over twee jaar het meest populair zal zijn? Een televisiescherm? Misschien een Phablet? Heb je gezien hoe snel het aantal Phablets in de afgelopen jaren gegroeid is?

Mogen we je aanbevelen om je website weer eens op zo veel mogelijk verschillende apparaten te bekijken? Want hoe makkelijker je website zich nu aan al die verschillende apparaten aanpast, des te beter is deze voorbereid op wat er nog komen gaat. Denk daarbij aan brillen, horloges, televisies, phablets en multi-touch schermen.

Een optimale ervaring voor iedere gebruiker

Bij Level Level zijn we gek op responsive design. Door te ontwerpen voor een grote hoeveelheid mogelijke lay-outs, zorgen we voor een optimale ervaring voor iedere gebruiker. Waar zowel je reputatie als je conversieratio de vruchten van plukken.

Nog even kort

Door je te beperken tot 1 ontwerp dat voor desktop geoptimaliseerd is, en 1 voor mobiele apparaten, krijgen HEEL VEEL gebruikers een frustrerende ervaring bij het bezoeken van je website. Dit heeft grote gevolgen voor je bezoekers statistieken, waaronder je conversieratio, maar boven alles voor de reputatie van je bedrijf.

De vraag is dus, maakt jouw bedrijf al optimaal gebruik van alle voordelen van responsive webdesign?

En nu?

Stay tuned: binnenkort meer artikelen over responsive web design. We vertellen je in het eerstvolgende artikel over de 6-lay-out aanpak van Level Level. We leggen dan uit welke elementen aangepast moeten worden om een website responsive te maken.