responsive design: content is presented optimally and device specific. Is your screen small? Then a wide main menu from left to right will be useless. A so called 'Hamburger menu' (not related to cows in any manner) will be helpful.

1. MOBILE
Responsive design:
een betere user experience
Hoe responsive design bijdraagt aan een consistente ervaring
die onafhankelijk is van devices

2. I NHOU D
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
Conclusie12
Over Estate
1
13

3. R esp o n s i v e d e s i gn voor een betere use r
e xp eri e n c e
Nu 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.
2

4. 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.
We l k o m i n h et post-P C tijdperk
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 teruglopen 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 Wii U webbrows e r
3

5. O n t w i k k e l i n g van het mobiele w eb
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
N o ki a 9 0 0 0 C o m m u n i cat o r : een van d e eer st e t el ef o o n s met
een w eb b r o w ser
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.
An d e r e b e l a ngrijke 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?
4

6. 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 ervaring 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.
5

7. R esp o n s i v e we b desi gn
In 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 fundamentele verandering. Gingen we vroeger uit van aannames over hoe de klant
de website bezocht, tegenwoordig kan die aanname eigenlijk niet meer
E en kl ei n e sel ect i e m o b i l e d evi ces
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 experience 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 standaarden voor HTML bedenken) samenwerken aan nieuwe standaarden en technieken die verdere ontwikkeling
mogelijk maken.
6

8. H o e w e r k t h et?
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 smartphone 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
7
M et m ed i a q u er i es w o r d t d e l ayo u t vo o r d e w eb si t e van het
Z eeu w s M u seu m g eo p t i m al i seer d p er d evi ce

9. 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 grids
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.
8

10. Mobile first
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, touchnavigatie en langzamere dataverbindingen waarbij je betaalt voor dataverkeer.
Daarnaast kun je de ervaring van gebruikers
verrijken met de mogelijkheden die moderne smartphones 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 perspectief. 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.
9

11. Voo r- e n n a d e l e n van responsi ve desi g n
Een 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.
O n e s i t e f i t s all
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­ itingen. Ook wanneer links gedeeld worden via social media ben je er zeker van dat mensen altijd
u
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.
Co n s i s t e n t e er varing en cross pla tfor m c us tomer jour ney s
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
10

12. 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.
Onder z oek naar ge d r a g b ij a a n k o p e n v ia in t e r n e t o n d er A n er i kaan se co n su m en t en . B r o n ; G o o g l e
I n t e n s i e v e r ontw ikkeltraject
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.
11

13. C o n clu s i e
Responsive 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 apparaat, 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 gebruikers 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.
12

14. O ver E s t a t e
Estate 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
M e e r w e t e n?
Neem gerust contact met ons op, we helpen u graag verder.
 www.estate.nl
 Estate Internet
 info@estate.nl
Sportweg 30-32
 013 - 535 04 35
5037AC Tilburg
13