Responsive design: een betere user experience

MOBILE

Hoe responsive design bijdraagt aan een consistente ervaring die onafhankelijk is van devices

1

INHOUD

Responsive design voor een betere user experience 2

Welkom in het post-PC tijdperk 3

Ontwikkeling van het mobiele web 4

Andere belangrijke aspecten 4

Responsive webdesign 6

Hoe werkt het? 7

Mobile first 9

Voor- en nadelen van responsive design 10

One site fits all 10

Consistente ervaring en cross platform customer journeys 10

Intensiever ontwikkeltraject 11

Conclusie 12

Over Estate 13

2

Responsive des ign voor een betere user exper ienceNu gebruikers steeds meer het internet op gaan via een smartphone of tablet, beginnen steeds meer bedrijven en

merken na te denken over een eenduidige merkbeleving op meerdere soorten apparaten.

De oude wereld, waarbij we met een gerust hart konden aannemen dat websitebezoekers naar een scherm keken

met een minimale resolutie van 1024x768 pixels dat bediend werd met een toetsenbord en een muis, is niet meer.

In de werkelijkheid van vandaag de dag worden websites bezocht via uiteenlopende devices met verschillende

resoluties, interactiemogelijkheden en functies. Het wordt steeds lastiger om te voorspellen wat de toekomst

verder gaat brengen. Maar we kunnen met vrij grote zekerheid stellen dat het aantal verschillende soorten devices

niet minder zal worden.

Bedrijven die deze trend negeren, lopen het risico dat bij hun doelgroep het beeld ontstaat dat het merk zich

niets van haar klanten aantrekt. Het gevolg: hogere bounce rates, minder conversie, gebruikers die hun negatieve

ervaringen online delen en vervolgens snel overlopen naar de concurrent.

3

Er zijn verschillende methodes om content aan te bieden aan mobiele gebruikers, elk met zijn eigen voor- en

nadelen. Een ontwikkeling die steeds meer zijn waarde bewijst is responsive design. Is het de beste oplossing?

Dat ligt er aan. Het is vooral belangrijk om goed te luisteren naar bezoekers en klanten. Want uiteindelijk zijn

bedrijven die hun klanten een goede customer experience bieden, succesvoller op het web.

Welkom in het post-PC t i jdperk

Gartner, Google, en Forbes voorspellen dat in 2013 of 2014 de meeste mensen primair via een mobile device

online zullen gaan.

In Nederland is de marktpenetratie van smartphones

al meer dan 60%. 1 op de 3 huishoudens heeft een

tablet in huis. Ook de cijfers met betrekking tot

mobiel datagebruik laten sinds 2008 een gestaag

sterke toename zien. (Cijfers van: Marketingfacts)

Grofweg 1 op 4 bezoekers van grote e-commerce sites gebruikt al een smartphone of tablet. En met het terug-

lopen van PC verkopen, met daartegenover de explosieve groei van de mobile markt, beseffen steeds meer

mensen dat we op weg zijn naar het post-PC tijdperk.

Daarnaast zien we een opkomst van interactieve TV’s en worden de browsers op gameconsoles zoals de Xbox en

Playstation steeds beter. Maar denk ook aan nieuwe concepten als Google Glass.

Met het steeds krachtiger worden van mobile devices en de

adoptie van deze apparaten door het grote publiek, verwachten

steeds meer gebruikers dezelfde mogelijkheden die men met de

PC ook heeft. Met dit in het achterhoofd is het goed om na te

denken hoe we mobiele gebruikers op een voor hen relevante

manier bedienen.

De Wi i U webbrowser

4

Ontwikkel ing van het mobiele web

Eigenlijk bestaat het mobiele web niet, er is alleen sprake van toegang tot het web via mobile devices. De eerste

telefoons waarmee je het internet op kon, hadden primitieve browsers zonder CSS of JavaScript ondersteuning.

Net zoals bij iedere nieuwe ontwikkeling op het internet, begon men na te denken over hoe het nieuwe kanaal

ingezet kon worden.

