1. Insert photo of speaker here
891 pixels h x 688 pixels w
Founder
Gravity Department
Brendan Falkowski
Mobile First:
Responsive Design
for eCommerce
(Part Two)

2. Brendan Falkowski
Founder
Gravity Department
Falkowski

3. GravityDept.com

4. Design Consulting For

5. Acumen Theme
• Used by 1200+ stores
• 3 years of updates
• Ready-to-launch frontend
• Made for customization
gravitydept.com/to/acumen-magento

7. Magento Certification
Advisory Board Member

8. A day in the life

9. Responsive Design
for eCommerce
Part Two

11. 1. Why mobile matters
2. Small screen methodologies
3. What you can build
4. Best practices for MF/RWD
5. How to define and execute a strategy

12. gravitydept.com/blog/responsive-ecommerce/

13. State of Mobile & Commerce:
2013 Edition

14. seekingalpha.com/article/1120151-reviewing-the-mobile-revenue-of-major-internet-companies
$0B
$125B
$250B
$375B
$500B
2010 2011 2012 2013 2014
Desktop Mobile
Revenue from eCommerce in US + Europe

15. seekingalpha.com/article/1120151-reviewing-the-mobile-revenue-of-major-internet-companies
0%
8%
15%
23%
30%
2009 2010 2011 2012 2013 2014
2.2%
4.9%
10.0%
17.0%
23.0%
Mobile Percentage of
Total eCommerce Revenue

16. Devices owned by US Adults
http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx

17. 31%
own tablet
January 2013

18. 87%
own cell phone
December 2012

19. 45%
own smart phone
December 2012

20. 17%
use phone as primary device
for web access
April 2012

21. 40–50% are mobile only in:
• 18–29 year olds
• African American and hispanic
• Income under $30k / year
December 2012

22. Responsive Commerce
in the Wild

23. skinnyties.com

24. indochino.com

25. nuts.com

26. currys.co.uk

27. unitedpixelworkers.com

28. oneillclothing.com

29. Content First

30. “If our design was more
modern, we’d have better
sales.”

31. “Making our site mobile-
friendly would be huge.”
~ D. Trump

32. Companies think in design and
technology problems.

33. Most problems are content
problems.

34. Responsive web design is not
all the devices + prettiness.

35. RWD is planning for your
content to go everywhere.

36. Case Study:
SkinnyTies.com

37. skinnyties.com

38. Content problems:
• Information architecture
• Product photography
• Knowledge leadership

39. Information Architecture

43. Limited Navigation Options

44. Every product spec needs
a standardized set of values.

45. lime green
olive green
sea foam green
true green
turquoise
2.5 inches
2.5”
2 1/2”
2 1/2 inches
Two inches
avocado green
forest green
green
hunter green
kelly green

46. New product schemas:
• Descriptive
• Consistent
• Keyword infused

47. Refined content schemas
= Great SEO

48. “Responsive design is Google’s
recommended configuration.”
~ Google
http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-
building-smartphone.html

49. Product Photography

54. Knowledge Leadership

60. Beautiful design without useful
content lacks authority.

61. RWD was not the silver bullet.

62. Content assumptions
affect all devices.

63. Designing content-first
led to success.

64. netmagazine.com/features/top-25-responsive-sites-2012
Net Magazine: Top 25 Responsive Sites of 2012

65. Performance

66. “What’s another pound
to an elephant?”
twitter.com/snookca/status/296746082837344256

68. Performance is a
design constraint.

69. Technology is losing the
performance fight.

70. Median Load Time from Alexa Retail 2000
seekingalpha.com/article/1120151-reviewing-the-mobile-revenue-of-major-
internet-companies
5.94s
Dec. 2011
7.25s
Dec. 2012
~9s
Dec. 2013

71. The business case needs to be
made for performance.

72. “We are not the
fastest retail
site on the
internet today.”

73. webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-
metrics-at-walmart-com/

74. Walmart Business Metrics for Performance
webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-
speed-correlates-to-business-metrics-at-walmart-com/
1s faster
+2% conversions
0.1s faster
+1% Revenue

75. How do we improve
performance?

76. Ignore the backend.
(gasp)

