Responsive Design,     Adapted     Adapted     Dara Pressley, Lindy RouxUXPA DCUser Focus 2012                            ...
Introductions                  The Theory                  The Reality                  The Company & the Players         ...
Introductions                  The Theory                  The Reality                  The Company & the Players         ...
The Theory  One Code Base  Content Management  Consistency of Look & FeelUXPA DCUser Focus 2012                Dara Pressl...
Introductions                  The Theory                  The Reality                  The Company & the Players         ...
The Reality              •   Most companies already have a web                  presence, and may have recently been      ...
Hilton Honors Hilton Honors recently redesigned their site. The new look is clean and appealing. But it is not responsive....
YouTube   HuluUXPA DCUser Focus 2012             Dara Pressley @uxdiva - Lindy Roux @lindroux
Websites are naturally responsive. Its          something that youve done to the page that          has made it unresponsi...
CSS Tricks                  And this is good,                  because if you get                  stuck -- just turn the ...
Introductions                  The Theory                  The Reality                  The Company & the Players         ...
My Honey Pot          • Start Up - 3 years in the making          • Where Mint meets Blinksale meets Paypal          • Pix...
Mary Anne         Background         Age: 34         Occupation: Marketing Consultant         Attributes: Working mom, per...
User Priorities - Mary Anne                                                                         Reade        Laptop/De...
Bert         Background         Age: 65         Occupation: Retired         Attributes: Prefers to use the desktop. Receiv...
User Priorities - Bert                                                        Smartphon                 Laptop/D          ...
UXPA DCUser Focus 2012   Dara Pressley @uxdiva - Lindy Roux @lindroux
Introductions                  The Theory                  The Reality                  The Company & the Players         ...
Prioritization & Content Inventory                                                                                    Tabl...
Content Inventory                               Content   Break Point          Interface         Branding                 ...
Introductions                  The Theory                  The Reality                  The Company & the Players         ...
Responsive Patterns                     Off Canvas                     Zurb PlaygroundUXPA DCUser Focus 2012              ...
More Responsive          Patterns              •   A list of response mobile patterns.                  http://bradfrost.g...
Thank You  DaraPressley   Lindy Roux -@uxdiva       @lindroux                     Dara Pressley @uxdiva - Lindy Roux @lind...
Upcoming SlideShare
Loading in...5
×

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

567

Published on

Given at UXPA-DC's User Focus Conference, Oct. 19, 2012

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
567
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • [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]
  • Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)

    1. 1. Responsive Design, Adapted Adapted Dara Pressley, Lindy RouxUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    2. 2. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    3. 3. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    4. 4. The Theory One Code Base Content Management Consistency of Look & FeelUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    5. 5. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    6. 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 responsiveUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    7. 7. Hilton Honors Hilton 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
    8. 8. YouTube HuluUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    9. 9. Websites are naturally responsive. Its something that youve done to the page that has made it unresponsive. Chris Coyier - CSS TricksUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    10. 10. 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
    11. 11. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    12. 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 responsiveUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    13. 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 MediaUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    14. 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 XUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    15. 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 DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    16. 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 XUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    17. 17. UXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    18. 18. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    19. 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 XUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    20. 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 xUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    21. 21. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    22. 22. Responsive Patterns Off Canvas Zurb PlaygroundUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    23. 23. More Responsive Patterns • A list of response mobile patterns. http://bradfrost.github.com/this-is-responsive/paUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
    24. 24. Thank You DaraPressley Lindy Roux -@uxdiva @lindroux Dara Pressley @uxdiva - Lindy Roux @lindroux
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×