5 TIPS FOR RESPONSIVE DESIGNLessons from the trenchesSeptember 15, 2012
Intros
Forum One Communications      http://www.forumone.com
Forum One Communications      http://www.forumone.com
Staff	   50	  staff	  in	  Alexandria,	  Sea9le,	  San	                   Francisco  Founded	   1996	  by	  3	  policy	  ana...
2011                                                                   h"p://www.charitywater.org                         ...
h"p://www.charitywater.org                              London                              9	  yearsSea9le 8	  mo.     NY...
Architecture   User Experience   Web Strategy   Teaching Web Dev Urban Design Non-profit9 years        7 years           5 ...
What did I miss?
h"p://www.prospectmagazine.co.uk/2009/11/diary-­‐5/
h"p://www.kylebean.co.uk/por@olio/#mobileevoluCon
Photo:	  Nam	  So-­‐Yoen,	  Allmynews.com
h"p://www.boston.com/bigpicture/2011/11/egypt_erupts_with_fresh_protes.html
14
flickr:	  	  sidpicky	  	  CC	  BY-­‐NC	  2.0	  Mobile	  data	  traffic	  2011	  is	  8	  2mes	      the	  total	  internet	 ...
More	  iPhones	  are	  sold	  each	  day	            than	  babies	  born           Source:	  h"p://www.lukew.com/ff/entry....
flickr:	  	  slickimages	  	  CC	  BY	  2.0In	  2012	  there	  will	  be	  more	  cellphones	           than	  people	  in	...
 In	  2013	  globally	  more	  people	  will	  access	  the	  internet	  through	  mobile	                  than	  desktop...
flickr:	  	  Ed	  Yourdon	  	  CC	  BY-­‐NC-­‐SA	  2.0                      55%	  of	  US	  adults	  owns	                 ...
This	  is	  not	  a	  phone.
Mobile Difference
23Credit:	  flickr	  -­‐	  MeganMorris	  /	  CC	  License:	  BY-­‐NC-­‐SA
24Credit:	  flickr	  -­‐	  shareski	  /	  CC	  License:	  BY-­‐NC-­‐SA
25Credit:	  flickr	  -­‐	  Yourdon	  /	  CC	  License:	  BY-­‐NC-­‐SA
Desktop                  Tablet                   SmartphoneHardware      big$screen               medium&screen          ...
Credit:	  flickr	  -­‐	  Xavier	  Encinas	  /	  CC	  License:	  BY-­‐NC
Being Responsive
http://bit.ly/uvD115
5 Lessons from the trenches
1Optimize layout and functionality.
Optimize layout and functionality.
Optimize layout and functionality.
Optimize layout and functionality.
2Navigation for touch.
Navigation for touch.
Web Page Titlehttp://freedomhouse.org/                    GoogleNavigation for touch.
Navigation for touch.
Navigation for touch.
3Forms... Ugh.
h"p://cgap.org/content/contact-­‐cgap   h"p://contribute.barakobama.com                    Forms... Ugh.
4Little things matter.
Little things matter.
Little things matter.
Little things matter.
Little things matter.
53rd party plugins, ain’t no party.
3rd party plugins, ain’t no party.
3rd party plugins, ain’t no party.
3rd party plugins, ain’t no party.
Epilogue: Testing bites.
Device Fragmentation h"p://opensignalmaps.com/reports/fragmentaCon.php
Device Fragmentation h"p://opensignalmaps.com/reports/fragmentaCon.php
Responsinator.com
Adobe Shadowh"p://labs.adobe.com/technologies/shadow/
Proty
Proty
Proty
THANK YOU!Any questions?Nam-ho Park | npark@forumone.com
Mobile ux campdc2012
Mobile ux campdc2012
Upcoming SlideShare
Loading in...5
×

Mobile ux campdc2012

927

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

No notes for slide

Mobile ux campdc2012

  1. 1. 5 TIPS FOR RESPONSIVE DESIGNLessons from the trenchesSeptember 15, 2012
  2. 2. Intros
  3. 3. Forum One Communications http://www.forumone.com
  4. 4. Forum One Communications http://www.forumone.com
  5. 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. 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. 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. 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. 9. What did I miss?
  10. 10. h"p://www.prospectmagazine.co.uk/2009/11/diary-­‐5/
  11. 11. h"p://www.kylebean.co.uk/por@olio/#mobileevoluCon
  12. 12. Photo:  Nam  So-­‐Yoen,  Allmynews.com
  13. 13. h"p://www.boston.com/bigpicture/2011/11/egypt_erupts_with_fresh_protes.html
  14. 14. 14
  15. 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. 16. More  iPhones  are  sold  each  day   than  babies  born Source:  h"p://www.lukew.com/ff/entry.asp?1506
  17. 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. 18.  In  2013  globally  more  people  will  access  the  internet  through  mobile   than  desktop  PCs Source:  Morgan  Stanley  Research
  19. 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. 20. This  is  not  a  phone.
  21. 21. Mobile Difference
  22. 22. 23Credit:  flickr  -­‐  MeganMorris  /  CC  License:  BY-­‐NC-­‐SA
  23. 23. 24Credit:  flickr  -­‐  shareski  /  CC  License:  BY-­‐NC-­‐SA
  24. 24. 25Credit:  flickr  -­‐  Yourdon  /  CC  License:  BY-­‐NC-­‐SA
  25. 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. 26. Credit:  flickr  -­‐  Xavier  Encinas  /  CC  License:  BY-­‐NC
  27. 27. Being Responsive
  28. 28. http://bit.ly/uvD115
  29. 29. 5 Lessons from the trenches
  30. 30. 1Optimize layout and functionality.
  31. 31. Optimize layout and functionality.
  32. 32. Optimize layout and functionality.
  33. 33. Optimize layout and functionality.
  34. 34. 2Navigation for touch.
  35. 35. Navigation for touch.
  36. 36. Web Page Titlehttp://freedomhouse.org/ GoogleNavigation for touch.
  37. 37. Navigation for touch.
  38. 38. Navigation for touch.
  39. 39. 3Forms... Ugh.
  40. 40. h"p://cgap.org/content/contact-­‐cgap h"p://contribute.barakobama.com Forms... Ugh.
  41. 41. 4Little things matter.
  42. 42. Little things matter.
  43. 43. Little things matter.
  44. 44. Little things matter.
  45. 45. Little things matter.
  46. 46. 53rd party plugins, ain’t no party.
  47. 47. 3rd party plugins, ain’t no party.
  48. 48. 3rd party plugins, ain’t no party.
  49. 49. 3rd party plugins, ain’t no party.
  50. 50. Epilogue: Testing bites.
  51. 51. Device Fragmentation h"p://opensignalmaps.com/reports/fragmentaCon.php
  52. 52. Device Fragmentation h"p://opensignalmaps.com/reports/fragmentaCon.php
  53. 53. Responsinator.com
  54. 54. Adobe Shadowh"p://labs.adobe.com/technologies/shadow/
  55. 55. Proty
  56. 56. Proty
  57. 57. Proty
  58. 58. THANK YOU!Any questions?Nam-ho Park | npark@forumone.com
  1. A particular slide catching your eye?

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

×