Your SlideShare is downloading. ×
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

565

Published on

Presentation about why responsive web design is the future. …

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
565
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. RESPONSIVEWEB DESIGNNovember 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 design2. Design responsive design3. Technical challenges
  • 6. Why responsive design?1. How not to approach mobile web2. Why responsive design is key3. Think mobile first4. 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 configure my phoneto 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
  • 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 specific 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
  • 38. handelsbeurs.be
  • 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 first does not mean
  • 43. What mobile first does notmean:‣ We should only focus on mobile from now on‣ Mobile is more important than desktop
  • 44. Creating a website: 2 options‣ Mobile first‣ Desktop first
  • 45. Why mobile first (1)Mobile is harder to use‣ Smaller screen‣ Touch instead of keyboard and mouse(pad)‣ Slower internet connection
  • 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. Why mobile first (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 first, 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 first‣ KISS, focus on core tasks (starts with IA)

×