Think Mobile
Upcoming SlideShare
Loading in...5

Think Mobile


  • 6,339 vues

Case for Responsive Webdesign: 6 key learnings.

Case for Responsive Webdesign: 6 key learnings.



Total des vues
Vues sur SlideShare
Vues externes



21 Ajouts 172 38 38 22
http://localhost 15 11 9 8 6 4 4 2 2 2 2 2 2 1 1 1 1 1



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Votre message apparaîtra ici
Poster un commentaire
Modifier votre commentaire

Think Mobile Think Mobile Presentation Transcript

  • 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
  • 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 me!)‣ browser-based (serendipity)‣ no install‣ coolness...
  • Why not?‣ daily appliciation‣ device capabilities‣ performance
  • We’re still learning.
  • 6 key
  • 1. Think content first
  • 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
  • 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 works, not if devices work
  • Breakpoints‣ 5 breakpoints: 480px, 600px, 770px, 980px, 1200px‣ 480px, 770px, 980px: current popular devices‣ 600px, 1200px: make it future proof
  • design testing>device testing
  • 3. Think mobile first
  • 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
  • 4. Think conversion first
  • 4. Think conversion first‣ bottom line: sell tickets...‣ typography is responsive: font size changes with screen size‣ ‘buy tickets’ button stays big
  • 5. Think retina first
  • 5. Think retina first‣ build HD-ready (retina)‣ all logos and icons are vector based‣ scales beautifully on all resolutions
  • 6. Think back-end first
  • 6. Think back-end first‣ responsive images: different image size vs. screen size‣ back-end: one interface‣ images are scaled automatically
  • 6 key learnings1. Think content first2. Think design first3. Think mobile first4. Think conversion first5. Think retina first6. Think back-end first
  • Good luck!
  • Conversation
  • Wijs bvbaVoorhavenlaan 31/39000 GENT09 335 22 8009 330 09 83http://wijs.beinfo@wijs.beBE 0473.071.275