Think Mobile
Prochain SlideShare
Loading in...5
×

Vous aimez ? Partagez donc ce contenu avec votre réseau

Partager

Think Mobile

  • 6,496 vues
Uploaded on

Case for Responsive Webdesign: 6 key learnings.

Case for Responsive Webdesign: 6 key learnings.

Plus dans : Affaires
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
No Downloads

Vues

Total des vues
6,496
Sur Slideshare
6,322
From Embeds
174
Nombre d'ajouts
21

Actions

Partages
Téléchargements
141
Commentaires
3
J'aime
21

Ajouts 174

https://twitter.com 40
http://wannes.iben.ch 38
http://chamci.wordpress.com 22
http://localhost 15
http://www.twylah.com 11
http://franckvalverde.wordpress.com 9
http://www.onlydoo.com 8
http://light.mindtalk.com 6
http://tehnicimediatice.wordpress.com 4
http://www.mindtalk.com 4
http://tecnologiadoctorm.ning.com 2
http://www.facebook.com 2
https://si0.twimg.com 2
http://www.linkedin.com 2
http://fr.slideshare.net 2
https://www.facebook.com 2
http://efaz.com.br 1
http://xgportal.imcplus.net 1
http://musikagintza.blogspot.com.es 1
http://twitter.com 1
https://www.linkedin.com 1

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.

Annuler
    No notes for slide

Transcript

  • 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. http://slideshare.net/netlash
  • 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 learningswww.rockwerkchter.be
  • 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. bart@wijs.be@netlashwww.wijs.be
  • 37. Wijs bvbaVoorhavenlaan 31/39000 GENT09 335 22 8009 330 09 83http://wijs.beinfo@wijs.beBE 0473.071.275