Your SlideShare is downloading. ×

Mobile ux campdc2012

879
views

Published on

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
879
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 5 TIPS FOR RESPONSIVE DESIGNLessons from the trenchesSeptember 15, 2012
  • 2. Intros
  • 3. Forum One Communications http://www.forumone.com
  • 4. Forum One Communications http://www.forumone.com
  • 5. Staff   50  staff  in  Alexandria,  Sea9le,  San   Francisco Founded   1996  by  3  policy  analysts  and  web   enthusiastsExperience More  than  1,500  projects  for  more   than  500  clients Exper2se   Web  strategy,  User  Experience,  Open   Source  Development,  Mobile,  Support   and  Growth Forum One Communications http://www.forumone.com
  • 6. 2011 h"p://www.charitywater.org 1994 1985 1979 London 1974 Sea9le 1971Yay! 2001 NYC Rabat 1976 Seoul 1969 DC 1981 2008 1970 2009 2007 Hanoi
  • 7. h"p://www.charitywater.org London 9  yearsSea9le 8  mo. NYC 7  years Seoul 18.5  years DC Rabat 6  years 1  year Hanoi .5  year
  • 8. Architecture User Experience Web Strategy Teaching Web Dev Urban Design Non-profit9 years 7 years 5 years 3 years 2 years 1 year 1 year
  • 9. What did I miss?
  • 10. h"p://www.prospectmagazine.co.uk/2009/11/diary-­‐5/
  • 11. h"p://www.kylebean.co.uk/por@olio/#mobileevoluCon
  • 12. Photo:  Nam  So-­‐Yoen,  Allmynews.com
  • 13. h"p://www.boston.com/bigpicture/2011/11/egypt_erupts_with_fresh_protes.html
  • 14. 14
  • 15. flickr:    sidpicky    CC  BY-­‐NC  2.0  Mobile  data  traffic  2011  is  8  2mes   the  total  internet  traffic  in  2000 Source:  Cisco  -­‐  Global  Mobile  Data  Traffic  Forecast  Update,  2011–2016
  • 16. More  iPhones  are  sold  each  day   than  babies  born Source:  h"p://www.lukew.com/ff/entry.asp?1506
  • 17. flickr:    slickimages    CC  BY  2.0In  2012  there  will  be  more  cellphones   than  people  in  the  world Source:  Cisco  -­‐  Global  Mobile  Data  Traffic  Forecast  Update,  2011–2016
  • 18.  In  2013  globally  more  people  will  access  the  internet  through  mobile   than  desktop  PCs Source:  Morgan  Stanley  Research
  • 19. flickr:    Ed  Yourdon    CC  BY-­‐NC-­‐SA  2.0 55%  of  US  adults  owns   a  smartphoneSource:  Neilsen  /  July  2012  -­‐  h"p://blog.nielsen.com/nielsenwire/online_mobile/young-­‐adults-­‐and-­‐teens-­‐ lead-­‐growth-­‐among-­‐smartphone-­‐owners/
  • 20. This  is  not  a  phone.
  • 21. Mobile Difference
  • 22. 23Credit:  flickr  -­‐  MeganMorris  /  CC  License:  BY-­‐NC-­‐SA
  • 23. 24Credit:  flickr  -­‐  shareski  /  CC  License:  BY-­‐NC-­‐SA
  • 24. 25Credit:  flickr  -­‐  Yourdon  /  CC  License:  BY-­‐NC-­‐SA
  • 25. Desktop Tablet SmartphoneHardware big$screen medium&screen small%screen power$supply ba-ery ba+ery consistent$network inconsistent&network inconsistent%networkInterac+on keyboard$and$mouse direct&touch direct%touchEnvironment si5ng$(chair$and$desk) relaxed on%the%go work$and$home home home,%idling,%workTime2(peak) 8am$:$7pm 5pm&8&10pm all%dayUser2Focus extended$tasks short&tasks short%tasks mul=:task single&task single%taskOrienta+on fixed portrait&and&landscape portrait%and%landscapeSensors no yes yes
  • 26. Credit:  flickr  -­‐  Xavier  Encinas  /  CC  License:  BY-­‐NC
  • 27. Being Responsive
  • 28. http://bit.ly/uvD115
  • 29. 5 Lessons from the trenches
  • 30. 1Optimize layout and functionality.
  • 31. Optimize layout and functionality.
  • 32. Optimize layout and functionality.
  • 33. Optimize layout and functionality.
  • 34. 2Navigation for touch.
  • 35. Navigation for touch.
  • 36. Web Page Titlehttp://freedomhouse.org/ GoogleNavigation for touch.
  • 37. Navigation for touch.
  • 38. Navigation for touch.
  • 39. 3Forms... Ugh.
  • 40. h"p://cgap.org/content/contact-­‐cgap h"p://contribute.barakobama.com Forms... Ugh.
  • 41. 4Little things matter.
  • 42. Little things matter.
  • 43. Little things matter.
  • 44. Little things matter.
  • 45. Little things matter.
  • 46. 53rd party plugins, ain’t no party.
  • 47. 3rd party plugins, ain’t no party.
  • 48. 3rd party plugins, ain’t no party.
  • 49. 3rd party plugins, ain’t no party.
  • 50. Epilogue: Testing bites.
  • 51. Device Fragmentation h"p://opensignalmaps.com/reports/fragmentaCon.php
  • 52. Device Fragmentation h"p://opensignalmaps.com/reports/fragmentaCon.php
  • 53. Responsinator.com
  • 54. Adobe Shadowh"p://labs.adobe.com/technologies/shadow/
  • 55. Proty
  • 56. Proty
  • 57. Proty
  • 58. THANK YOU!Any questions?Nam-ho Park | npark@forumone.com