77. Tune the server!
Full-page caching!
EC2 ELB Varnish cloud magic!

79. stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
Load time of 50,000 sites
FrontendBackend
13% 87%

80. “80–90% of the end user
response time is spent on the
frontend. Start there.”
stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

81. A bad frontend undermines
the perfect backend.

82. Your frontend needs
a steward.

83. You cannot let sites
swell unchecked.

84. How do we measure
performance?

85. YSlow
developer.yahoo.com/yslow/
Google PageSpeed
developers.google.com/speed/pagespeed/
WebPageTest
webpagetest.org/
Report Cards

86. Waterfall Charts

87. Some mobile devices lack
profiling tools.
Hacking your way around it:
stevesouders.com/blog/2013/03/26/mobile-waterfalls/

88. Measured Speed
vs.
Perceived Speed

89. 14 Small Ways to
Speed Up the Frontend

90. 1. Reduce HTTP requests.

91. 2. Use DNS pre-fetching.

92. 3. Use cookie-less domains
for static assets.

93. 4. Use two domains
for static assets.

94. 5. Put JS at the bottom.

95. 6. Use asynchronous
JS loading.

96. 7. Use one CSS file.

97. 8. Link CSS from
the site domain.

98. 9. Use a
Content Delivery Network.

99. 10. Minify all CSS and JS.

100. 11. Use gzip compression.

101. 12. Optimize images.

102. 13. Use caching and
far-future expires headers.
More info:
youtube.com/watch?v=HKNZ-tQQnSY

103. 14. Use conditional loading.

104. Further Resources
speakerdeck.com/keithpitt/keith-and-marios-guide-to-fast-websites

105. Pitfalls in Responsive
Commerce

106. Markup

107. One column
Two columns left
Two columns right
Three columns

108. Markup Order Matters

109. One Column template for:
• Home
• Login / Register
• Informational CMS Pages

110. Custom Templates for:
• Catalog > List
• Catalog > Product
• Checkout > OnePage
• Customer > Dashboard

111. Flexible and Maintainble

112. Generic columnar layouts
don’t work when content
changes shape/size.

113. CSS3 Flexbox is very powerful,
but not well supported yet.
zomigi.com/blog/future-css-layout-fowd/
css-tricks.com/old-flexbox-and-new-flexbox/

114. Responsive Images

115. 1. Image Replacement

116. 2. Over Sizing @2x or @1.5x

117. 3. Super Sizing @5x

118. 4. PictureFill
https://github.com/scottjehl/picturefill

119. 5. Sechna.io Src
docs.sencha.io/current/index.html#!/guide/src

120. 8 Guidelines and 1 Rule
for Responsive Images

121. “Plan for the fact that whatever
you implement will be
deprecated.”
blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/

122. Bandwidth and latency still
can’t reliably be detected.

123. Users that pay for
bandwidth per MB may
want lo-res images.

124. A Balancing Act
for Skinny Ties

125. Images @1x

126. Images @1.5x

127. Image replacement

128. Sprite Icons

129. Tailor your approach to
the content at hand.

130. Sass + Compass

131. Sass
sass-lang.com
Compass
compass-style.org

132. maddesigns.de/sass-compass-introduction/

133. Grunt
developer.yahoo.com/yslow/
CodeKit
incident57.com/codekit/
Hammer
hammerformac.com
Build Tools for Sass/Compass
Scout
mhs.github.com/scout-app/

134. Left: hierarchy of Sass
partials
Right: loader of Sass
partials
Sass + Compass
Structure

135. Frontend Frameworks
and Prototyping

136. Bootstrap
twitter.github.io/bootstrap/
Foundation
foundation.zurb.com

137. Build a lean pattern
library for each project.

138. “Mini Bootstraps” are the
modern design deliverable.
daverupert.com/2013/04/responsive-deliverables/

139. JS Behavior
and Media Queries

140. if (window.matchMedia("(min-width: 400px)").matches)
{
// Do something
}
developer.mozilla.org/en-US/docs/DOM/window.matchMedia

141. Harvey
github.com/harvesthq/harvey
Enquire
github.com/WickyNilliams/enquire.js

142. Touch Events in JS

143. touchstart
touchmove
touchend

