Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)

Dara Pressley @uxdiva - Lindy Roux @lindroux

Responsive Design,Adapted

Dara Pressley, Lindy Roux

UXPA DCUser Focus 2012



Introductions

The Theory

The Reality

The Company & the Players

Prioritization Exercise

Some Basic Patterns



The Theory

One Code BaseContent ManagementConsistency of Look & Feel



Introductions

The Theory

The Reality



Some Basic Patterns



•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



Hilton HonorsHilton Honors recently redesigned their site. The new look is clean and appealing. But it is not responsive.



YouTube Hulu



Websites are naturally responsive. It's something that you've done to the page that has made it unresponsive.

Chris Coyier - CSS Tricks



CSS Tricks

And this is good, because if you get stuck -- just turn the design off.



Introductions

The Theory

The Reality



Some Basic Patterns



• 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



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



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



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.)



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



Introductions

The Theory

The Reality



Some Basic Patterns



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



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



Introductions

The Theory

The Reality



Some Basic Patterns



Responsive Patterns

Off CanvasZurb Playground



More Responsive Patterns

•A list of response mobile patterns. http://bradfrost.github.com/this-is-responsive/patterns.html


Dara Pressley @uxdiva

Thank YouLindy Roux -

@lindroux

Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)

Technology

Transcript of Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)