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