responsive webdesign - uxtour microsoft

Download Responsive Webdesign - UXtour Microsoft

Post on 22-Apr-2015




0 download

Embed Size (px)


I presentation I did for the Microsoft UXtour together with 2 colleagues (Bram Vanderhaeghe and Simon Coudeville)


  • 1. RESPONSIVEWEB DESIGNNovember 3, 2011 Microsoft Web & Phone UX Tour Belgium
  • 2. Bram Simon Thomas @bram_ @scoudeville @decthomasInformation architect Web designer Front-end developer
  • 3. You may remember us from such clients as:
  • 4.
  • 5. 1. Why you should use responsive design2. Design responsive design3. Technical challenges
  • 6. Why responsive design?1. How not to approach mobile web2. Why responsive design is key3. Think mobile rst4. It starts with IA
  • 7. No stats and numbers.Youre here so you knowmobile is big.
  • 9. Imagine:a mobile operator in 2006
  • 10. We need a mobile website! Mark Obistar CEO at random mobile operator
  • 11. m.*mobile.*Go to full website
  • 12. A separate mobile website (1) What about tablet pcs? What about new devices with unknown display sizes?
  • 13. Raise your hand if you never usedyour smartphone laying in bed.
  • 14. A separate mobile website (2) Mobile users users on the road You probably need all your content
  • 15. How should I congure my phoneto use mobile internet?
  • 16.
  • 17.
  • 18.
  • 19.
  • 20. A separate mobile website (3) Youll have to manage all your content twice
  • 21. A separate mobile website (4) Users share links. Different users use different devices.
  • 22. A separate mobile website(conclusion) Only optimized for small screens Need to provide all content content has to be managed twice Issues when sharing content Pretty expensive for an unsatisfying result
  • 23. Imagine:a newspaper company in 2010
  • 24. We need an app! P. Vandermeersch CEO at a random newspaper company
  • 25. FA I L
  • 26. Native apps (1)Cfr. separate mobile website: What about tablet pcs? Mobile users users on the road Youll have to manage all your content twice
  • 27. Native apps (2) Which platforms will you support? (iOS, Android, WindowsPhone) Each update: - cost per platform - might take time (approval)
  • 28. Native apps (3) Store owners take a cut on in-app purchases
  • 29. Native apps (4) What about search engines? Your content wont be indexed by them
  • 30. Native apps (5) links to websites open in a new app (!) no native browser functions (bookmarking!) non selectable text (no copy-paste) Apps often have their own interface language
  • 31. Remind you to something? issues with links to other websites no native browser functions like bookmarking non selectable text (no copy-paste) each interface is different
  • 32. Please.Lets not go there again.
  • 33. (of course native apps canbe the best answer) If you need hardware functions that browsers dont yet support (camera, compass, gyroscope, gpu power, ...).
  • 34. Native apps (conclusion) Different platforms to support Cut on in-app-purchases Content has to be managed twice and wont be indexed by search engines Risk on usability issues Only if you need specic hardware functions
  • 35. In a lot of cases, neither separatemobile websites nor native appsprovide an effective answer ontodays needs.
  • 37. Responsive web design: One website (content!) No issues with sharing or search engines One design Layout adapts to any screen size
  • 38.
  • 39. HOW TO START?(This is how we do it)
  • 40. Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  • 42. What mobile rst does not mean
  • 43. What mobile rst does notmean: We should only focus on mobile from now on Mobile is more important than