Your SlideShare is downloading. ×
  • J'aime
Think Mobile
Prochain SlideShare
Chargement dans... 5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Think Mobile

  • 5,744 vues

Case for Responsive Webdesign: 6 key learnings.

Case for Responsive Webdesign: 6 key learnings.

Published in Affaires
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • thank you, your presentation is awsome..
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • wow.. Fantastic steps.. I really like it. keep up :-)
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • bedankt!
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
Aucun téléchargement


Total des vues
On SlideShare
À partir des ajouts
Nombre d'ajouts



Ajouts 0

No embeds

Signaler un contenu

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

    No notes for slide


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