adaptive design, adapted adapted (dara pressley, lindy roux)
DESCRIPTION
Given at UXPA-DC's User Focus Conference, Oct. 19, 2012TRANSCRIPT
Dara Pressley @uxdiva - Lindy Roux @lindroux
Responsive Design,Adapted
Dara Pressley, Lindy Roux
UXPA DCUser Focus 2012
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
The Theory
One Code BaseContent ManagementConsistency of Look & Feel
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
•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
The Reality
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Hilton HonorsHilton Honors recently redesigned their site. The new look is clean and appealing. But it is not responsive.
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
YouTube Hulu
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Websites are naturally responsive. It's something that you've done to the page that has made it unresponsive.
Chris Coyier - CSS Tricks
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
CSS Tricks
And this is good, because if you get stuck -- just turn the design off.
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
• Start Up - 3 years in the making
• Where Mint meets Blinksale meets Paypal
• Pixel Perfect design ready to launch
• Decided to go responsive
My Honey Pot
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Mary AnneBackground
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 DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
User Priorities - Mary Anne
Mary Anne Wants to...Smartphon
eReade
rTablet
Laptop/Desktop
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 DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
BertBackground
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 DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Bert Wants to...Smartphon
eReader Tablet
Laptop/Desktop
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
User Priorities - Bert
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Prioritization & Content Inventory
They Want to... SmartphoneReade
rTable
tLaptop/Desktop
Pay Bills X X X X X
Check Balances X X X X X
Send Invoices X
Track hours for invoicing X X
Manage account settings X X
View detailed transaction history X X X
See alerts (account balances, bills due, etc)
X X X X X
Read small business/investment articles & blogs
X X X X
Manage budget X X X
Flag items for follow-up X X X
View stock prices X X
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
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 DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Introductions
The Theory
The Reality
The Company & the Players
Prioritization Exercise
Some Basic Patterns
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
Responsive Patterns
Off CanvasZurb Playground
UXPA DCUser Focus 2012
Dara Pressley @uxdiva - Lindy Roux @lindroux
More Responsive Patterns
•A list of response mobile patterns. http://bradfrost.github.com/this-is-responsive/patterns.html
Dara Pressley @uxdiva - Lindy Roux @lindroux
Dara Pressley @uxdiva
Thank YouLindy Roux -
@lindroux