Think Mobile
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Think Mobile

le

  • 6,448 vues

Case for Responsive Webdesign: 6 key learnings.

Case for Responsive Webdesign: 6 key learnings.

Statistiques

Vues

Total des vues
6,448
Vues sur SlideShare
6,274
Vues externes
174

Actions

J'aime
21
Téléchargements
140
Commentaires
3

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
Plus...

Accessibilité

Catégories

Détails de l'import

Uploaded via as Adobe PDF

Droits d'utilisation

© Tous droits réservés

Report content

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
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire

Think Mobile Presentation 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