Al snel ontstonden initiatieven zoals het .mobi

domein en de praktijk om mobiele content apart aan

te bieden via een subdomein zoals m.site.com. Of

men koos voor server-side technieken zoals browser

sniffing en device detection. Daardoor creëerde

men dubbele content, wat weer extra werk met zich

meebracht.

Sinds de komst van de eerste iPhone is het web een stuk toegankelijker geworden voor mobiele gebruikers. Voor

het eerst beschikten mensen over een mobiele webbrowser die normale webpagina’s vrij goed konden weergeven.

Snel volgden andere smartphone merken met vergelijkbare webbrowsers, maar met verschillende schermmaten

en -verhoudingen.

Niet veel later volgden weer de tablets, waardoor het steeds moeilijker en arbeidsintensiever werd om met de

hierboven genoemde technieken te achterhalen welk apparaat de bezoeker gebruikt en wat de mogelijkheden van

zijn webbrowser zijn.

Met de opkomst van moderne mobiele browsers, met dezelfde mogelijkheden als desktopbrowsers, ontstond de

wens voor een meer universele aanpak.

Andere belangri jke aspecten

Niet alleen verschillen de nieuwe soorten devices qua resolutie en mogelijkheden van de webbrowser, ook de

interactie met dit soort apparaten begint steeds meer uiteen te lopen. Touch, tap en swipe zijn inmiddels bekende

concepten, maar wat te denken van spraakbesturing of besturing met gebaren?

Nokia 9000 Communicator : een van de eerste te le foons met een webbrowser

5

Daarnaast speelt de setting waarin de klant de website bezoekt een steeds belangrijkere rol. Is de bezoeker

onderweg en gebruikt hij een smartphone? Zit hij thuis op de bank met een tablet of gebruikt hij zijn interactieve

TV met een wireless keyboard?

Dit soort scenario’s zijn van invloed op bv. de leesbaarheid. Bij mobiel gebruik buiten, zijn lichtomstandigheden

niet te voorspellen en een tabletgebruiker kijkt op een andere afstand naar een website dan iemand die via zijn

game-console het web op gaat.

Een ander belangrijk aandachtspunt is de snelheid en beschikbaarheid van de verbinding met het internet. Wat

lange tijd geen issue meer was in Nederland vanwege de hoge penetratie van kabelinternet en ADSL, is nu weer

aan de orde. Een gebruiker kan onderweg zijn en gebruik maken van een 3G netwerk met een databundel die bijna

op is. Of kijk naar het verschil tussen iemand die gebruik maakt van een drukbezet openbaar WiFi netwerk of zijn

eigen snelle WiFi thuis.

Daarom is het ook goed om na te denken hoe, waar en wanneer klanten een website gebruiken, zodat de erva-

ring is afgestemd op hun voorkeuren. Is het een site waar mensen vooral taakgericht bezig zijn, zoals het snel

opzoeken van openingstijden? Is het meer een magazine waar men graag voor gaat zitten? Hoe meer een website

aansluit bij de persoonlijke levenssfeer van de klant, hoe succesvoller. Door goed te kijken naar de bezoeker zal de

site uiteindelijk meer conversie opleveren, maar ook bijdragen aan een betere merkbeleving.

6

Responsive webdesignIn 2010 schreef Ethan Marcotte op A List Apart, een toonaangevend blog in de internetindustrie, een artikel onder

de naam “Responsive Web Design”. Daarin stelde hij een nieuwe zienswijze voor op het gebied van webdesign en

-development.

In het artikel draaide hij de praktijk van het optimaliseren voor een

specifiek device, met specifieke resolutie en met een specifieke browser,

180 graden om. In plaats daarvan stelde hij een methode voor waarbij je

juist geen aannames maakt. De layout van websites zou zich aan moeten

kunnen passen aan vrijwel ieder willekeurig apparaat. Dit is een fundamen-

tele verandering. Gingen we vroeger uit van aannames over hoe de klant

de website bezocht, tegenwoordig kan die aanname eigenlijk niet meer

gemaakt worden.

