Nu mobiel de wereld veroverd heeft, is het belangrijk dat je je boodschap of dienst op zo veel mogelijk schermen goed voor het voetlicht kan brengen. Hans-Peter Harmsen legt uit, en geeft aan wanneer je beter een (responsive) website kunt inzetten en wanneer beter een app. Bovendien laat hij case cijfers zien waaruit blijkt hoeveel 'responsive' uitmaakt.

1. Alles over Responsive design
MARCOM Mobile Dome, 12 en 13 juni 2013
Hans-Peter Harmsen, Oberon Interactive
hph@oberon.nl

2. Over Oberon
Online bureau, al 20 jaar
Apps
Responsive design

3. “Facebook heeft meer mobiele
gebruikers
dan desktop gebruikers.”
Dutch Cowboys

4. “Aan het eind van 2013 zijn er meer
mobiele apparaten dan mensen.”
Mashable.com

5. Website
01
Je website is basis van je online communicatie
Daar omheen: e-mailmarketing, SEO,
advertising, social media, apps etc.

6. Maar werkt ie op mobiel?

7. Voorbeeld van een mooie
mobiele website.
Alles wat je nodig hebt, is
meteen te vinden.

8. Echter dit gaat mis bij allerlei
tussenmaten van schermen.
Op een mobiel apparaat met een
groot scherm ziet het er zo uit.

9. Responsive
design
02
Daarom: responsive design

10. Een manier van website-bouw die er op
gericht is om de website optimaal te tonen
op een grote verscheidenheid aan
schermen.
Responsive design

11. Voorbeeld. Drie keer dezelfde
website met dezelfde informatie
maar 3x anders ge-layout.

13. Hoe werkt het?
Op basis van ‘device capabilities’: schermresolutie van je
device
Breakpoints: de breedtes waarop het design verandert
Fixed vs. Fluid grid

14. Voorbeeld van fixed grid: kolommen hebben een vaste breedte. Bij een kleiner scherm worden het er alleen minder.

15. Voorbeeld van fluid grid: kolommenworden zelf ook breder als dit kan. Hierdoor vul je altijd het gehele scherm.

16. Meer in detail: afbeeldingen
Vergroten/verkleinen
Afknippen
Schuiven of slideshow
Een goede front-end designer past
diverse technieken toe om een zo
goed mogelijk resultaat te krijgen.

17. Waar je rekening mee moet
houden
Ontwerp voor voorkomende schermformaten
Ontwerp voor touchscreen. Let op: geen mouse-over.
Ontwerp voor retina-schermen (dubbele
schermresolutie)
Gebruikerswensen kunnen verschillen per device

18. Adaptive design
Adaptive design heeft altijd een fixed grid.
Als de website zich aanpast aan device mogelijkheden is het
‘adaptive’.
Adaptive design is het weglaten van informatie op kleinere
schermen.
Bij adaptive design bepaalt de server ipv de browser hoe de
opmaak is.
Adaptive design is een
term die je ook veel hoort.
Hier is echter geen een-
duidige definitie van.
Hiernaast staan een paar
gangbare definities.
Wij bij Oberon gebruiken
hierom alleen de term
‘responsive design’.

19. Mobiele vs. responsive
website
Voor- en nadelen
03

20. Voordelen van een aparte mobiele
website
Goedkoper om te maken
Makkelijk naast bestaande website
Meer gespecialiseerd

21. Mooi voorbeeld: m.schiphol.nl.
Deze website toont op een mobiel
apparaat direct de informatie de
je waarschijnlijk het liefst wilt
weten namelijk: vluchttijden.

22. Voordelen van een responsive
website
Flexibele oplossing
Beter voor search engines
Beter te delen
Goedkoper in onderhoud (één CMS)
Altijd een perfecte fit
Beter om te delen: iedere pagina
heeft maar één url. Die kan je
delen in nieuwsbrieven of op
social media.
Als je een aparte mobiele website
hebt, is het niet duidelijk of je nou
de link naar de grote site moet
delen of die naar de mobiele site.
Je weet tenslotte niet met welk
device je bezoeker de link gaat
openen.

23. Wat zegt Google?
“Google recommends webmasters follow the industry
best practice of using responsive web design, namely
serving the same HTML for all devices and using only CSS
media queries to decide the rendering on each device”
Oftewel: Google zegt dat je moet
doen wat het beste is en het
mooiste is voor je bezoekers. In dit
geval is dat: één website.
Is ook logisch. Met één website
verdeel je je ‘Google juice’ niet
over twee delen.

24. Resultaten
04

25. 30% meer organisch bezoek
Pagina’s laden 20% sneller
Mobiel verkeer van 21% naar 34% van het totaal
Dit alles binnen één maand na launch
Behaalde resultaten
We hebben hierbij puur de
voorkant van de website
aangepast. Het CMS en de
content zijn hetzelfde gebleven.

26. 40%meer organisch bezoek
Behaalde resultaten
Nu, een maand later, is het zelfs nog meer omhoog

27. Hoe verhoudt dit zich
tot apps?
05
Veel organisaties investeren liever in een app dan in een
mobiele of responsive website. Daar kunnen heel goede
redenen voor zijn.

28. Android en iOS
Even een slide
tussendoor.
Marktaandelen van het
web-bezoek van de
diverse mobiele
platformen in Nederland
het afgelopen jaar.
Android en iOS
domineren de markt.

29. App vs. web
05Voor- een nadelen van beide

30. Web 1: Vindbaarheid
Websites vind je op Google
Van websites kan je de link delen

31. Web 2: Ontwikkelkosten
Apps zijn duurder
Denk ook aan onderhoudskosten

32. App 1. Usability
Apps werken lekkerder
Apps werken sneller

33. App 2. Connectivity
Camera, microfoon, bewegingssensor
Blue tooth, NFC
Adresboek en agenda

34. App 3. Offline
Apps werken veel beter offline

35. App 4. Push berichten
Onmogelijk op een website
Tenzij je met SMS uit de voeten kan

36. App 5. Sales
App stores hebben het sales systeem
helemaal voor je ingericht
Maar vragen wel een dikke marge…

37. Conclusies
06

38. “Je mobiele strategie begint met je
website”

39. “Die moet perfect werken op elk device”

40. “Responsive design is daar de oplossing
voor”

41. “Een app kun je toevoegen
voor
een specifieke dienst”

42. “Een app is voor dagelijks gebruik”

43. “Website om klanten te vinden,
een app om klanten te binden”

44. Hans-Peter Harmsen
Oberon Interactive
www.oberon.nl / hph@oberon.nl
020 – 344 9480