144. touchstart
event
fires
click
event
fires300ms delay

145. Workarounds for
click delays

146. Touch libraries
https://github.com/dotmaster/Touchable-jQuery-Plugin
https://github.com/cheeaun/tappable
https://github.com/jonpacker/jquery.tap
https://github.com/EightMedia/hammer.js

147. Here be dragons

148. https://developers.google.com/mobile/articles/fast_buttons
http://www.html5rocks.com/en/mobile/touch/
Further Resources

149. Form Structures

150. Stack Forms

151. Scaffold
Forms

153. Adjacent
fields are
hard to use.

154. Your user’s
eyes should
not do this.

155. Make forms
flow in only
one direction.

156. HTML5 Input Types

157. <input type="email" />

158. <input type="tel" />

159. <input type="number" />

160. <input
type="text"
pattern="[0-9]*" />

161. Custom Quantity Widget

162. Sisyphus.js
github.com/simsalabim/sisyphus

163. Tables

164. 1. No Tables

165. 2. Simple Tables

166. 3. Priority Tables

167. 4. Linearized Tables

168. 5. Scroll Tables

169. css-tricks.com/responsive-data-table-roundup/
Further Resources

170. Social Widgets

171. • Not designed for small screens.
• Inconsistent sizes, layouts, margins, and style.
• Every major mobile platform has sharing built into the OS.
• Internet Explorer + Safari do too.
• Dozens of extensions for Firefox + Chrome.

172. Facebook + Twitter + Google Plus
Share Widgets
19
HTTP Requests
247
KB of data

173. The Cost of Social Widgets
+2.3s
Over WiFi
+11.5s
Over 3G

174. I cannot jump
the distance,
you’ll have to
toss me.

175. Share links are way better
• Every social site has them
• Plain old HTML
• Full styling control
• Sharing interface is almost identical
• Instantly recognizable
• Tap friendly

176. The Cost of Share Links
0
HTTP Requests
<1
KB of data

177. http://socialitejs.com
https://github.com/filamentgroup/SocialCount
Missing social counters?

178. Extensions

179. Be prepared to audit
all your extensions.

180. 1. Request vendors update their code.
2. Remove the vendor’s styling, but keep the interaction.
3. Fork and maintain your own version.
Coping with Extensions

181. Checkout

182. 1. Eliminate unnecessary steps.
2. Pre-fill data whenever possible.
3. Use appropriate inputs so typing is easier.
Making checkout faster

183. http://baymard.com
http://uxdesign.smashingmagazine.com/tag/e-commerce/
Checkout Best Practices

184. Billing Address
Shipping Address
Shipping Method
Payment Method
Review + Submit
Progress

185. Billing Address
Shipping Address
Shipping Method
Payment Method
Review + Submit
Progress Billing Address
Shipping Address
Shipping Method
Payment Method
Review + Submit
Progress

186. Billing Address
Shipping Address
Shipping Method
Payment Method
Review + Submit
Progress

187. Woven Checkout

188. Billing Address
Shipping Method
Payment Method
Review + Submit
Shipping Address

189. Billing Address
Shipping Method
Payment Method
Review + Submit
Shipping Address
Step Summary

190. Billing Address
Shipping Method
Payment Method
Review + Submit
Shipping Address
Step Summary
Step Summary

191. Billing Address
Shipping Method
Payment Method
Review + Submit
Shipping Address
Step Summary
Step Summary
Step Summary

192. Billing Address
Shipping Method
Payment Method
Review + Submit
Shipping Address
Step Summary
Step Summary
Step Summary
Step Summary

193. 1. Natural Hierarchy
2. Proximity
3. Device Friendly

194. Again, extensions

195. Show Me The Money

196. Quantity
78.0%
Average Order Value
20.8%
Transactions
57.8%
Revenue – iPad
224%
Revenue – iPhone
473%
Revenue – Android
187%
YOY Impact of Responsive Design
for Skinny Ties

197. Transactions
On Mobile
382%
Responsive + O’Neill Clothing
http://electricpulp.com/notes/you-like-apples/
http://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/
Revenue
On Mobile
370%

198. I hope to hear more stories
like this from you.

199. Thanks

200. Questions

201. GravityDept.com
Falkowski