The document provides 5 tips for responsive web design based on lessons learned from building responsive websites. The tips are to 1) optimize layout and functionality for different screens, 2) design navigation that works for touchscreens, 3) improve responsive form design which is challenging, 4) pay attention to small details, and 5) be aware that third party plugins may not be responsive so test extensively. It also discusses tools for testing responsiveness across various devices to ensure a good user experience on both mobile and desktop.

1. 5 TIPS FOR RESPONSIVE DESIGN
Lessons from the trenches
September 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
enthusiasts
Experience 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
1971
Yay! 2001 NYC
Rabat
1976 Seoul
1969
DC 1981
2008
1970 2009
2007 Hanoi

7. h"p://www.charitywater.org
London
9
years
Sea9le
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-profit
9 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.0
In
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
smartphone
Source:
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

23. 23
Credit:
flickr
-­‐
MeganMorris
/
CC
License:
BY-­‐NC-­‐SA

24. 24
Credit:
flickr
-­‐
shareski
/
CC
License:
BY-­‐NC-­‐SA

25. 25
Credit:
flickr
-­‐
Yourdon
/
CC
License:
BY-­‐NC-­‐SA

26. Desktop Tablet Smartphone
Hardware big$screen medium&screen small%screen
power$supply ba-ery ba+ery
consistent$network inconsistent&network inconsistent%network
Interac+on keyboard$and$mouse direct&touch direct%touch
Environment si5ng$(chair$and$desk) relaxed on%the%go
work$and$home home home,%idling,%work
Time2(peak) 8am$:$7pm 5pm&8&10pm all%day
User2Focus extended$tasks short&tasks short%tasks
mul=:task single&task single%task
Orienta+on fixed portrait&and&landscape portrait%and%landscape
Sensors no yes yes

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

28. Being Responsive

29. http://bit.ly/uvD115

31. 5 Lessons from the trenches

32. 1
Optimize layout and functionality.

33. Optimize layout and functionality.

34. Optimize layout and functionality.

35. Optimize layout and functionality.

36. 2
Navigation for touch.

37. Navigation for touch.

38. Web Page Title
http://freedomhouse.org/ Google
Navigation for touch.

39. Navigation for touch.

40. Navigation for touch.

41. 3
Forms... Ugh.

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

43. 4
Little things matter.

44. Little things matter.

45. Little things matter.

46. Little things matter.

47. Little things matter.

48. 5
3rd party plugins, ain’t no party.

49. 3rd party plugins, ain’t no party.

50. 3rd party plugins, ain’t no party.

51. 3rd party plugins, ain’t no party.

52. Epilogue: Testing bites.

53. Device Fragmentation
h"p://opensignalmaps.com/reports/fragmentaCon.php

54. Device Fragmentation
h"p://opensignalmaps.com/reports/fragmentaCon.php

55. Responsinator.com

56. Adobe Shadow
h"p://labs.adobe.com/technologies/shadow/

57. Proty

58. Proty

59. Proty

60. THANK YOU!
Any questions?
Nam-ho Park | npark@forumone.com