Mobile ux campdc2012

5 TIPS FOR RESPONSIVE DESIGNLessons from the trenchesSeptember 15, 2012

Intros

Forum One Communicationshttp://www.forumone.com

Forum One Communicationshttp://www.forumone.com

Forum One Communicationshttp://www.forumone.com

Staff  

Founded  

Experience

Exper2se  

50  staff  in  Alexandria,  Sea9le,  San  Francisco

1996  by  3  policy  analysts  and  web  enthusiasts

More  than  1,500  projects  for  more  than  500  clients

Web  strategy,  User  Experience,  Open  Source  Development,  Mobile,  Support  and  Growth

h"p://www.charitywater.org

1970

1971

1974

1976

1979

1981

1985

1994

2001

2007

2011

1969

20082009

Seoul

London

NYC

DC

Sea9le

Rabat

Hanoi

Yay!

h"p://www.charitywater.org

Hanoi.5  year

1  yearRabat

London9  years

7  yearsNYC

DC6  years

Sea9le8  mo.

18.5  yearsSeoul

Architecture9 years

User Experience7 years

Web Strategy5 years

Teaching3 years

Web Dev2 years

Non-profit1 year

Urban Design1 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

 Mobile  data  traffic  2011  is  8  2mes  the  total  internet  traffic  in  2000

Source:  Cisco  -­‐  Global  Mobile  Data  Traffic  Forecast  Update,  2011–2016

flickr:    sidpicky    CC  BY-­‐NC  2.0

More  iPhones  are  sold  each  day  than  babies  born

Source:  h"p://www.lukew.com/ff/entry.asp?1506

In  2012  there  will  be  more  cellphones  than  people  in  the  world

Source:  Cisco  -­‐  Global  Mobile  Data  Traffic  Forecast  Update,  2011–2016

flickr:    slickimages    CC  BY  2.0

 In  2013  globally  more  people  will  access  the  internet  through  mobile  

than  desktop  PCs

Source:  Morgan  Stanley  Research

55%  of  US  adults  owns  a  smartphone

Source:  Neilsen  /  July  2012  -­‐  h"p://blog.nielsen.com/nielsenwire/online_mobile/young-­‐adults-­‐and-­‐teens-­‐lead-­‐growth-­‐among-­‐smartphone-­‐owners/

flickr:    Ed  Yourdon    CC  BY-­‐NC-­‐SA  2.0

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

Hardware

Interac+onEnvironment

Time2(peak)User2Focus

Orienta+onSensors

Desktop

big$screenpower$supplyconsistent$networkkeyboard$and$mousesi5ng$(chair$and$desk)work$and$home8am$:$7pmextended$tasksmul=:taskfixedno

Tablet

medium&screenba-eryinconsistent&networkdirect&touchrelaxedhome5pm&8&10pmshort&taskssingle&taskportrait&and&landscapeyes

Smartphone

small%screenba+eryinconsistent%networkdirect%touchon%the%gohome,%idling,%workall%dayshort%taskssingle%taskportrait%and%landscapeyes

Credit:  flickr  -­‐  Xavier  Encinas  /  CC  License:  BY-­‐NC

Being Responsive

http://bit.ly/uvD115

5 Lessons from the trenches

Optimize layout and functionality.1

Optimize layout and functionality.

Optimize layout and functionality.

Optimize layout and functionality.

Navigation for touch. 2

Navigation for touch.

Navigation for touch.

Googlehttp://freedomhouse.org/

Web Page Title

Navigation for touch.

Navigation for touch.

Forms... Ugh.3

Forms... Ugh.h"p://contribute.barakobama.comh"p://cgap.org/content/contact-­‐cgap

Little things matter. 4

Little things matter.

Little things matter.

Little things matter.

Little things matter.

3rd party plugins, ain’t no party.

5

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 Fragmentationh"p://opensignalmaps.com/reports/fragmentaCon.php

Device Fragmentationh"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 | [email protected]