Responsive Design alone doesn't create great mobile experiences. We need to combine other ideas together to make mobile friendly, future friendly websites. This "code free" presentation outlines how ideas like mobile first, progressive enhancement, Structured Content, and Performance budgets are all important components for building websites that support current devices along with future ones. --- Originally Presented at Magnet 2013 - Canadian Magazine Publisher's Conference. "Responsive Design - One website for Many Devices" --- Video recording of the session: http://www.slideshare.net/afoster0/responsive-design-for-publishers-what-it-takes-to-get-mobile-friendly-future-friendly

1. magnet.magazinescanada.ca | @MagNetCanada | #MagNet13
@finteractivelinkedin.responsivedesign.ca
DG6: Responsive Design
One Website for Many Devices
Aidan Foster - Project Manager & Responsive Design Specialist
Friday, June 7, 2013

2. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

3. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
WHY MOBILE?
WHY RESPONSIVE?
Friday, June 7, 2013

4. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
source: comScore 2013 - “Canada Digital Future In Focus”
Canadian Internet Usage
Friday, June 7, 2013

5. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
source: comScore 2013 - “Canada Digital Future In Focus”
Canadian Internet Usage
Friday, June 7, 2013

6. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
source: comScore 2013 - “Canada Digital Future In Focus”
Canadian Internet Usage
Avg 41.3 hrs / month
#2 world wide
Friday, June 7, 2013

7. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
source: comScore 2013 - “Canada Digital Future In Focus”
Canadian Internet Usage
Avg 3731 pages / month
#1 World Wide
Avg 41.3 hrs / month
#2 world wide
Friday, June 7, 2013

8. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Sales: Q1 2013 vs Q1 2012
Friday, June 7, 2013

9. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
IDC - http://www.idc.com/getdoc.jsp?containerId=prUS24065413#
Global PC
shipments
-18.3%
Sales: Q1 2013 vs Q1 2012
Friday, June 7, 2013

10. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Global
iPhone Sales
+29%
IDC - http://www.idc.com/getdoc.jsp?containerId=prUS24065413#
Global PC
shipments
-18.3%
Sales: Q1 2013 vs Q1 2012
statista - http://www.statista.com/statistics/12743/worldwide-apple-iphone-sales-since-3rd-quarter-2007/
Friday, June 7, 2013

11. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
source: comScore Q1 2013 - “Mobile Future In Focus”
Friday, June 7, 2013

12. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
1 in 3 minutes Spent Online
is on a Mobile Device
source: comScore Q1 2013 - “Mobile Future In Focus”
37%
63%
Desktop Mobile
Friday, June 7, 2013

13. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
“Mobile-Only” Internet Access (US)
source: Harvard Business Review / PEW Research 2012
http://blogs.hbr.org/cs/2013/05/the_rise_of_the_mobile-only_us.html
Access Cellular Internet (All)
Primarily Use Mobile (All)
Primarily Use Mobile (18-34)
30% 60%
45%
34%
55%
Friday, June 7, 2013

14. Multi Device Usage
source: http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html
Friday, June 7, 2013

15. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

16. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
?Friday, June 7, 2013

17. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Native Apps
Friday, June 7, 2013

18. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Native Apps
Friday, June 7, 2013

19. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Pros
Friday, June 7, 2013

20. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Pros
Friday, June 7, 2013

21. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Pros
Chime
New Content
Friday, June 7, 2013

22. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Pros
Chime
New Content
Friday, June 7, 2013

23. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Pros
Chime
New Content
Friday, June 7, 2013

24. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Cons
Friday, June 7, 2013

25. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
$$$
Cons
Friday, June 7, 2013

26. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
$$$ $$$
Cons
$$$
Friday, June 7, 2013

27. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
<www>?
Native Apps
Friday, June 7, 2013

28. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
<www>?
Native Apps
Friday, June 7, 2013

29. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
m.website.com
Dedicated Mobile Sites
Friday, June 7, 2013

30. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Server Side
DESKTOP
SITE
MOBILE
SITE
Friday, June 7, 2013

31. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Server Side
DESKTOP
SITE
MOBILE
SITE
Friday, June 7, 2013

32. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Server Side
DESKTOP
SITE
MOBILE
SITE
<Safari 6.1 on OSX>
Friday, June 7, 2013

33. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Server Side
DESKTOP
SITE
MOBILE
SITE
Friday, June 7, 2013

34. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Server Side
DESKTOP
SITE
MOBILE
SITE
Friday, June 7, 2013

35. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Server Side
DESKTOP
SITE
MOBILE
SITE
<Safari 5 on iOS>
Friday, June 7, 2013

36. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Server Side
DESKTOP
SITE
MOBILE
SITE
Friday, June 7, 2013

37. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Server Side
DESKTOP
SITE
MOBILE
SITE
Friday, June 7, 2013

38. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Server Side
DESKTOP
SITE
MOBILE
SITE
<IE 11 on XBOX ONE???>
?
Friday, June 7, 2013

39. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Pros: Dedicated Mobile
Can have a highly optimized UI
Performance
related: http://www.queness.com/post/13899/which-is-better-dedicated-or-responsive-mobile-designa
Friday, June 7, 2013

40. Cons
Bad for SEO: Google
Doesn’t like multiple
duplicated content
http://wtfmobileweb.com/
Content Parity with
Desktop can be hard
Cost (multiple sites)
Friday, June 7, 2013

41. Cons
Bad for SEO: Google
Doesn’t like multiple
duplicated content
http://wtfmobileweb.com/
Content Parity with
Desktop can be hard
Cost (multiple sites)
Friday, June 7, 2013

42. Responsive Design
Bostonglobe.com
Friday, June 7, 2013

43. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
Friday, June 7, 2013

44. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
Friday, June 7, 2013

45. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
WEB SITE
ALL LAYOUTS
ALL MEDIA
Friday, June 7, 2013

46. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
WEB SITE
DEVICE CHOOSES
BEST LAYOUT
ALL LAYOUTS
ALL MEDIA
Friday, June 7, 2013

47. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive Design
Friday, June 7, 2013

48. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive Design
“Default” Approach
Least expensive way to
support more devices
Friday, June 7, 2013

49. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

50. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
MOBILE FRIENDLY
FUTURE FRIENDLY
Friday, June 7, 2013

51. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

52. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

53. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

54. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

55. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

56. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

57. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

58. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

59. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

60. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

61. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

62. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
HOW DO WE
BUILD FOR THE
FUTURE?
Friday, June 7, 2013

63. RESPONSIVE
DESIGN
Friday, June 7, 2013

64. RESPONSIVE
DESIGN
PROGRESSIVE
ENHANCEMENT
(coding structure)
Friday, June 7, 2013

65. RESPONSIVE
DESIGN
PROGRESSIVE
ENHANCEMENT
(coding structure)
MOBILE FIRST
(design strategy)
Friday, June 7, 2013

66. RESPONSIVE
DESIGN
PROGRESSIVE
ENHANCEMENT
(coding structure)
MOBILE FIRST
(design strategy)
CONTENT STRATEGY
(structured content)
Friday, June 7, 2013

67. RESPONSIVE
DESIGN
PROGRESSIVE
ENHANCEMENT
(coding structure)
MOBILE FIRST
(design strategy)
CONTENT STRATEGY
(structured content)
PERFORMANCE BUDGET
(core value)
Friday, June 7, 2013

68. RESPONSIVE
DESIGN
PROGRESSIVE
ENHANCEMENT
(coding structure)
MOBILE FIRST
(design strategy)
CONTENT STRATEGY
(structured content)
PERFORMANCE BUDGET
(core value)
Friday, June 7, 2013

69. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
PROGRESSIVE
ENHANCEMENT
(coding structure)
Friday, June 7, 2013

70. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
Friday, June 7, 2013

71. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
Friday, June 7, 2013

72. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
WEB SITE
ALL LAYOUTS
ALL MEDIA
Friday, June 7, 2013

73. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
WEB SITE
DEVICE CHOOSES
BEST LAYOUT
ALL LAYOUTS
ALL MEDIA
Friday, June 7, 2013

74. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
WEB SITE
ALL LAYOUTS
ALL MEDIA
Friday, June 7, 2013

75. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
WEB SITE
ALL LAYOUTS
ALL MEDIA
Friday, June 7, 2013

76. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
WEB SITE
ALL LAYOUTS
ALL MEDIA
SHARED LAYOUTS
TEXT CONTENT
Friday, June 7, 2013

77. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
WEB SITE
ALL LAYOUTS
ALL MEDIA
SHARED LAYOUTS
TEXT CONTENT
DEVICE CHOOSES
BEST LAYOUT
Friday, June 7, 2013

78. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Responsive: Client Side
WEB SITE
ALL LAYOUTS
ALL MEDIA
SHARED LAYOUTS
TEXT CONTENT
DETECT FEATURES
DEVICE CHOOSES
BEST LAYOUT
Friday, June 7, 2013

79. Responsive: Client Side
WEB SITE
ALL LAYOUTS
ALL MEDIA
SHARED LAYOUTS
TEXT CONTENT
DETECT FEATURES
DEVICE CHOOSES
BEST LAYOUT
Friday, June 7, 2013

80. Responsive: Client Side
SITE
Big Pictures
Small Pictures
Touch Controls
xbox styled
layout
YOUTS
MEDIA
LAYOUTS
ONTENT
DETECT FEATURES
Big Pictures
LOAD ONLY
WHAT’S NEEDED
DEVICE CHOOSES
BEST LAYOUT
Friday, June 7, 2013

81. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Progressive Enhancement
Example: Slide Show
http://abitgone.github.io/jQuery-Plugins/Carousel/
Friday, June 7, 2013

82. Old Blackberry:
(No Javascript)
Basic Experience
Small Images
Friday, June 7, 2013

83. Large Images
Enhanced w/ Animation
Extra UI Elements
Friday, June 7, 2013

84. Large Images
Enhanced w/ Animation
Extra UI Elements
Friday, June 7, 2013

85. Add Touch / Swipe
Retina Images
Friday, June 7, 2013

86. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
MOBILE FIRST
(design strategy)
Friday, June 7, 2013

87. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Mobile First - Design Strategy
http://abookapart.com/products/mobile-first
video (60min) https://vimeo.com/64313805
Friday, June 7, 2013

88. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
USER GOAL
(Task / Content)
Friday, June 7, 2013

89. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
USER GOAL
(Task / Content)
Cluttered
UI
Friday, June 7, 2013

90. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
USER GOAL
(Task / Content)
Cluttered
UI
Multiple
Steps
Sifting
Content
Friday, June 7, 2013

91. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
USER GOAL
(Task / Content)
Cluttered
UI
Multiple
Steps
Sifting
Content
Friday, June 7, 2013

92. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
MY GOAL
(Task / Content)
Friday, June 7, 2013

93. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
MY GOAL
(Task / Content)
Cluttered
UI
Friday, June 7, 2013

94. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
MY GOAL
(Task / Content)
Cluttered
UI
Multiple
Steps
Sifting
Content
Friday, June 7, 2013

95. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
MY GOAL
(Task / Content)
Cluttered
UI
Multiple
Steps
Sifting
Content
Friday, June 7, 2013

96. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
USER GOAL
Friday, June 7, 2013

97. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
USER GOAL
Clean UI Tasks Identified
Friday, June 7, 2013

98. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
USER GOAL
Clean UI Tasks Identified
Friday, June 7, 2013

99. Friday, June 7, 2013

100. Friday, June 7, 2013

101. Friday, June 7, 2013

102. Friday, June 7, 2013

103. Friday, June 7, 2013

104. Friday, June 7, 2013

105. Friday, June 7, 2013

106. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
CONTENT STRATEGY
(structured content)
Friday, June 7, 2013

107. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Mobile Design
Desktop Design
Friday, June 7, 2013

108. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Mobile Design
Desktop Design
Content First
Design
Friday, June 7, 2013

109. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Structured Content
Friday, June 7, 2013

110. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Structured Content
1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

111. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Structured Content
1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

112. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Structured Content
1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

113. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Structured Content
1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

114. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Structured Content
1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

115. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Structured Content
1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

116. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Structured Content
1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

117. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Structured Content
1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

118. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Structured Content
1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

119. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
https://vimeo.com/47171001#at=0
http://responsivedesignworkflow.com/
Friday, June 7, 2013

120. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
http://karenmcgrane.com/2012/09/04/adapting-ourselves-to-adaptive-content-video-slides-and-transcript-oh-my/
http://www.abookapart.com/products/content-strategy-for-mobile
Friday, June 7, 2013

121. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
PERFORMANCE BUDGET
(core value)
Friday, June 7, 2013

122. Page Load Time
Seconds
“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSM
Friday, June 7, 2013

123. Page Load Time
0 2 4 6 8 10
10
4
1
0.1
Seconds
“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSM
Friday, June 7, 2013

124. Page Load Time
0 2 4 6 8 10
10
4
1
0.1
Seconds
“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSM
Friday, June 7, 2013

125. Page Load Time
0 2 4 6 8 10
10
4
1
0.1 Instant
Seconds
“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSM
Friday, June 7, 2013

126. Page Load Time
0 2 4 6 8 10
10
4
1
0.1 Instant
Freely Moving
Seconds
“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSM
Friday, June 7, 2013

127. Page Load Time
0 2 4 6 8 10
10
4
1
0.1 Instant
Freely Moving
Mind Wanders
Seconds
“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSM
Friday, June 7, 2013

128. Page Load Time
0 2 4 6 8 10
10
4
1
0.1 Instant
Freely Moving
Mind Wanders
No Longer Able to Focus on Task
Seconds
“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSM
Friday, June 7, 2013

129. Page Load Time
0 2 4 6 8 10
10
4
1
0.1 Instant
Freely Moving
Mind Wanders
No Longer Able to Focus on Task
Seconds
“Breaking the 1000ms Time to Glass Mobile Barrier” http://www.youtube.com/watch?v=Il4swGfTOSM
Friday, June 7, 2013

130. http://www.gomez.com/thank-you/what-users-want-from-mobile-infographic
(2011 Stats)
Friday, June 7, 2013

131. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
http://gigaom.com/2012/05/23/the-growing-epidemic-of-page-bloat/
Website Obesity Is Growing
Friday, June 7, 2013

132. Friday, June 7, 2013

133. PICK A
PERFORMANCE
BENCHMARK
Friday, June 7, 2013

134. PICK A
PERFORMANCE
BENCHMARK
3G 3-4s
Friday, June 7, 2013

135. Performance Budget
Friday, June 7, 2013

136. Performance Budget
Total File Size
Number of Assets
Friday, June 7, 2013

137. Performance Budget
Total File Size
Number of Assets
Cash in Account
Friday, June 7, 2013

138. Performance Budget
Total File Size
Number of Assets
Cash in Account
# of Transactions
Friday, June 7, 2013

139. Performance Budget
Total File Size
Number of Assets
Cash in Account
# of Transactions
(Horrible extra
fees over limit)
Friday, June 7, 2013

140. CHEAP EXPENSIVE
Friday, June 7, 2013

141. CHEAP
Text
EXPENSIVE
Small Image
Video
(no auto-play)
Friday, June 7, 2013

142. CHEAP
Text
EXPENSIVE
Small Image
Big Image
Lots of Small
Images
3rd party Widgits
Video
(no auto-play)
Friday, June 7, 2013

143. Don’t Spend Your Budget on
Low Priority Content
Friday, June 7, 2013

144. Don’t Spend Your Budget on
Low Priority Content
Friday, June 7, 2013

145. Don’t Spend Your Budget on
Low Priority Content
$$$$
Friday, June 7, 2013

146. Don’t Spend Your Budget on
Low Priority Content
$$$$
$ $ $
Friday, June 7, 2013

147. 1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Don’t Spend Your Budget on
Low Priority Content
$$$$
$ $ $
Friday, June 7, 2013

148. 1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Don’t Spend Your Budget on
Low Priority Content
$$$$
$ $ $
Friday, June 7, 2013

149. 1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Don’t Spend Your Budget on
Low Priority Content
$$$$
$ $ $
Friday, June 7, 2013

150. 1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Don’t Spend Your Budget on
Low Priority Content
Friday, June 7, 2013

151. 1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Don’t Spend Your Budget on
Low Priority Content
Friday, June 7, 2013

152. 1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Don’t Spend Your Budget on
Low Priority Content
$$$$
Friday, June 7, 2013

