Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design (Microsoft Web & Phone UX Tour 2011)


Published on

Presentation about why responsive web design is the future.
Presented at Microsoft Web & Phone UX Tour Belgium (2011)

Published in: Technology, Business
  • Be the first to comment

Responsive Web Design (Microsoft Web & Phone UX Tour 2011)

  1. 1. RESPONSIVEWEB DESIGNNovember 3, 2011 – Microsoft Web & Phone UX Tour Belgium
  2. 2. Bram @bram_Information architect
  3. 3. You may remember us from such clients as:
  4. 4.
  5. 5. 1. Why you should use responsive design2. Design responsive design3. Technical challenges
  6. 6. Why responsive design?1. How not to approach mobile web2. Why responsive design is key3. Think mobile first4. It starts with IA
  7. 7. No stats and numbers.You’re here so you knowmobile is big.
  9. 9. Imagine:a mobile operator in 2006
  10. 10. We need a mobile website! Mark Obistar CEO at random mobile operator
  11. 11. m.*mobile.*“Go to full website”
  12. 12. A separate mobile website (1)‣ What about tablet pc’s?‣ What about new devices with unknown display sizes?
  13. 13. Raise your hand if you never usedyour smartphone laying in bed.
  14. 14. A separate mobile website (2)‣ Mobile users ≠ users on the road‣ You probably need all your content
  15. 15. “How should I configure my phoneto use mobile internet?”
  16. 16.
  17. 17.
  18. 18.
  19. 19.
  20. 20. A separate mobile website (3)‣ You’ll have to manage all your content twice
  21. 21. A separate mobile website (4)‣ Users share links.‣ Different users use different devices.
  22. 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. 23. Imagine:a newspaper company in 2010
  24. 24. We need an app! P. Vandermeersch CEO at a random newspaper company
  25. 25. FA I L
  26. 26. Native apps (1)Cfr. separate mobile website:‣ What about tablet pc’s?‣ Mobile users ≠ users on the road‣ You’ll have to manage all your content twice
  27. 27. Native apps (2)‣ Which platforms will you support? (iOS, Android, WindowsPhone)‣ Each update: - cost per platform - might take time (approval)
  28. 28. Native apps (3)‣ Store owners take a cut on in-app purchases
  29. 29. Native apps (4)‣ What about search engines?‣ Your content won’t be indexed by them
  30. 30. Native apps (5)‣ links to websites open in a new app (!)‣ no native browser functions (bookmarking!)‣ non selectable text (no copy-paste)‣ App’s often have their own interface language
  31. 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. 32. Please.Let’s not go there again.
  33. 33. (of course native apps canbe the best answer)‣ If you need hardware functions that browsers don’t yet support (camera, compass, gyroscope, gpu power, ...).
  34. 34. Native apps (conclusion)‣ Different platforms to support‣ Cut on in-app-purchases‣ Content has to be managed twice and won’t be indexed by search engines‣ Risk on usability issues‣ Only if you need specific hardware functions
  35. 35. In a lot of cases, neither separatemobile websites nor native appsprovide an effective answer ontodays needs.
  37. 37. Responsive web design:‣ One website (content!)‣ No issues with sharing or search engines‣ One design‣ Layout adapts to any screen size
  38. 38.
  39. 39. HOW TO START?(This is how we do it)
  40. 40. Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  42. 42. What mobile first does not mean
  43. 43. What mobile first does notmean:‣ We should only focus on mobile from now on‣ Mobile is more important than desktop
  44. 44. Creating a website: 2 options‣ Mobile first‣ Desktop first
  45. 45. Why mobile first (1)Mobile is harder to use‣ Smaller screen‣ Touch instead of keyboard and mouse(pad)‣ Slower internet connection
  46. 46. Why mobile first (2)Mobile users have typically lesspatience‣ Because it’s harder to use‣ Might be on the move‣ Need that info to use it right now
  47. 47. Why mobile first (3)Forces you to focus:‣ No space for complexity‣ No space for extra’s‣ Focus on core features and simplicity
  48. 48. It’s easier to make a simple thingmore complex than to make acomplex thing more simple.
  49. 49. If you can support the mobileweb, you can support anything.
  50. 50. Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  51. 51. IA FOR MOBILE(actually it counts as much for desktop)
  52. 52. Know the online strategy3 basics:‣ Target audience‣ Goal of the client‣ USP of the client
  53. 53. KISS: Keep it simple andstraightforward‣ Top tasks (key services) in main menu‣ Short and simple copy‣ Throw away anything that isn’t needed‣ White space is allowed‣ Conclusion first, details later
  54. 54. “Don’t make me think” (1)‣ At any point it should be clear how to get closer to the wanted answer‣ Extra click is way better than complex navigation
  55. 55. “Don’t make me think” (2)‣ 2 types of page: choice page and action page‣ Homepage is a choice page
  57. 57. Conclusion so far‣ For content-driven websites, responsive web design is the future‣ Think mobile first‣ KISS, focus on core tasks (starts with IA)