Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
-
Upload
bram-vanderhaeghe -
Category
Technology
-
view
511 -
download
0
description
Transcript of Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
![Page 1: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/1.jpg)
November 3, 2011 – Microsoft Web & Phone UX Tour Belgium
RESPONSIVE WEB DESIGN
![Page 2: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/2.jpg)
Bram
@bram_
Information architect
![Page 3: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/3.jpg)
You may remember us from such clients as:
![Page 4: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/4.jpg)
netlash.com/blog
![Page 5: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/5.jpg)
3. Technical challenges
2. Design responsive design
1. Why you should use responsive design
![Page 6: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/6.jpg)
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
![Page 7: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/7.jpg)
No stats and numbers.You’re here so you know
mobile is big.
![Page 8: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/8.jpg)
HOW NOT TO APPROACH MOBILE WEB
![Page 9: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/9.jpg)
Imagine: a mobile operator in 2006
![Page 10: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/10.jpg)
Mark ObistarCEO at random mobile operator
We need a mobile website!
![Page 11: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/11.jpg)
m.*mobile.*“Go to full website”
![Page 12: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/12.jpg)
‣ What about tablet pc’s?
‣ What about new devices with unknown
display sizes?
A separate mobile website (1)
![Page 13: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/13.jpg)
Raise your hand if you never used your smartphone laying in bed.
![Page 14: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/14.jpg)
‣ Mobile users ≠ users on the road
‣ You probably need all your content
A separate mobile website (2)
![Page 15: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/15.jpg)
“How should I configure my phone to use mobile internet?”
![Page 16: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/16.jpg)
m.proximus.be
![Page 17: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/17.jpg)
m.mobistar.be
![Page 18: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/18.jpg)
m.base.be
![Page 19: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/19.jpg)
m.mobilevikings.be
![Page 20: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/20.jpg)
‣ You’ll have to manage all your
content twice
A separate mobile website (3)
![Page 21: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/21.jpg)
‣ Users share links.
‣ Different users use different devices.
A separate mobile website (4)
![Page 22: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/22.jpg)
‣ 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)
![Page 23: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/23.jpg)
Imagine: a newspaper company in 2010
![Page 24: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/24.jpg)
P. VandermeerschCEO at a random newspaper
company
We need an app!
![Page 25: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/25.jpg)
![Page 26: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/26.jpg)
FAIL
![Page 27: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/27.jpg)
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
![Page 28: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/28.jpg)
‣ Which platforms will you support?
(iOS, Android, WindowsPhone)
‣ Each update:
- cost per platform
- might take time (approval)
Native apps (2)
![Page 29: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/29.jpg)
‣ Store owners take a cut on in-app
purchases
Native apps (3)
![Page 30: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/30.jpg)
‣ What about search engines?
‣ Your content won’t be indexed by them
Native apps (4)
![Page 31: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/31.jpg)
‣ 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)
![Page 32: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/32.jpg)
‣ 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?
![Page 33: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/33.jpg)
![Page 34: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/34.jpg)
Please.Let’s not go there again.
![Page 35: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/35.jpg)
‣ 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)
![Page 36: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/36.jpg)
‣ 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)
![Page 37: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/37.jpg)
In a lot of cases, neither separate mobile websites nor native apps provide an effective answer on todays needs.
![Page 38: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/38.jpg)
RESPONSIVE IS KEY
![Page 39: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/39.jpg)
‣ One website (content!)
‣ No issues with sharing or search engines
‣ One design
‣ Layout adapts to any screen size
Responsive web design:
![Page 40: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/40.jpg)
handelsbeurs.be
![Page 41: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/41.jpg)
HOW TO START?(This is how we do it)
![Page 42: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/42.jpg)
1. Online strategy
2. Information architecture
3. Design
4. Front-end design
5. Development
Our proces
![Page 43: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/43.jpg)
THINK MOBILE FIRST
![Page 44: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/44.jpg)
What mobile first does not mean
![Page 45: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/45.jpg)
‣ We should only focus on mobile from
now on
‣ Mobile is more important than
desktop
What mobile first does not mean:
![Page 46: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/46.jpg)
‣ Mobile first
‣ Desktop first
Creating a website: 2 options
![Page 47: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/47.jpg)
Mobile is harder to use
‣ Smaller screen
‣ Touch instead of keyboard and
mouse(pad)
‣ Slower internet connection
Why mobile first (1)
![Page 48: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/48.jpg)
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)
![Page 49: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/49.jpg)
Forces you to focus:
‣ No space for complexity
‣ No space for extra’s
‣ Focus on core features and simplicity
Why mobile first (3)
![Page 50: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/50.jpg)
It’s easier to make a simple thing more complex than to make a complex thing more simple.
![Page 51: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/51.jpg)
If you can support the mobile web, you can support anything.
![Page 52: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/52.jpg)
1. Online strategy
2. Information architecture
3. Design
4. Front-end design
5. Development
Our proces
![Page 53: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/53.jpg)
IA FOR MOBILE(actually it counts as much for desktop)
![Page 54: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/54.jpg)
3 basics:
‣ Target audience
‣ Goal of the client
‣ USP of the client
Know the online strategy
![Page 55: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/55.jpg)
‣ 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
![Page 56: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/56.jpg)
‣ 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)
![Page 57: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/57.jpg)
‣ 2 types of page: choice page and
action page
‣ Homepage is a choice page
“Don’t make me think” (2)
![Page 58: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/58.jpg)
![Page 59: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/59.jpg)
CONCLUSION SO FAR
![Page 60: Responsive Web Design (Microsoft Web & Phone UX Tour 2011)](https://reader033.fdocuments.us/reader033/viewer/2022051610/549737a2ac79592f2e8b52b8/html5/thumbnails/60.jpg)
‣ For content-driven websites, responsive
web design is the future
‣ Think mobile first
‣ KISS, focus on core tasks (starts with IA)
Conclusion so far