Oberon: Alles over Responsive design marcom13

425 views

Published on

  • Be the first to comment

  • Be the first to like this

Oberon: Alles over Responsive design marcom13

  1. 1. Alles over Responsive designMARCOM Mobile Dome, 12 en 13 juni 2013Hans-Peter Harmsen, Oberon Interactivehph@oberon.nl
  2. 2. Over OberonOnline bureau, al 20 jaarAppsResponsive design
  3. 3. “Facebook heeft meer mobielegebruikersdan desktop gebruikers.”Dutch Cowboys
  4. 4. “Aan het eind van 2013 zijn er meermobiele apparaten dan mensen.”Mashable.com
  5. 5. Website01Je website is basis van je online communicatieDaar omheen: e-mailmarketing, SEO,advertising, social media, apps etc.
  6. 6. Maar werkt ie op mobiel?
  7. 7. Voorbeeld van een mooiemobiele website.Alles wat je nodig hebt, ismeteen te vinden.
  8. 8. Echter dit gaat mis bij allerleitussenmaten van schermen.Op een mobiel apparaat met eengroot scherm ziet het er zo uit.
  9. 9. Responsivedesign02Daarom: responsive design
  10. 10. Een manier van website-bouw die er opgericht is om de website optimaal te tonenop een grote verscheidenheid aanschermen.Responsive design
  11. 11. Voorbeeld. Drie keer dezelfdewebsite met dezelfde informatiemaar 3x anders ge-layout.
  12. 12. Hoe werkt het?Op basis van ‘device capabilities’: schermresolutie van jedeviceBreakpoints: de breedtes waarop het design verandertFixed vs. Fluid grid
  13. 13. Voorbeeld van fixed grid: kolommen hebben een vaste breedte. Bij een kleiner scherm worden het er alleen minder.
  14. 14. Voorbeeld van fluid grid: kolommenworden zelf ook breder als dit kan. Hierdoor vul je altijd het gehele scherm.
  15. 15. Meer in detail: afbeeldingenVergroten/verkleinenAfknippenSchuiven of slideshowEen goede front-end designer pastdiverse technieken toe om een zogoed mogelijk resultaat te krijgen.
  16. 16. Waar je rekening mee moethoudenOntwerp voor voorkomende schermformatenOntwerp voor touchscreen. Let op: geen mouse-over.Ontwerp voor retina-schermen (dubbeleschermresolutie)Gebruikerswensen kunnen verschillen per device
  17. 17. Adaptive designAdaptive 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 kleinereschermen.Bij adaptive design bepaalt de server ipv de browser hoe deopmaak is.Adaptive design is eenterm die je ook veel hoort.Hier is echter geen een-duidige definitie van.Hiernaast staan een paargangbare definities.Wij bij Oberon gebruikenhierom alleen de term‘responsive design’.
  18. 18. Mobiele vs. responsivewebsiteVoor- en nadelen03
  19. 19. Voordelen van een aparte mobielewebsiteGoedkoper om te makenMakkelijk naast bestaande websiteMeer gespecialiseerd
  20. 20. Mooi voorbeeld: m.schiphol.nl.Deze website toont op een mobielapparaat direct de informatie deje waarschijnlijk het liefst wiltweten namelijk: vluchttijden.
  21. 21. Voordelen van een responsivewebsiteFlexibele oplossingBeter voor search enginesBeter te delenGoedkoper in onderhoud (één CMS)Altijd een perfecte fitBeter om te delen: iedere paginaheeft maar één url. Die kan jedelen in nieuwsbrieven of opsocial media.Als je een aparte mobiele websitehebt, is het niet duidelijk of je noude link naar de grote site moetdelen of die naar de mobiele site.Je weet tenslotte niet met welkdevice je bezoeker de link gaatopenen.
  22. 22. Wat zegt Google?“Google recommends webmasters follow the industrybest practice of using responsive web design, namelyserving the same HTML for all devices and using only CSSmedia queries to decide the rendering on each device”Oftewel: Google zegt dat je moetdoen wat het beste is en hetmooiste is voor je bezoekers. In ditgeval is dat: één website.Is ook logisch. Met één websiteverdeel je je ‘Google juice’ nietover twee delen.
  23. 23. Resultaten04
  24. 24. 30% meer organisch bezoekPagina’s laden 20% snellerMobiel verkeer van 21% naar 34% van het totaalDit alles binnen één maand na launchBehaalde resultatenWe hebben hierbij puur devoorkant van de websiteaangepast. Het CMS en decontent zijn hetzelfde gebleven.
  25. 25. 40%meer organisch bezoekBehaalde resultatenNu, een maand later, is het zelfs nog meer omhoog
  26. 26. Hoe verhoudt dit zichtot apps?05Veel oranisaties investeren liever in een app dan in een mobieleof responsive website. Daar kunnen heel goede redenen voorzijn.
  27. 27. Android en iOSEven een slidetussendoor.Marktaandelen van hetweb-bezoek van dediverse mobieleplatformen in Nederlandhet afgelopen jaar.Android en iOSdomineren de markt.
  28. 28. App vs. web05Voor- een nadelen van beide
  29. 29. Web 1: VindbaarheidWebsites vind je op GoogleVan websites kan je de link delen
  30. 30. Web 2: OntwikkelkostenApps zijn duurderDenk ook aan onderhoudskosten
  31. 31. App 1. UsabilityApps werken lekkerderApps werken sneller
  32. 32. App 2. ConnectivityCamera, microfoon, bewegingssensorBlue tooth, NFCAdresboek en agenda
  33. 33. App 3. OfflineApps werken veel beter offline
  34. 34. App 4. Push berichtenOnmogelijk op een websiteTenzij je met SMS uit de voeten kan
  35. 35. App 5. SalesApp stores hebben het sales systeemhelemaal voor je ingerichtMaar vragen wel een dikke marge…
  36. 36. Conclusies06
  37. 37. “Je mobiele strategie begint met jewebsite”
  38. 38. “Die moet perfect werken op elk device”
  39. 39. “Responsive design is daar de oplossingvoor”
  40. 40. “Een app kun je toevoegenvooreen specifieke dienst”
  41. 41. “Een app is voor dagelijks gebruik”
  42. 42. “Website om klanten te vinden,een app om klanten te binden”
  43. 43. Hans-Peter HarmsenOberon Interactivewww.oberon.nl / hph@oberon.nl020 – 344 9480

×