Think Mobile
Good afternoon.My name is Bart.
This is my daughterMerel (I have 3 kids).
I’m passionateabout coffee.
I live and work                       in Ghent.I’m passionate about
I work at digital agency Wijs (ex Netlash-bSeen).
We will make you awesome in digital.We deliver strategy, execution and tools to helpyou score in digital.
Process
You can find me onTwitter: @netlash
http://slideshare.net/netlash
iabThinkMobile27/11/2012
First...responsive design?
OMG!We’re stillarguingabout this?
Why responsive design?‣   one back-end to update‣   one development cost (higher?)‣   future ready (throw them devices at ...
Why not?‣   daily appliciation‣   device capabilities‣   performance
We’re still learning.
6 key learningswww.rockwerkchter.be
1. Think content first
1. Think content first‣   photos of bands and artists are central‣   we started with 1500px‣   design is based on aspect ra...
content>design>technology
2. Think design first
2. Think design first‣   breakpoints are essential‣   you can’t build for all current and future devices‣   test if design ...
Breakpoints‣   5 breakpoints: 480px, 600px, 770px, 980px, 1200px‣   480px, 770px, 980px: current popular devices‣   600px,...
design testing>device testing
3. Think mobile first
3. Think mobile first‣   start with touch‣   navigation and interaction is designed for touch first‣   information architect...
4. Think conversion first
4. Think conversion first‣   bottom line: sell tickets...‣   typography is responsive: font size changes with screen size‣ ...
5. Think retina first
5. Think retina first‣   build HD-ready (retina)‣   all logos and icons are vector based‣   scales beautifully on all resol...
6. Think back-end first
6. Think back-end first‣   responsive images: different image size vs. screen size‣   back-end: one interface‣   images are ...
6 key learnings1. Think content first2. Think design first3. Think mobile first4. Think conversion first5. Think retina first6....
Good luck!
Conversation
bart@wijs.be@netlashwww.wijs.be
Wijs bvbaVoorhavenlaan 31/39000 GENT09 335 22 8009 330 09 83http://wijs.beinfo@wijs.beBE 0473.071.275
Think Mobile
Think Mobile
Think Mobile
Think Mobile
Think Mobile
Think Mobile
Prochain SlideShare
Chargement dans... 5
×

Think Mobile

5,885

Published on

Case for Responsive Webdesign: 6 key learnings.

Published in: Affaires
3 commentaires
21 mentions J'aime
Statistiques
Remarques
Aucun téléchargement
Vues
Total des vues
5,885
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
3
Actions
Partages
0
Téléchargements
142
Commentaires
3
J'aime
21
Ajouts 0
No embeds

No notes for slide

Think Mobile

  1. 1. Think Mobile
  2. 2. Good afternoon.My name is Bart.
  3. 3. This is my daughterMerel (I have 3 kids).
  4. 4. I’m passionateabout coffee.
  5. 5. I live and work in Ghent.I’m passionate about
  6. 6. I work at digital agency Wijs (ex Netlash-bSeen).
  7. 7. We will make you awesome in digital.We deliver strategy, execution and tools to helpyou score in digital.
  8. 8. Process
  9. 9. You can find me onTwitter: @netlash
  10. 10. http://slideshare.net/netlash
  11. 11. iabThinkMobile27/11/2012
  12. 12. First...responsive design?
  13. 13. OMG!We’re stillarguingabout this?
  14. 14. Why responsive design?‣ one back-end to update‣ one development cost (higher?)‣ future ready (throw them devices at me!)‣ browser-based (serendipity)‣ no install‣ coolness...
  15. 15. Why not?‣ daily appliciation‣ device capabilities‣ performance
  16. 16. We’re still learning.
  17. 17. 6 key learningswww.rockwerkchter.be
  18. 18. 1. Think content first
  19. 19. 1. Think content first‣ 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
  20. 20. content>design>technology
  21. 21. 2. Think design first
  22. 22. 2. Think design first‣ breakpoints are essential‣ you can’t build for all current and future devices‣ test if design works, not if devices work
  23. 23. Breakpoints‣ 5 breakpoints: 480px, 600px, 770px, 980px, 1200px‣ 480px, 770px, 980px: current popular devices‣ 600px, 1200px: make it future proof
  24. 24. design testing>device testing
  25. 25. 3. Think mobile first
  26. 26. 3. Think mobile first‣ 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
  27. 27. 4. Think conversion first
  28. 28. 4. Think conversion first‣ bottom line: sell tickets...‣ typography is responsive: font size changes with screen size‣ ‘buy tickets’ button stays big
  29. 29. 5. Think retina first
  30. 30. 5. Think retina first‣ build HD-ready (retina)‣ all logos and icons are vector based‣ scales beautifully on all resolutions
  31. 31. 6. Think back-end first
  32. 32. 6. Think back-end first‣ responsive images: different image size vs. screen size‣ back-end: one interface‣ images are scaled automatically
  33. 33. 6 key learnings1. Think content first2. Think design first3. Think mobile first4. Think conversion first5. Think retina first6. Think back-end first
  34. 34. Good luck!
  35. 35. Conversation
  36. 36. bart@wijs.be@netlashwww.wijs.be
  37. 37. Wijs bvbaVoorhavenlaan 31/39000 GENT09 335 22 8009 330 09 83http://wijs.beinfo@wijs.beBE 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.

×