Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
-
Upload
bram-vanderhaeghe -
Category
Technology
-
view
510 -
download
0
description
Transcript of Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
November 3, 2011 – Microsoft Web & Phone UX Tour Belgium
RESPONSIVE WEB DESIGN
Bram
@bram_
Information architect
You may remember us from such clients as:
netlash.com/blog
3. Technical challenges
2. Design responsive design
1. Why you should use responsive design
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
No stats and numbers.You’re here so you know
mobile is big.
HOW NOT TO APPROACH MOBILE WEB
Imagine: a mobile operator in 2006
Mark ObistarCEO at random mobile operator
We need a mobile website!
m.*mobile.*“Go to full website”
‣ What about tablet pc’s?
‣ What about new devices with unknown
display sizes?
A separate mobile website (1)
Raise your hand if you never used your smartphone laying in bed.
‣ Mobile users ≠ users on the road
‣ You probably need all your content
A separate mobile website (2)
“How should I configure my phone to use mobile internet?”
m.proximus.be
m.mobistar.be
m.base.be
m.mobilevikings.be
‣ You’ll have to manage all your
content twice
A separate mobile website (3)
‣ Users share links.
‣ Different users use different devices.
A separate mobile website (4)
‣ 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
A separate mobile website (conclusion)
Imagine: a newspaper company in 2010
P. VandermeerschCEO at a random newspaper
company
We need an app!
FAIL
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
‣ Which platforms will you support?
(iOS, Android, WindowsPhone)
‣ Each update:
- cost per platform
- might take time (approval)
Native apps (2)
‣ Store owners take a cut on in-app
purchases
Native apps (3)
‣ What about search engines?
‣ Your content won’t be indexed by them
Native apps (4)
‣ 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
Native apps (5)
‣ issues with links to other websites
‣ no native browser functions like bookmarking
‣ non selectable text (no copy-paste)
‣ each interface is different
Remind you to something?
Please.Let’s not go there again.
‣ If you need hardware functions that
browsers don’t yet support (camera,
compass, gyroscope, gpu power, ...).
(of course native apps can be the best answer)
‣ 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
Native apps (conclusion)
In a lot of cases, neither separate mobile websites nor native apps provide an effective answer on todays needs.
RESPONSIVE IS KEY
‣ One website (content!)
‣ No issues with sharing or search engines
‣ One design
‣ Layout adapts to any screen size
Responsive web design:
handelsbeurs.be
HOW TO START?(This is how we do it)
1. Online strategy
2. Information architecture
3. Design
4. Front-end design
5. Development
Our proces
THINK MOBILE FIRST
What mobile first does not mean
‣ We should only focus on mobile from
now on
‣ Mobile is more important than
desktop
What mobile first does not mean:
‣ Mobile first
‣ Desktop first
Creating a website: 2 options
Mobile is harder to use
‣ Smaller screen
‣ Touch instead of keyboard and
mouse(pad)
‣ Slower internet connection
Why mobile first (1)
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
Why mobile first (2)
Forces you to focus:
‣ No space for complexity
‣ No space for extra’s
‣ Focus on core features and simplicity
Why mobile first (3)
It’s easier to make a simple thing more complex than to make a complex thing more simple.
If you can support the mobile web, you can support anything.
1. Online strategy
2. Information architecture
3. Design
4. Front-end design
5. Development
Our proces
IA FOR MOBILE(actually it counts as much for desktop)
3 basics:
‣ Target audience
‣ Goal of the client
‣ USP of the client
Know the online strategy
‣ 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
KISS: Keep it simple and straightforward
‣ 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” (1)
‣ 2 types of page: choice page and
action page
‣ Homepage is a choice page
“Don’t make me think” (2)
CONCLUSION SO FAR
‣ For content-driven websites, responsive
web design is the future
‣ Think mobile first
‣ KISS, focus on core tasks (starts with IA)
Conclusion so far