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

1. RESPONSIVE
WEB DESIGN
November 3, 2011 – Microsoft Web & Phone UX Tour Belgium

2. Bram
@bram_
Information architect

3. You may remember us from such clients as:

4. netlash.com/blog

5. 1. Why you should use responsive design
2. Design responsive design
3. Technical challenges

6. Why responsive design?
1. How not to approach mobile web
2. Why responsive design is key
3. Think mobile first
4. It starts with IA

7. No stats and numbers.
You’re here so you know
mobile is big.

8. HOW NOT TO
APPROACH
MOBILE 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 used
your 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 configure my phone
to use mobile internet?”

16. m.proximus.be

17. m.mobistar.be

18. m.base.be

19. m.mobilevikings.be

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

26. FA I L

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

28. Native apps (2)
‣ Which platforms will you support?
(iOS, Android, WindowsPhone)
‣ Each update:
- cost per platform
- might take time (approval)

29. Native apps (3)
‣ Store owners take a cut on in-app
purchases

30. Native apps (4)
‣ What about search engines?
‣ Your content won’t be indexed by them

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

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

34. Please.
Let’s not go there again.

35. (of course native apps can
be the best answer)
‣ If you need hardware functions that
browsers don’t yet support (camera,
compass, gyroscope, gpu power, ...).

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

37. In a lot of cases, neither separate
mobile websites nor native apps
provide an effective answer on
todays needs.

38. RESPONSIVE
IS KEY

39. Responsive web design:
‣ One website (content!)
‣ No issues with sharing or search engines
‣ One design
‣ Layout adapts to any screen size

40. handelsbeurs.be

41. HOW TO START?
(This is how we do it)

42. Our proces
1. Online strategy
2. Information architecture
3. Design
4. Front-end design
5. Development

43. THINK MOBILE
FIRST

44. What mobile first does not mean

45. What mobile first does not
mean:
‣ We should only focus on mobile from
now on
‣ Mobile is more important than
desktop

46. Creating a website: 2 options
‣ Mobile first
‣ Desktop first

47. Why mobile first (1)
Mobile is harder to use
‣ Smaller screen
‣ Touch instead of keyboard and
mouse(pad)
‣ Slower internet connection

48. Why mobile first (2)
Mobile users have typically less
patience
‣ Because it’s harder to use
‣ Might be on the move
‣ Need that info to use it right now

49. Why mobile first (3)
Forces you to focus:
‣ No space for complexity
‣ No space for extra’s
‣ Focus on core features and simplicity

50. It’s easier to make a simple thing
more complex than to make a
complex thing more simple.

51. If you can support the mobile
web, you can support anything.

52. Our proces
1. Online strategy
2. Information architecture
3. Design
4. Front-end design
5. Development

53. IA FOR MOBILE
(actually it counts as much for desktop)

54. Know the online strategy
3 basics:
‣ Target audience
‣ Goal of the client
‣ USP of the client

55. KISS: Keep it simple and
straightforward
‣ 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

56. “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

57. “Don’t make me think” (2)
‣ 2 types of page: choice page and
action page
‣ Homepage is a choice page

59. CONCLUSION
SO FAR

60. Conclusion so far
‣ For content-driven websites, responsive
web design is the future
‣ Think mobile first
‣ KISS, focus on core tasks (starts with IA)