• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)
 

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

on

  • 654 views

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

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

Statistics

Views

Total Views
654
Views on SlideShare
654
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • [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) Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux) Presentation Transcript

  • Responsive Design, Adapted Adapted Dara Pressley, Lindy RouxUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
  • Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
  • Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
  • The Theory One Code Base Content Management Consistency of Look & FeelUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
  • Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
  • 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
  • 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
  • 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 unresponsive. Chris Coyier - CSS TricksUXPA 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 PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
  • 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
  • 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
  • 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
  • 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
  • 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
  • UXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
  • Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
  • 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
  • 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
  • Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic PatternsUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
  • Responsive Patterns Off Canvas Zurb PlaygroundUXPA 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/paUXPA DCUser Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
  • Thank You DaraPressley Lindy Roux -@uxdiva @lindroux Dara Pressley @uxdiva - Lindy Roux @lindroux