Marcotte stelt dat design voor het web afwijkt van de traditionele designdisciplines, omdat de onderliggende

technieken en mogelijkheden in een staat van constante verandering zijn. Wat twee jaar geleden nog gebruikelijk

was, is het nu niet meer. Inzichten en technieken die we vandaag inzetten, zijn morgen al waarschijnlijk weer

aangescherpt of zelfs achterhaald. Vandaar dat de behoefte ontstond voor een aanpak die dit principe omarmt.

Hoewel verandering een constante is in de internetwereld, moet responsive design niet gezien worden als een

hype. Het is een visie voor de lange termijn en een vrij grote en fundamentele omslag in hoe designers denken

over user experience. Binnen het totale spectrum aan mogelijkheden die er zijn om een consistente user expe-

rience te bereiken op meerdere devices, is responsive design een enorm sterk concept dat ondertussen breed

gedragen wordt door de community van webprofessionals.

Dat het een blijvend concept is, blijkt ook uit het feit dat browserdevelopers en W3C (de mensen die de stan-

daarden voor HTML bedenken) samenwerken aan nieuwe standaarden en technieken die verdere ontwikkeling

mogelijk maken.

Een k le ine se lect ie mobi le dev ices

7

Hoe werkt het?

Met nieuwe mogelijkheden van moderne browsers kan de layout van een webpagina worden geoptimaliseerd voor

verschillende scenario’s. Het is bijvoorbeeld mogelijk om elementen te herschikken en zich te laten aanpassen

naar een bepaalde breedte. De volgende drie elementen maken dit mogelijk:

• Media queries

• Flexible grids

• Responsive images

Media queries

Een CSS techniek waarbij men op basis van de

schermafmetingen de layout aanpast. Dit maakt het

mogelijk om een webpagina geschikt te maken voor

verschillende schermresoluties. In wezen zeg je

tegen de browser: “als ik de pagina op een smart-

phone bekijk, toon dan een eenkoloms lay-out, maar

op een tablet wil ik graag twee kolommen zien in

portrait mode en drie kolommen in landscape mode”

Maar het gaat verder. Het is bijvoorbeeld mogelijk

om elementen te tonen, te verbergen, te vervangen

of te herschikken volgens een bepaalde prioriteit.

Bijvoorbeeld: op de desktop variant toon je een

mega dropdown menu, maar op een smartphone een

eenvoudige variant, die je aanroept met een icoon.

Dat maakt het ook mogelijk om gebruik te maken van

functies van het device. Vrijwel iedere smartphone

beschikt bijvoorbeeld over GPS, wat het mogelijk

maakt om bijvoorbeeld de dichtstbijzijnde vestiging

Met media quer ies wordt de layout voor de websi te van het Zeeuws Museum geopt imal iseerd per dev ice

8

te tonen op basis van je locatiegegevens. Maar ook het vervangen van het telefoonnummer door een button

waarmee je direct kunt bellen is een eenvoudige, maar effectieve oplossing.

Flexible gr ids

Een goed design kan niet zonder een grid. En hoewel een grid normaal gesproken een gefixeerd stramien is, bij

responsive design schikt het grid zich naar de beschikbare ruimte.

Bijvoorbeeld: een Samsung Galaxy heeft een andere

resolutie dan een iPhone. Ze behoren beide tot

dezelfde categorie van small screen devices, maar

wijken onderling nog behoorlijk af. Met flexible grids

wordt het mogelijk om zo optimaal mogelijk deze

ruimte in te vullen door het grid waarop de layout is

gebaseerd te laten rekken en strekken.

Responsive images

Met responsive images bedoelen we de mogelijkheid om afbeeldingen op maat aan te bieden. Snelheid van een

website is nog altijd enorm cruciaal. En omdat je eigenlijk geen aannames kan maken over het type verbinding

waarover een mobiele gebruiker op dat moment beschikt, is het noodzakelijk dat content zo datavriendelijk

mogelijk wordt aangeboden.

