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

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

on

  • 684 views

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)

Statistics

Views

Total Views
684
Views on SlideShare
684
Embed Views
0

Actions

Likes
1
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • RESPONSIVEWEB DESIGNNovember 3, 2011 – Microsoft Web & Phone UX Tour Belgium
  • Bram @bram_Information architect
  • You may remember us from such clients as:
  • netlash.com/blog
  • 1. Why you should use responsive design2. Design responsive design3. Technical challenges
  • Why responsive design?1. How not to approach mobile web2. Why responsive design is key3. Think mobile first4. It starts with IA
  • No stats and numbers.You’re here so you knowmobile is big.
  • HOW NOT TOAPPROACHMOBILE WEB
  • Imagine:a mobile operator in 2006
  • We need a mobile website! Mark Obistar CEO at random mobile operator
  • m.*mobile.*“Go to full website”
  • A separate mobile website (1)‣ What about tablet pc’s?‣ What about new devices with unknown display sizes?
  • Raise your hand if you never usedyour smartphone laying in bed.
  • A separate mobile website (2)‣ Mobile users ≠ users on the road‣ You probably need all your content
  • “How should I configure my phoneto use mobile internet?”
  • m.proximus.be
  • m.mobistar.be
  • m.base.be
  • m.mobilevikings.be
  • A separate mobile website (3)‣ You’ll have to manage all your content twice
  • A separate mobile website (4)‣ Users share links.‣ Different users use different devices.
  • 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
  • Imagine:a newspaper company in 2010
  • We need an app! P. Vandermeersch CEO at a random newspaper company
  • FA I L
  • 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
  • Native apps (2)‣ Which platforms will you support? (iOS, Android, WindowsPhone)‣ Each update: - cost per platform - might take time (approval)
  • Native apps (3)‣ Store owners take a cut on in-app purchases
  • Native apps (4)‣ What about search engines?‣ Your content won’t be indexed by them
  • 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
  • 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
  • Please.Let’s not go there again.
  • (of course native apps canbe the best answer)‣ If you need hardware functions that browsers don’t yet support (camera, compass, gyroscope, gpu power, ...).
  • 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
  • In a lot of cases, neither separatemobile websites nor native appsprovide an effective answer ontodays needs.
  • RESPONSIVEIS KEY
  • Responsive web design:‣ One website (content!)‣ No issues with sharing or search engines‣ One design‣ Layout adapts to any screen size
  • handelsbeurs.be
  • HOW TO START?(This is how we do it)
  • Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  • THINK MOBILEFIRST
  • What mobile first does not mean
  • What mobile first does notmean:‣ We should only focus on mobile from now on‣ Mobile is more important than desktop
  • Creating a website: 2 options‣ Mobile first‣ Desktop first
  • Why mobile first (1)Mobile is harder to use‣ Smaller screen‣ Touch instead of keyboard and mouse(pad)‣ Slower internet connection
  • 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
  • Why mobile first (3)Forces you to focus:‣ No space for complexity‣ No space for extra’s‣ Focus on core features and simplicity
  • It’s easier to make a simple thingmore complex than to make acomplex thing more simple.
  • If you can support the mobileweb, you can support anything.
  • Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  • IA FOR MOBILE(actually it counts as much for desktop)
  • Know the online strategy3 basics:‣ Target audience‣ Goal of the client‣ USP of the client
  • 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
  • “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
  • “Don’t make me think” (2)‣ 2 types of page: choice page and action page‣ Homepage is a choice page
  • CONCLUSIONSO FAR
  • Conclusion so far‣ For content-driven websites, responsive web design is the future‣ Think mobile first‣ KISS, focus on core tasks (starts with IA)