• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile ux campdc2012
 

Mobile ux campdc2012

on

  • 1,009 views

 

Statistics

Views

Total Views
1,009
Views on SlideShare
1,008
Embed Views
1

Actions

Likes
0
Downloads
7
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    Mobile ux campdc2012 Mobile ux campdc2012 Presentation Transcript

    • 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  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
    • 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
    • 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
    • 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
    • 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  traffic  in  2000 Source:  Cisco  -­‐  Global  Mobile  Data  Traffic  Forecast  Update,  2011–2016
    • More  iPhones  are  sold  each  day   than  babies  born Source:  h"p://www.lukew.com/ff/entry.asp?1506
    • 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
    •  In  2013  globally  more  people  will  access  the  internet  through  mobile   than  desktop  PCs Source:  Morgan  Stanley  Research
    • 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/
    • 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 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
    • 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