This document summarizes a presentation about responsive web design (RWD). The presentation covers: 1. Why RWD was needed due to the rise of smartphones and tablets. 2. The benefits of RWD, including improved reach, better SEO, an improved customer experience, and increased profits. 3. Tips for getting ahead of the curve with RWD, such as making site performance a top priority and transitioning an existing site to RWD in stages rather than all at once.

1. JEREMY OSBORN
Academic Director, Aquent Gymnasium
Web designer/developer since the 20th century
Author of books on web technology
Corporate consultant and trainer
Follow me on Twitter: @jeremias

2. RESPONSIVE WEB DESIGN IS CHANGING
THE WORLD

3. TODAY’S PRESENTATION
1. Why Responsive Web Design was needed
2. The benefits of RWD
3. Getting ahead of the curve (The future of RWD)

4. A BRIEF HISTORY OF HOW WE GOT HERE
1. WHY RESPONSIVE DESIGN WAS NEEDED

5. 4 CATEGORIES
FOR “MOBILE”

6. APPS
DESKTOP SITE
(SCALED)
M.DOT SITE
RESPONSIVE SITE
(MOBILE-ONLY)

7. RWD IS 4 YEARS OLD

8. AT ITS MOST BASIC
1. Fluid Grids
2. Flexible Images
3. Media Queries

11. IN MAY, 2010 . . .

12. THE 3G WAS
THE LATEST
IPHONE

13. THE FIRST IPAD
WAS ONLY
6 WEEKS OLD

14. THE HTC
DROID
INCREDIBLE
WAS THE
HOTTEST
ANDROID
PHONE ON
THE MARKET

15. THE WEB
WAS THIS
1024 X 768
!
960 X 768
!
800 X 600

16. I FIND YOUR LACK OF WEB BROWSERS . . . DISTURBING

17. Much has changed in 4 years

18. SMARTPHONE
AND TABLET
GROWTH HAS
ROCKETED

19. PERCENTAGE OF AMERICANS WHO OWN . . .

20. DESKTOP &
LAPTOP SALES
IN DECLINE

22. WORLD COMMUNICATION IS
CHANGING DRAMATICALLY

23. http://www.internetretailer.com/2014/03/06/consumers-spend-33-hours-day-their-smartphones
CONSUMERS SPENDING
UP TO 3.3 HOURS/DAY ON
THEIR SMARTPHONES!
- Digital marketing firm ExactTarget

24. Earth population = 7 Billion
In 2011 there were 6 Billion mobile
subscriptions1
!
1
http://www.itu.int/ITU-D/ict/facts/2011/material/ICTFactsFigures2011.pdf
87%

26. “I think PCs are going to be like trucks. Less people
will need them. And this transformation is going to
make some people uneasy . . .”
!
-Steve Jobs
June 1, 2010

27. MOBILE
MIGRATION

28. RWD ADDRESSES THE
UNKNOWN FUTURE
OF THE WEB

29. LET US EXAMINE THE HYPE!

32. TECHNOLOGY TRIGGER

33. INFLATED EXPECTATIONS

34. TROUGH OF DISILLUSIONMENT

35. SLOPE OF ENLIGHTENMENT

36. PLATEAU OF PRODUCTIVITY

38. REALITY
CHECK

39. http://www.guypo.com/mobile/rwd-ratio-in-top-100000-websites-refined/

40. WHY?

41. WE HAVE A LOT OF “UNLEARNING” TO DO!

42. TECHNOLOGY CHALLENGES
USER INTERFACE CHALLENGES
WORKFLOW CHALLENGES

43. http://www.guypo.com/mobile/rwd-ratio-in-top-100000-websites-refined/

44. 2. THE BENEFITS OF RWD

45. BENEFIT #1
RWD IMPROVES REACH

46. To understand the good,
let us first look at the bad

47. INCONSISTENT EXPERIENCE
“m.dot site”

48. LIMITED REACH

49. LIMITED REACH

50. WHAT WE WANT IS . . .

51. CONSISTENT EXPERIENCE!

52. BENEFIT #2
THE GOOGLE LIKES RWD

53. CONTENT ON “M.DOT” SITES IS
HARDER TO SHARE (AND INDEX!)

56. IT CAN GO WRONG THE OTHER
WAY AS WELL

59. ANOTHER EXAMPLE OF AN
M.DOT SITE

61. GOOGLE’S RECOMMENDATION
IS TO USE RWD

62. https://developers.google.com/webmasters/smartphone-sites/

63. USER EXPERIENCE IS BECOMING
MORE RELEVANT FOR SEO

64. “The goal of many of our ranking changes is to help
searchers find sites that provide a great user
experience and fulfill their information needs.”
!
-Matt Cutts, Google
4/12, 2012

65. BENEFIT #3
RWD CAN IMPROVE
CUSTOMER EXPERIENCE

66. READ THIS
http://www.thinkwithgoogle.com/research-studies/

