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:
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.You’re here so you knowmobile is big.
8. HOW NOT TOAPPROACHMOBILE WEB
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 pc’s?‣ 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 conﬁgure my phoneto use mobile internet?”
20. A separate mobile website (3)‣ You’ll 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 pc’s?‣ Mobile users ≠ users on the road‣ You’ll 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 won’t 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)‣ App’s 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.Let’s not go there again.
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. 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 speciﬁc hardware functions
35. In a lot of cases, neither separatemobile websites nor native appsprovide an effective answer ontodays needs.
36. RESPONSIVEIS KEY
37. Responsive web design:‣ One website (content!)‣ No issues with sharing or search engines‣ One design‣ Layout adapts to any screen size
39. HOW TO START?(This is how we do it)
40. Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
41. THINK MOBILEFIRST
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 desktop
44. Creating a website: 2 options‣ Mobile ﬁrst‣ Desktop ﬁrst
45. Why mobile ﬁrst (1)Mobile is harder to use‣ Smaller screen‣ Touch instead of keyboard and mouse(pad)‣ Slower internet connection
46. Why mobile ﬁrst (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. Why mobile ﬁrst (3)Forces you to focus:‣ No space for complexity‣ No space for extra’s‣ Focus on core features and simplicity
48. It’s easier to make a simple thingmore complex than to make acomplex thing more simple.
49. If you can support the mobileweb, you can support anything.
50. Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
51. IA FOR MOBILE(actually it counts as much for desktop)
52. Know the online strategy3 basics:‣ Target audience‣ Goal of the client‣ USP of the client
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 ﬁrst, details later
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. “Don’t make me think” (2)‣ 2 types of page: choice page and action page‣ Homepage is a choice page
56. CONCLUSIONSO FAR
57. Conclusion so far‣ For content-driven websites, responsive web design is the future‣ Think mobile ﬁrst‣ KISS, focus on core tasks (starts with IA)