Daarom bestaan er momenteel een aantal technieken (meestal gebaseerd op JavaScript) die meerdere varianten

van dezelfde afbeelding kunnen tonen voor de verschillende schermformaten. Een smartphone krijgt dan een

kleine afbeelding te zien, terwijl op een desktop pc de grote variant wordt geladen. Op dit moment werken de

browserfabrikanten en W3C hard aan een standaard hiervoor.

9

Mobile f i rs t

Een populaire methode van ontwerpen voor responsive design noemt men mobile first. Het wil niet meer zeggen

dan dat je de smartphone variant als uitgangspunt neemt. Door gebruik te maken van technieken als progressive

enhancement of gracefull degradation kun je ervoor zorgen dat een website op zoveel mogelijk devices werkt. De

site zal niet altijd dezelfde functionaliteit bieden, maar is in ieder geval bruikbaar en ziet er nog goed uit.

Mobile first dwingt je goed na te denken over wat belangrijk is voor de klant en hem te helpen met een zo

gebruiksvriendelijk mogelijke website. Met deze methode hou je rekening met de beperkte schermruimte, touch-

navigatie en langzamere dataverbindingen waarbij je betaalt voor dataverkeer.

Daarnaast kun je de ervaring van gebruikers

verrijken met de mogelijkheden die moderne smart-

phones vrijwel allemaal standaard hebben, zoals

GPS, de camera, het compas en de acceleratiemeter.

Met andere woorden, je legt een sterke focus op de

gebruikerservaring. Wat weer leidt tot een efficiënte,

compacte site die is ontdaan van allerlei zaken die

vaak alleen maar afleiden van waar het werkelijk om gaat. Een site die is ontworpen volgens het mobile first

principe, helpt de gebruiker dan ook sneller naar zijn doel en dat is beter voor conversie en de algehele beleving.

Maar mobile first is ook lastig, vanwege het feit dat je niet kan voorspellen vanuit welke context of onder welke

omstandigheden de bezoeker een website bezoekt. Is hij onderweg of zit hij thuis op de bank? Is mobiel gelijk aan

onderweg? Onderzoek toont aan dat dat niet altijd het geval is. 2/3 van mobiele aankopen wordt nl. thuis vanaf de

bank gedaan.

Responsive design is een prachtige techniek, maar vrij complex om goed te doen vanuit engagement perspec-

tief. Het gaat verder dan alleen schermafmetingen en daarom is het juist bij responsive design belangrijk om je

bezoekers en hun behoeften goed te kennen. Daarom is er bij responsive design juist behoefte aan user research

en user centered design.

10

Voor- en nadelen van responsive des ignEen website die gemaakt is volgens het responsive design principe draagt bij aan een betere user experience,

maar het biedt geen garantie. Sterker nog: responsive design is een typisch voorbeeld van easy to learn, difficult

to master. Maar de voordelen wegen over het algemeen op tegen de nadelen.

One si te f i ts al l

Omdat je uitgaat van één site voor zowel mobiele als desktopgebruikers, biedt dat een aantal grote voordelen voor

beheer en marketing van de site:

• Groter bereik met één website.

• Geen dubbele content, dus makkelijker onderhoud.

• Mobile first houdt content gefocused en daardoor makkelijker te onderhouden

• Uniforme URL structuur. Dat maakt het een stuk gebruiksvriendelijker om websites te vermelden in

marketing uitingen. Ook wanneer links gedeeld worden via social media ben je er zeker van dat mensen altijd

een goede experience krijgen.

• SEO vriendelijker dan aparte sites.

• Geen versnipperde SEA campagnes voor aparte sites.

• Geen aparte statistieken en rapportages per site.

• Geen noodzaak voor een aparte strategie voor mobiel.

• Goede ondersteuning door moderne browsers. En dat wat niet officieel wordt ondersteund, kan vaak opgelost

worden met vervangende technieken.

Dat alles maakt responsive design vooral efficiënt qua beheer en uiteindelijk kostenbesparend. Er zijn geen extra

inspanningen vereist voor een aparte mobiele strategie.