153. 1. Navigation
2. News / Products
(2-3 products w/ call to action)
3. Promoted Content
(New Pricing, New Series,
Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Don’t Spend Your Budget on
Low Priority Content
$$$$
Friday, June 7, 2013

154. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

155. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Not Just a Development Problem
Designers Control the
Developer’s Requirements
Friday, June 7, 2013

156. 12s
Don’t Ignore the budget! (Fix the design)
Friday, June 7, 2013

157. 12s
Don’t Ignore the budget! (Fix the design)
Friday, June 7, 2013

158. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

159. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
PROCESS
Friday, June 7, 2013

160. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Strategies For Implementation
http://implementingresponsivedesign.com
Video (5 min) http://www.youtube.com/watch?v=fd_T8i0uQ2Q
Friday, June 7, 2013

161. Conventional “Waterfall” Workflow
Friday, June 7, 2013

162. Discovery
Visual Design
Coding
Launch
Conventional “Waterfall” Workflow
Friday, June 7, 2013

163. Discovery
Visual Design
Coding
Launch
Site Architect / Project Manager
Friday, June 7, 2013

164. Discovery
Visual Design
Coding
Launch
Site Architect / Project Manager
Friday, June 7, 2013

165. Discovery
Visual Design
Coding
Launch
Site Architect / Project Manager
Friday, June 7, 2013

166. Discovery
Visual Design
Coding
Launch
UX / Design Team
Friday, June 7, 2013

167. Discovery
Visual Design
Coding
Launch
UX / Design Team
Friday, June 7, 2013

168. Discovery
Visual Design
Coding
Launch
UX / Design Team
Friday, June 7, 2013

169. Discovery
Visual Design
Coding
Launch
UX / Design Team
Friday, June 7, 2013

170. Discovery
Visual Design
Coding
Launch
UX / Design Team
Friday, June 7, 2013

171. Discovery
Visual Design
Coding
Launch
Developers / QA
Friday, June 7, 2013

172. Discovery
Visual Design
Coding
Launch
Developers / QA
Friday, June 7, 2013

173. Discovery
Visual Design
Coding
Launch
Developers / QA
Friday, June 7, 2013

174. Discovery
Visual Design
Coding
Launch
Conventional “Waterfall” Workflow
Friday, June 7, 2013

175. Friday, June 7, 2013

176. Friday, June 7, 2013

177. Home
Friday, June 7, 2013

178. Home
Case Study
Friday, June 7, 2013

179. Home
Case Study
Blog List
Friday, June 7, 2013

180. Home
Case Study
Blog List
Blog Post
Friday, June 7, 2013

181. Home
Case Study
Blog List
Blog Post
Resources
Friday, June 7, 2013

182. Friday, June 7, 2013

183. Let’s Make that shade
of blue a bit darker
Friday, June 7, 2013

184. Let’s Make that shade
of blue a bit darker
$!@&$@#!
Friday, June 7, 2013

185. TIME.COM Responsive Redesign
Friday, June 7, 2013

186. TIME.COM Responsive Redesign
200+ PS Comps
Friday, June 7, 2013

187. TIME.COM Responsive Redesign
200+ PS Comps
Friday, June 7, 2013

188. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
TIME.COM Responsive Redesign
http://www.youtube.com/watch?
v=X7YZXgGs6oA&list=PLAcXjRKDmFScQ6LdW_oDvcnvMGgweMRd3
Friday, June 7, 2013

189. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Design 1-2 pages
“Just enough to get to code”
Friday, June 7, 2013

190. Friday, June 7, 2013

191. Discovery
Launch
Friday, June 7, 2013

192. Discovery
Visual Design Coding
Launch
Review
Friday, June 7, 2013

193. Discovery
Visual Design Coding
Launch
Review
Friday, June 7, 2013

194. Discovery
Visual Design Coding
Launch
Review
Friday, June 7, 2013

195. Discovery
Visual Design Coding
Launch
Review
Friday, June 7, 2013

196. Discovery
Visual Design Coding
Launch
Review
1. Navigation
2. News / Products
(2-3 products w/ call to
action)
3. Promoted Content
(New Pricing, New
Series, Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

197. Discovery
Visual Design Coding
Launch
Review
1. Navigation
2. News / Products
(2-3 products w/ call to
action)
3. Promoted Content
(New Pricing, New
Series, Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

198. Discovery
Visual Design Coding
Launch
Review
1. Navigation
2. News / Products
(2-3 products w/ call to
action)
3. Promoted Content
(New Pricing, New
Series, Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

199. Discovery
Visual Design Coding
Launch
Review
1. Navigation
2. News / Products
(2-3 products w/ call to
action)
3. Promoted Content
(New Pricing, New
Series, Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

200. Discovery
Visual Design Coding
Launch
Review
1. Navigation
2. News / Products
(2-3 products w/ call to
action)
3. Promoted Content
(New Pricing, New
Series, Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

201. Discovery
Visual Design Coding
Launch
Review
1. Navigation
2. News / Products
(2-3 products w/ call to
action)
3. Promoted Content
(New Pricing, New
Series, Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

202. Discovery
Visual Design Coding
Launch
Review
1. Navigation
2. News / Products
(2-3 products w/ call to
action)
3. Promoted Content
(New Pricing, New
Series, Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

203. Discovery
Visual Design Coding
Launch
Review
1. Navigation
2. News / Products
(2-3 products w/ call to
action)
3. Promoted Content
(New Pricing, New
Series, Download APP)
4. Wishlist: Products
5. Account Functions
6. Social Follow
Friday, June 7, 2013

204. Get Team’s Feedback on real devices
Friday, June 7, 2013

205. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Agile Software Development
Video (15 min)
http://www.youtube.com/watch?v=502ILHjX9EE&list=FLJrbylC1-rtzJ1emF8EsNwA
Friday, June 7, 2013

206. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

207. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Many Smaller Iterations
Friday, June 7, 2013

208. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Break Down Silos
Many Smaller Iterations
Friday, June 7, 2013

209. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Break Down Silos
Many Smaller Iterations
Deliverables will not be “perfect”
Friday, June 7, 2013

210. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

211. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
I UNDERSTAND THESE PROCESS
CHANGES ARE A LOT TO TAKE IN
IT WAS HARD FOR ME TOO
Friday, June 7, 2013

212. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Let’s Wrap it up
Friday, June 7, 2013

213. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Coder’s have it easy
Friday, June 7, 2013

214. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Design(ers) Need to Change
Friday, June 7, 2013

215. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Friday, June 7, 2013

216. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Abandoning 20 years of website
publishing practices is not easy
Friday, June 7, 2013

217. magnet.magazinescanada.ca @MagNetCanada #MagNet13
aidan foster - @finteractive
Most difficult changes are
organizational - Stakeholders &
Management Teams
Abandoning 20 years of website
publishing practices is not easy
Friday, June 7, 2013

218. Weekday Sunday
US News Distribution Oct 2012-April 2013
Friday, June 7, 2013

219. -1.4%
-0.7%
0%
Weekday Sunday
US News Distribution Oct 2012-April 2013
Friday, June 7, 2013

220. -1.4%
-0.7%
0%
-0.7%
Weekday Sunday
US News Distribution Oct 2012-April 2013
Friday, June 7, 2013

221. -1.4%
-0.7%
0%
-0.7%
-1.4%
Weekday Sunday
US News Distribution Oct 2012-April 2013
Friday, June 7, 2013

222. Weekday circulation April 2012-April 2013
Print Digital Total
Friday, June 7, 2013

223. -20%
-10%
0%
10%
20%
30%
40%
50%
Weekday circulation April 2012-April 2013
Print Digital Total
Friday, June 7, 2013

224. -20%
-10%
0%
10%
20%
30%
40%
50%
-13%
Weekday circulation April 2012-April 2013
Print Digital Total
Friday, June 7, 2013

225. -20%
-10%
0%
10%
20%
30%
40%
50%
-13%
45%
Weekday circulation April 2012-April 2013
Print Digital Total
Friday, June 7, 2013

226. -20%
-10%
0%
10%
20%
30%
40%
50%
-13%
45%
8.9%
Weekday circulation April 2012-April 2013
Print Digital Total
Friday, June 7, 2013

227. Friday, June 7, 2013

228. magnet.magazinescanada.ca | @MagNetCanada | #MagNet13
@finteractivelinkedin.responsivedesign.ca
THANK YOU
Questions?
Friday, June 7, 2013

229. magnet.magazinescanada.ca | @MagNetCanada | #MagNet13
@finteractivelinkedin.responsivedesign.ca
THANK YOU
Questions?
(In case something comes up later...)
Friday, June 7, 2013