Responsive Design, Adapted
â˘Als KEY, PDF herunterladenâ˘
3 gefällt mirâ˘992 views
A presentation about what happens if you want your site to go responsive but there is already a desktop design or a recent redesign.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
KĂźrzlich hochgeladen
KĂźrzlich hochgeladen (20)
Empfohlen
Empfohlen (20)
Responsive Design, Adapted
- 1. Responsive Design, Adapted Dara Pressley, Lindy Roux UXPA DC User Focus 2012 Dara Pressley @uxdiva - Lindy Roux @lindroux
- 2. The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 3. The Theory One Code Base Content Management Consistency of Look & Feel UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 4. The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 5. 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 UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 6. Hilton Honors Hilton Honors recently redesigned their site. The new look is clean and appealing. But it is not responsive. UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 7. YouTube Hulu UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 8. YouTube has ⢠Website ⢠Mobile Web ⢠iOS Mobile Apps ⢠Android App ⢠Kindle ⢠Google TV ⢠Blackberry ⢠Windows Mobile YouTube Hulu UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 9. Hulu is still so device YouTube has centric that you can not ⢠Website ⢠watch every show on every ⢠Mobile Web device ⢠iOS Mobile Apps ⢠get Hulu on every device -- even on a paid subscription ⢠Android App ⢠Kindle ⢠Google TV ⢠Blackberry ⢠Windows Mobile YouTube Hulu UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 10. 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 Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 11. CSS Tricks And this is good, because if you get stuck -- just turn the UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 12. CSS Tricks And this is good, because if you get stuck -- just turn the UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 13. The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 14. 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 Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 15. Mary Anne Background Age: 34 Occupation: Marketing Consultant Attributes: Working mom, perpetually on- the-go, highly tech savvy, expects instant gratiďŹcation 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 UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 16. User Priorities - Mary Anne Smartphon Reade Laptop/ Mary Anne Wants to... Tablet e r 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 DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 17. 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 wiďŹ and: - Check email - Pay bills and check balances - Read 2-3 articles (news, ďŹnancial advice, etc.) UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 18. User Priorities - Bert Smartphon Laptop/ Bert Wants to... Reader Tablet e 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 UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 19. Hi Mary Anne | Sign Out My Honey Pot keeping your dough covered Dashboard | Transacations | Budgets | Invoicing | Pay Bills | Financial Advice Dashboard Tools Budgets Balances Goals Alerts / To Do American Express 10/1 pay Budget for October 2012 Visa 10/14 pay 0% 100% Budget Over? Invoice Hazelâs 10/22 invoice $3700 Total 3,500 $200 American Express 10/1 pay $200 Resturants 400 Visa 10/14 pay $1225 Travel 1,000 $225 Invoice Hazelâs 10/22 invoice $275 Shopping 200 $900 Stocks zoom Groceries 800 $100 60% $1025 40% Bills & Utilities 1,000 $25 20% 0% $75 -20% Entertainment 100 -40% edit budgets Jun Jul Aug Sept Oct Send Money Request Money Save on you next investment What would you like to do? Make A Transfer Pay a Bill Lorem ipsum dolor sit amet, consectetur adipi- Lorem ipsum dolor sit amet, consectetur adipi- sicing elit, sed do eiusmod tempor incididunt sicing elit, sed do eiusmod tempor incididunt From Account: To Payee: 12:22 To Account: How Much? When: September 28th How Much? When: Lorem ipsum dolor sit amet, consecte- tur adipisicing elit, sed do eiusmod Transfer Pay tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullam- co laboris nisi ut aliquip ex ea commo- Read More Banner 468 x 60 Banner 468 x 60 Banner 468 x 60 Dashboard | Transacations | Budgets | Invoicing | Pay Bills | Financial Advice Š 2012 My Honey Pot LLC, All Rights Reserved. Support | Forums | Sitemap | Privacy Policy UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 20. The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 21. Prioritization & Content Inventory Reade Table Laptop/ They Want to... Smartphone r t Desktop 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, X X X XX etc) Read small business/investment X X XX articles & blogs Manage budget X XX Flag items for follow-up X X X View stock prices X X UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 22. 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 Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 23. Introductions The Theory The Reality The Company & the Players Prioritization Exercise Some Basic Patterns UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 24. Responsive Patterns Off Canvas Zurb Playground UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 25. Responsive Patterns Off Canvas Zurb Playground UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 26. Responsive Patterns Tables Off Canvas Zurb Playground Playground Zurb UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 27. Responsive Patterns Tables Off Canvas Zurb Playground Playground Zurb UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 28. Responsive Patterns Menus & Other Tables Off Canvas Zurb Playground Mobile Patterns Zurb Playground Mobile Patterns UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 29. Responsive Patterns Menus & Other Tables Off Canvas Zurb Playground Mobile Patterns Zurb Playground Mobile Patterns UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 30. Responsive Patterns Menus & Other Tables Off Canvas Carousels Zurb Playground Mobile Patterns Zurb Playground codrops Mobile Patterns UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 31. More Responsive Patterns ⢠A list of response mobile patterns. http://bradfrost.github.com/this- is-responsive/patterns.html UXPA DC Dara Pressley @uxdiva - Lindy Roux User Focus 2012 @lindroux
- 32. Thank You Dara Pressley Lindy Roux - @uxdiva @lindroux Dara Pressley @uxdiva - Lindy Roux @lindroux
Hinweis der Redaktion
- [twitter] @uxdiva fun-fact: I went to the high school where grunge started #userfocus [/twitter]\n[twitter] @lindroux fun-fact: The country I’m from spoke 11 languages, I know 3 of them #userfocus [/twitter]\n
- \n
- \n
- \n
- \n\n
- \n
- 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.\n\n\n[twitter] For users, device centric design often results in a user experience that is not transferable across different devices #userfocus - @lindroux [/twitter]\n[twitter] A separate application for every device can mean inefficiencies in cost & upkeep, & it's just not future proof #userfocus - @lindroux [/twitter]\n
- 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.\n\n\n[twitter] For users, device centric design often results in a user experience that is not transferable across different devices #userfocus - @lindroux [/twitter]\n[twitter] A separate application for every device can mean inefficiencies in cost & upkeep, & it's just not future proof #userfocus - @lindroux [/twitter]\n
- [twitter] Websites are naturally responsive. It's something that you've done to the page that has made it unresponsive. #chriscoyier #userfocus [/twitter]\n
- \n
- \n
- \n
- [twitter] Increasingly professionals on the go will switch from device to device throughout their day. @lindroux #userfocus [/twitter]\n
- [twitter] Building personas that have mobility and multi-device qualities will help to identify key needs for your users #userfocus [/twitter]\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- [twitter] Check out Zurb Playground for responsive pattern demos #userfocus http://bit.ly/7sgiQ1 [/twitter]\n[twitter] Learn more about mobile patterns #userfocus http://bit.ly/s5gQix http://bit.ly/HjQC2q http://bit.ly/gaOFxr http://bit.ly/pYt151 [/twitter]\n\n\n
- [twitter] Check out Zurb Playground for responsive pattern demos #userfocus http://bit.ly/7sgiQ1 [/twitter]\n[twitter] Learn more about mobile patterns #userfocus http://bit.ly/s5gQix http://bit.ly/HjQC2q http://bit.ly/gaOFxr http://bit.ly/pYt151 [/twitter]\n\n\n
- [twitter] Check out Zurb Playground for responsive pattern demos #userfocus http://bit.ly/7sgiQ1 [/twitter]\n[twitter] Learn more about mobile patterns #userfocus http://bit.ly/s5gQix http://bit.ly/HjQC2q http://bit.ly/gaOFxr http://bit.ly/pYt151 [/twitter]\n\n\n
- [twitter] Check out Zurb Playground for responsive pattern demos #userfocus http://bit.ly/7sgiQ1 [/twitter]\n[twitter] Learn more about mobile patterns #userfocus http://bit.ly/s5gQix http://bit.ly/HjQC2q http://bit.ly/gaOFxr http://bit.ly/pYt151 [/twitter]\n\n\n
- [twitter] Check out Zurb Playground for responsive pattern demos #userfocus http://bit.ly/7sgiQ1 [/twitter]\n[twitter] Learn more about mobile patterns #userfocus http://bit.ly/s5gQix http://bit.ly/HjQC2q http://bit.ly/gaOFxr http://bit.ly/pYt151 [/twitter]\n\n\n
- [twitter] Check out Zurb Playground for responsive pattern demos #userfocus http://bit.ly/7sgiQ1 [/twitter]\n[twitter] Learn more about mobile patterns #userfocus http://bit.ly/s5gQix http://bit.ly/HjQC2q http://bit.ly/gaOFxr http://bit.ly/pYt151 [/twitter]\n\n\n
- [twitter] A list of response mobile patterns. http://bradfrost.github.com/this-is-responsive/patterns.html #userfocus [/twitter]\n\n\n\n
- [twitter] follow us @uxdiva & @lindroux [/twitter]\n