0
Think Mobile
Good afternoon.
My name is Bart.
This is my daughter
Merel (I have 3 kids).
I’m passionate
about coffee.
I’m passionate
I live and work
in Ghent.
I work at digital agency Wijs.
You can find me on
Twitter: @netlash
http://slideshare.net/netlash
Think Mobile
24/9/2013
34% Belgen gebruiken smartphones
Source: Ipsos, 2013
Bij -40jarigen ligt het aandeel veel hoger
Source: Ipsos, 2013
Bij -40jarige Nederlanders ligt het aandeel op 81%
Source: Consumer Barometer
Demografische gegevens
Source: Our Mobile planet: Belgium
Source: Think Finance with Google, April 2011
Source: Think Finance with Google, April 2011
Source: Think Finance with Google, April 2011
A Wijs-example: paths to conversion
First...
responsive design?
OMG!
We’re still
arguing
about this?
‣ one back-end to update
‣ one development cost (higher?)
‣ future ready (throw them devices at me!)
‣ browser-based (sere...
‣ daily appliciation
‣ device capabilities
‣ performance
Why not?
We’re still learning.
6 key learnings
www.rockwerkchter.be
www.deltalloydbank.be
1. Think content first
‣ photos of bands and artists are central
‣ we started with 1500px
‣ design is based on aspect ratio of photos
‣ content b...
content
>
design
>
technology
‣ navigation: not the usual hierarchy
‣ fly-outs, hover: big no no!
‣ contextual navigation
‣ starts from content
1. Think ...
2. Think design first
‣ breakpoints are essential
‣ you can’t build for all current and future devices
‣ test if design works, not if devices wo...
‣ 5 breakpoints: 480px, 600px, 770px, 980px, 1200px
‣ 480px, 770px, 980px: current popular devices
‣ 600px, 1200px: make i...
‣ if possible: move away from rough breakpoints
‣ gradual shifts
‣ make it future proof
Breakpoints
design testing
>
device testing
3. Think mobile first
‣ start with touch
‣ navigation and interaction is designed for touch first
‣ information architecture is designed for mobi...
‣ avoid typing where possible
‣ think touch first
3. Think mobile first
4. Think conversion first
‣ bottom line: sell tickets...
‣ typography is responsive: font size changes with screen size
‣ ‘buy tickets’ button stays...
‣ think thumbs
‣ what is the natural stance of your hands on smartphone/tablets?
4. Think conversion first
5. Think retina first
‣ build HD-ready (retina)
‣ all logos and icons are vector based
‣ scales beautifully on all resolutions
5. Think retina fi...
6. Think back-end first
‣ responsive images: different image size vs. screen size
‣ back-end: one interface
‣ images are scaled automatically
6. Th...
1. Think content first
2. Think design first
3. Think mobile first
4. Think conversion first
5. Think retina first
6. Think bac...
Good luck!
Conversation
bart@wijs.be
@netlash
www.wijs.be
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
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Think Mobile - Financelab
Upcoming SlideShare
Loading in...5
×

Think Mobile - Financelab

756

Published on

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.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
756
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Think Mobile - Financelab"

  1. 1. Think Mobile
  2. 2. Good afternoon. My name is Bart.
  3. 3. This is my daughter Merel (I have 3 kids).
  4. 4. I’m passionate about coffee.
  5. 5. I’m passionate I live and work in Ghent.
  6. 6. I work at digital agency Wijs.
  7. 7. You can find me on Twitter: @netlash
  8. 8. http://slideshare.net/netlash
  9. 9. Think Mobile 24/9/2013
  10. 10. 34% Belgen gebruiken smartphones Source: Ipsos, 2013
  11. 11. Bij -40jarigen ligt het aandeel veel hoger Source: Ipsos, 2013
  12. 12. Bij -40jarige Nederlanders ligt het aandeel op 81% Source: Consumer Barometer
  13. 13. Demografische gegevens Source: Our Mobile planet: Belgium
  14. 14. Source: Think Finance with Google, April 2011
  15. 15. Source: Think Finance with Google, April 2011
  16. 16. Source: Think Finance with Google, April 2011
  17. 17. A Wijs-example: paths to conversion
  18. 18. First... responsive design?
  19. 19. OMG! We’re still arguing about this?
  20. 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. 21. ‣ daily appliciation ‣ device capabilities ‣ performance Why not?
  22. 22. We’re still learning.
  23. 23. 6 key learnings www.rockwerkchter.be www.deltalloydbank.be
  24. 24. 1. Think content first
  25. 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. 26. content > design > technology
  27. 27. ‣ navigation: not the usual hierarchy ‣ fly-outs, hover: big no no! ‣ contextual navigation ‣ starts from content 1. Think content first
  28. 28. 2. Think design first
  29. 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. 30. ‣ 5 breakpoints: 480px, 600px, 770px, 980px, 1200px ‣ 480px, 770px, 980px: current popular devices ‣ 600px, 1200px: make it future proof Breakpoints
  31. 31. ‣ if possible: move away from rough breakpoints ‣ gradual shifts ‣ make it future proof Breakpoints
  32. 32. design testing > device testing
  33. 33. 3. Think mobile first
  34. 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. 35. ‣ avoid typing where possible ‣ think touch first 3. Think mobile first
  36. 36. 4. Think conversion first
  37. 37. ‣ bottom line: sell tickets... ‣ typography is responsive: font size changes with screen size ‣ ‘buy tickets’ button stays big 4. Think conversion first
  38. 38. ‣ think thumbs ‣ what is the natural stance of your hands on smartphone/tablets? 4. Think conversion first
  39. 39. 5. Think retina first
  40. 40. ‣ build HD-ready (retina) ‣ all logos and icons are vector based ‣ scales beautifully on all resolutions 5. Think retina first
  41. 41. 6. Think back-end first
  42. 42. ‣ responsive images: different image size vs. screen size ‣ back-end: one interface ‣ images are scaled automatically 6. Think back-end first
  43. 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. 44. Good luck!
  45. 45. Conversation
  46. 46. bart@wijs.be @netlash www.wijs.be
  47. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×