1. Responsive Design,
Adapted
Adapted
Dara Pressley, Lindy Roux
UXPA DC
User Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
2. Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
3. Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
4. The Theory
One Code Base
Content Management
Consistency of Look & Feel
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
5. Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
6. The Reality
⢠Most companies already have a web
presence, and may have recently been
through a costly design or redesign
process. This makes Mobile First an
unrealistic notion
⢠As designers and developers we might
have designed the site differently if we
had known it was meant to be responsive
UXPA DC
User Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
7. Hilton Honors
Hilton Honors recently redesigned their site.
The new look is clean and appealing. But it is
not responsive.
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
8. YouTube Hulu
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
9. Websites are naturally responsive. It's
something that you've done to the page that
has made it unresponsive.
Chris Coyier - CSS Tricks
UXPA DC
User Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
10. CSS Tricks
And this is good,
because if you get
stuck -- just turn the
design off.
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
11. Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
12. My Honey Pot
⢠Start Up - 3 years in the making
⢠Where Mint meets Blinksale meets Paypal
⢠Pixel Perfect design ready to launch
⢠Decided to go responsive
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
13. Mary Anne
Background
Age: 34
Occupation: Marketing Consultant
Attributes: Working mom, perpetually on-the-go, highly
tech savvy, expects instant gratification and seamless
transfer from device to device. Efficiency is key
Device Use: Smartphone, Tablet, Laptop Computer
Scenario
5am - 6am Checks email, appointments and to-doâs
8am - 9am Sends out invoices, makes phone calls
9am - 11am Meetings
11am - 5pm Emails, proposal-writing, research
9pm - 11pm Pay bills, Email, Social Media
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
14. User Priorities - Mary Anne
Reade Laptop/Des
Mary Anne Wants to... Smartphone Tablet
r ktop
Pay Bills X X X
Check Balances X X X
Send Invoices X
Track hours for invoicing X X
Manage account settings X
View detailed transaction history X X
See alerts (account balances, bills due, etc) X X X
Read small business articles & blogs X X
Manage budget X X
Flag items for follow-up X X X
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
15. Bert
Background
Age: 65
Occupation: Retired
Attributes: Prefers to use the desktop. Received a Kindle
Fire from his son which he uses to travel - so that is his
internet method while on vacation. Simplicity is key
Scenario
Every morning, Bert makes his way to a local cafe, where
he enjoys a double espresso and uses his Kindle to
connect to wifi and:
- Check email
- Pay bills and check balances
- Read 2-3 articles (news, financial advice, etc.)
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
16. User Priorities - Bert
Smartphon Laptop/D
Bert Wants to... Reader Tablet
e esktop
Pay Bills X X
Check Balances X X
View stock prices X X
Manage account settings X
View detailed transaction history X
See alerts (account balances, bills due, etc) X X
Read investment articles & blogs X X
Manage budget X
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
18. Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
19. Prioritization & Content Inventory
Table Laptop/Desk
They Want to... Smartphone Reader
t top
Pay Bills X X X XX
Check Balances X X X XX
Send Invoices X
Track hours for invoicing X X
Manage account settings XX
View detailed transaction history X XX
See alerts (account balances, bills due, etc) X X X XX
Read small business/investment articles & X X XX
blogs
Manage budget X XX
Flag items for follow-up X X X
View stock prices X X
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
20. Content Inventory
Content Break Point Interface
Branding 1,2,3,4
Sign in / out 1,2,3,4
Search 1,2,3,4 x
Menu 1,2,3,4 x
Dashboard Tools (Settings) 3,4
View Expenses 3,4
Manage Money 3,4
Alerts 1,2,3,4 x
Stocks 3,4
Advice Blog 3,4
Advertising 4
Footer 1,2,3,4 x
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
21. Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
22. Responsive Patterns
Off Canvas
Zurb Playground
UXPA DC
User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
23. More Responsive
Patterns
⢠A list of response mobile patterns.
http://bradfrost.github.com/this-is-responsive/pa
UXPA DC
User Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
24. Thank You
Dara
Pressley Lindy Roux -
@uxdiva @lindroux
Dara Pressley @uxdiva - Lindy Roux @lindroux
Editor's Notes
[twitter] @uxdiva fun-fact: I went to the high school where grunge started #userfocus [/twitter] [twitter] @lindroux fun-fact: The country Iâm from spoke 11 languages, I know 3 of them #userfocus [/twitter]
- Reponsive Adapted--- Not Mobile First-- What if my desktop is already designed -- what do I do-- some examples
Hulu & Youtube recently redesigned, they still are device centric. Over time, this will be more difficult to maintain. YouTube has itsâ Website, Mobile Web, iOS Mobile Apps, Android App, Kindle, Google TV, Blackberry and Windows Mobile. [twitter] For users, device centric design often results in a user experience that is not transferable across different devices #userfocus - @lindroux [/twitter] [twitter] A separate application for every device can mean inefficiencies in cost & upkeep, & it's just not future proof #userfocus - @lindroux [/twitter]
[twitter] Websites are naturally responsive. It's something that you've done to the page that has made it unresponsive. #chriscoyier #userfocus [/twitter]
MyHoneyPot - where Mint meets Blinksale meets Paypal. After spending 3 years preparing for market, the website is about to launch. Mobile web and apps had been planned on the road map, but now the team has heard about responsive. They feel responsive will be a much better way to future proof their work and want to go that direction. However, they do not want to just scrap all the work they have done and need to look for away to convert their pixel perfect desktop site to the fluidity of device based responsiveness.
[twitter] Increasingly professionals on the go will switch from device to device throughout their day. @lindroux #userfocus [/twitter]
[twitter] Building personas that have mobility and multi-device qualities will help to identify key needs for your users #userfocus [/twitter]
[twitter] Check out Zurb Playground for responsive pattern demos #userfocus http://bit.ly/7sgiQ1 [/twitter] [twitter] Learn more about mobile patterns #userfocus http://bit.ly/s5gQix http://bit.ly/HjQC2 q http://bit.ly/gaOFx r http://bit.ly/pYt1 51 [/twitter]
[twitter] A list of response mobile patterns. http://bradfrost.github.com/this-is-responsive/patterns.html #userfocus [/twitter]