Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)
•Download as PPT, PDF•
1 like•729 views
Given at UXPA-DC's User Focus Conference, Oct. 19, 2012
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (10)
Similar to Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)
Similar to Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux) (20)
More from uxpa-dc
More from uxpa-dc (20)
Recently uploaded
Recently uploaded (20)
Adaptive Design, Adapted Adapted (Dara Pressley, Lindy Roux)
- 1. Responsive Design, Adapted Adapted Dara Pressley, Lindy Roux UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 2. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 3. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 4. The Theory One Code Base Content Management Consistency of Look & Feel UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 5. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 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 responsive UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 7. Hilton Honors Hilton Honors recently redesigned their site. The new look is clean and appealing. But it is not responsive. UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 8. YouTube Hulu UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 9. Websites are naturally responsive. It's something that you've done to the page that has made it unresponsive. Chris Coyier - CSS Tricks UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 10. CSS Tricks And this is good, because if you get stuck -- just turn the design off. UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 11. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 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 responsive UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 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 Media UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 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 X UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 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 DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 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 X UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 17. UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 18. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 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 X UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 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 x UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 21. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 22. Responsive Patterns Off Canvas Zurb Playground UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 23. More Responsive Patterns • A list of response mobile patterns. http://bradfrost.github.com/this-is-responsive/pa UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 24. Thank You Dara Pressley Lindy Roux - @uxdiva @lindroux Dara Pressley @uxdiva - Lindy Roux @lindroux
Editor's Notes
- [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]