67. CONSUMER BEHAVIOR ACROSS
DEVICES MAY SURPRISE YOU

68. THE STARTING
POINT FOR
COMPLEX
ACTIVITIES IS
STILL THE PC
Planning a Trip
Managing Finances
Shopping Online
FOR NOW!

69. IN 2012 . . .
PCS: KEPT US PRODUCTIVE AND INFORMED
!
SMARTPHONES: KEPT US CONNECTED
TABLETS: KEPT US ENTERTAINED

70. MOVING
FORWARD . . .
!
ALL BETS ARE
OFF

71. LETS TALK ABOUT THE
CROSS-DEVICE EXPERIENCE

72. GOAL:
PREVENT
FRUSTRATION
WHEN USER
SWITCHES CONTEXT

73. GOAL:
PREVENT
FRUSTRATION
WHEN USER
SWITCHES CONTEXT

77. BENEFIT #4
RWD CAN IMPROVE THE
BOTTOM LINE

78. Thanksgiving/Black Friday 2013 (Online Sales)
73.2% of all revenue came from computer
26.8% came from mobile devices
176% increase for mobile over 2012

79. NUMBER OF TABLETS
SHIPPING IN 2014?
315 MILLION

80. THE IMPACT IS
ALREADY
MEASURABLE

81. http://electricpulp.com/notes/ecommerce-and-responsive-web-design/

82. AFTER REDESIGNING:

83. RWD SUCCESS STORY

84. Results
New site converts smartphone and tablet users at higher rate than old
site converted overall
!
Online sales via smartphone and tablet
devices have grown tenfold year on year
http://www.thinkwithgoogle.com/case-studies/plusnet-responsive-web-design.html

85. SUMMARY OF RWD BENEFITS
1. Improves your company’s reach
2. Improves SEO
3. Improves customer experience
4. Improves bottom line

86. RWD DOES NONE OF THESE
THINGS BY ITSELF!

87. AN OVERALL WEB STRATEGY SHOULD INCLUDE
- Prioritizing user experience
- Integrating content strategy
- Solid technical foundation (Progressive enhancement)

88. SO WHERE IS
RESPONSIVE
HEADED?

89. SOME ADVICE ON HOW TO PREPARE FOR THE FUTURE
3. GETTING AHEAD OF THE CURVE

90. TIP #1
MAKE SITE
PERFORMANCE A TOP
PRIORITY

91. THE WEB IS SLOWER THAN EVER
The average Fortune 500 homepage takes
9.3 seconds to load.
That’s a 21% slowdown from 2013!
http://www.radware.com/winter-sotu2014/

92. WHY?

93. PAGE SIZE
CONTINUES
TO INCREASE
1.4 MB = Average page size

94. THE
PENALTIES
A 1 second delay results in:
- 3.5% decrease in conversion rate
- 2.1% decrease in shopping cart size
- 9.4% fewer page views
- 8.3% increase in bounce rate
http://www.radware.com/winter-sotu2014/

95. HOW USERS FEEL:
Angry
Stressed Out
Anxious

96. There is a direct and measurable link between
website performance and website revenue.

97. SO WHY DO WE ACCEPT
THESE PENALTIES?*

98. SO WHY DO WE ACCEPT
THESE PENALTIES?*
* I HAVE NO IDEA!

99. A SIMPLE TEST
Does your site take less than 3 seconds to load?
You win!
Does your site take more than 3 seconds to load?
You lose!

100. “I GET IT, BUT IT’S MY BOSS
WHO NEEDS CONVINCING!”

101. ASK THIS:
What do we earn per month if our traffic increases
one percent?
What do we earn per month if our conversion rate
increases one percent?

102. ASK YOURSELF:
How many customers can we afford to lose
before our brand takes a hit?

103. A site must look good on all devices, but making it
fast might be more important.
KEY TAKEAWAY

104. RESOURCE

105. TIP #2
YOU DON’T HAVE TO DO
IT ALL AT ONCE

106. REDESIGNING A SITE
FROM SCRATCH IS
IDEAL, BUT . . .

107. “RETROFITTING” A SITE
IS A SHORT-TERM
OPTION

108. http://webstandardssherpa.com/reviews/responsive-retrofitting/

109. OR TAKE IT
ONE STEP AT A TIME . . .

110. THE BBC: TRANSITIONING SLOWLY
On a smartphone
everyone gets the
responsive version

111. THE BBC: TRANSITIONING SLOWLY
Desktop (Fixed) Desktop (Responsive)

112. THE BBC: TRANSITIONING SLOWLY

113. RWD IS AWESOME!
WHERE DO I START?

114. RESOURCES

115. PRIMARY RESOURCE

116. BIASED RESOURCE!
thegymnasium.com

117. 12 LESSONS
6+ HOURS OF VIDEO
QUIZZES
PROJECTS & ASSIGNMENTS
CLASS FORUM

118. THANK YOU!

119. Q & A