Think Mobile - Financelab

  • 633 views
Uploaded on

Onze eigenste Bart De Waele sprak op het #Financelab te Leuven. …

Onze eigenste Bart De Waele sprak op het #Financelab te Leuven.

Hoeveel Belgen zijn mobile anno 2013, wie zijn ze en wat doen ze? En welke 6 learnings leerden we van een succesvol responsive design project.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
633
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Think Mobile
  • 2. Good afternoon. My name is Bart.
  • 3. This is my daughter Merel (I have 3 kids).
  • 4. I’m passionate about coffee.
  • 5. I’m passionate I live and work in Ghent.
  • 6. I work at digital agency Wijs.
  • 7. You can find me on Twitter: @netlash
  • 8. http://slideshare.net/netlash
  • 9. Think Mobile 24/9/2013
  • 10. 34% Belgen gebruiken smartphones Source: Ipsos, 2013
  • 11. Bij -40jarigen ligt het aandeel veel hoger Source: Ipsos, 2013
  • 12. Bij -40jarige Nederlanders ligt het aandeel op 81% Source: Consumer Barometer
  • 13. Demografische gegevens Source: Our Mobile planet: Belgium
  • 14. Source: Think Finance with Google, April 2011
  • 15. Source: Think Finance with Google, April 2011
  • 16. Source: Think Finance with Google, April 2011
  • 17. A Wijs-example: paths to conversion
  • 18. First... responsive design?
  • 19. OMG! We’re still arguing about this?
  • 20. ‣ one back-end to update ‣ one development cost (higher?) ‣ future ready (throw them devices at me!) ‣ browser-based (serendipity) ‣ no install ‣ SEO! E-mail! Social! ‣ coolness... Why responsive design?
  • 21. ‣ daily appliciation ‣ device capabilities ‣ performance Why not?
  • 22. We’re still learning.
  • 23. 6 key learnings www.rockwerkchter.be www.deltalloydbank.be
  • 24. 1. Think content first
  • 25. ‣ photos of bands and artists are central ‣ we started with 1500px ‣ design is based on aspect ratio of photos ‣ content boxes are responsive in width and height 1. Think content first
  • 26. content > design > technology
  • 27. ‣ navigation: not the usual hierarchy ‣ fly-outs, hover: big no no! ‣ contextual navigation ‣ starts from content 1. Think content first
  • 28. 2. Think design first
  • 29. ‣ breakpoints are essential ‣ you can’t build for all current and future devices ‣ test if design works, not if devices work 2. Think design first
  • 30. ‣ 5 breakpoints: 480px, 600px, 770px, 980px, 1200px ‣ 480px, 770px, 980px: current popular devices ‣ 600px, 1200px: make it future proof Breakpoints
  • 31. ‣ if possible: move away from rough breakpoints ‣ gradual shifts ‣ make it future proof Breakpoints
  • 32. design testing > device testing
  • 33. 3. Think mobile first
  • 34. ‣ start with touch ‣ navigation and interaction is designed for touch first ‣ information architecture is designed for mobile first ‣ build up to tablet and to desktop ‣ big typography and buttons, made for thumbs 3. Think mobile first
  • 35. ‣ avoid typing where possible ‣ think touch first 3. Think mobile first
  • 36. 4. Think conversion first
  • 37. ‣ bottom line: sell tickets... ‣ typography is responsive: font size changes with screen size ‣ ‘buy tickets’ button stays big 4. Think conversion first
  • 38. ‣ think thumbs ‣ what is the natural stance of your hands on smartphone/tablets? 4. Think conversion first
  • 39. 5. Think retina first
  • 40. ‣ build HD-ready (retina) ‣ all logos and icons are vector based ‣ scales beautifully on all resolutions 5. Think retina first
  • 41. 6. Think back-end first
  • 42. ‣ responsive images: different image size vs. screen size ‣ back-end: one interface ‣ images are scaled automatically 6. Think back-end first
  • 43. 1. Think content first 2. Think design first 3. Think mobile first 4. Think conversion first 5. Think retina first 6. Think back-end first 6 key learnings
  • 44. Good luck!
  • 45. Conversation
  • 46. bart@wijs.be @netlash www.wijs.be
  • 47. Wijs bvba Voorhavenlaan 31/3 9000 GENT 09 335 22 80 09 330 09 83 http://wijs.be info@wijs.be BE 0473.071.275