Consistente ervaring en cross plat form customer journeys

Doordat je een consistente ervaring aanbiedt voor alle soorten gebruikers, heeft dat een positieve invloed op

conversie. De hedendaagse gebruiker zal een website vaak op meerdere devices bekijken. Doordat je alle devices

11

bedient met één website zal hij makkelijk zijn weg kunnen vinden omdat hij bekend is met de structuur en inhoud

(ook al wordt die op een wat andere manier gepresenteerd).

Dat houdt in dat mensen hun customer journey kunnen voortzetten op een ander device. Dat noemen we ook wel

sequential browsing. Neem bijvoorbeeld het volgende scenario. Onderweg scant iemand met zijn smartphone

een QR code bij een advertentie. Zijn interesse is gewekt en hij slaat de site op in zijn bookmarks die worden

gesynchroniseerd met de browser op zijn tablet of desktop pc. ’s Avonds op de bank pakt hij zijn tablet en gaat

zich verder oriënteren. Hij kan dan verder gaan met de pagina waar hij was gebleven. Met een aparte website voor

smartphones zou deze ervaring onderbroken worden.

Intensiever ontwikkel t raject

Een responsive site is complexer om te ontwikkelen dan een “normale” website. Er zal extra tijd en aandacht

moeten worden besteed aan de strategie, het design en het bouwen van de site. Het ombouwen van een bestaande

site is mogelijk, maar vaak een stuk minder effectief.

Dit vergt een grotere investering dan men gewend is voor het ontwikkelen van één site. Maar als het wordt

afgewogen tegen het ontwikkelen van aparte site voor dekstop computers en daarnaast een losse mobile-only

site, dan pakt het over het algemeen voordelig uit. Zeker als je rekening houdt met de kosten voor onderhoud en

marketing van aparte sites.

Onder zoek naar gedrag b i j aankopen v ia in ternet onder Aner ikaanse consumenten. Bron; Google

12

Conclus ieResponsive design is een verzameling technieken waarmee via één website een consistente ervaring kan worden

bereikt op meerdere soorten devices. Dit biedt voordelen voor zoekmachines en links die worden gedeeld werken

altijd zoals het is bedoeld.

Responsive design maakt intelligent gebruik van bestaande technieken die door vrijwel alle moderne browsers

worden ondersteund. Daardoor is het mogelijk layouts aan te passen aan het scherm en content op maat aan te

bieden. Een responsive design toont afbeeldingen op maat, zodat er geen overhead ontstaat in dataverbruik. Dat

draagt bij aan optimale laadtijden.

Op het vlak van user experience is er geen noodzaak meer om een apart design te maken voor ieder nieuw appa-

raat, of voor iedere doelgroep. Dat houdt in dat we geen device-specifieke ervaringen tot in het oneindige moeten

blijven creëren. In de plaats daarvan ontwerpen we sites die werken op ieder apparaat.

Of iemand de website nu op een desktop pc, tablet of smartphone bekijkt, ze zijn allemaal onderdeel van dezelfde

cross platform ervaring. Misschien alleen in een andere context.

Maar responsive design is geen oplossing op zich. Onderzoek naar de ervaringen en verwachtingen van gebrui-

kers blijft enorm belangrijk om aan te sluiten bij de wensen en gebruiken van klanten. Een goede online ervaring

zorgt voor terugkerende klanten en dat is uiteindelijk goed voor conversie.

13

Over EstateEstate is een full service internetbureau dat online kennis en middelen breed inzet om de doelstellingen van haar

klanten te bereiken. Steeds op een manier die de verwachtingen overtreft.

Onze expertise

• Adviestrajecten van strategie, concept en design tot aan realisatie, beheer en onderhoud

• Sitecore CMS implementaties

• Sitefinity CMS implementaties

• Online marketing

• Social media strategie

• Social media advertising

Meer weten?

Neem gerust contact met ons op, we helpen u graag verder.

Estate Internet

Sportweg 30-32

5037AC Tilburg

www.estate.nl

info@estate.nl

013 - 535 04 35