Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…

858 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
858
On SlideShare
0
From Embeds
0
Number of Embeds
301
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…

  1. 1. Insert photo of speaker here891 pixels h x 688 pixels wFounderGravity DepartmentBrendan FalkowskiMobile First:Responsive Designfor eCommerce(Part Two)
  2. 2. Brendan FalkowskiFounderGravity DepartmentFalkowski
  3. 3. GravityDept.com
  4. 4. Design Consulting For
  5. 5. Acumen Theme• Used by 1200+ stores• 3 years of updates• Ready-to-launch frontend• Made for customizationgravitydept.com/to/acumen-magento
  6. 6. Magento CertificationAdvisory Board Member
  7. 7. A day in the life
  8. 8. Responsive Designfor eCommercePart Two
  9. 9. 1. Why mobile matters2. Small screen methodologies3. What you can build4. Best practices for MF/RWD5. How to define and execute a strategy
  10. 10. gravitydept.com/blog/responsive-ecommerce/
  11. 11. State of Mobile & Commerce:2013 Edition
  12. 12. seekingalpha.com/article/1120151-reviewing-the-mobile-revenue-of-major-internet-companies$0B$125B$250B$375B$500B2010 2011 2012 2013 2014Desktop MobileRevenue from eCommerce in US + Europe
  13. 13. seekingalpha.com/article/1120151-reviewing-the-mobile-revenue-of-major-internet-companies0%8%15%23%30%2009 2010 2011 2012 2013 20142.2%4.9%10.0%17.0%23.0%Mobile Percentage ofTotal eCommerce Revenue
  14. 14. Devices owned by US Adultshttp://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
  15. 15. 31%own tabletJanuary 2013
  16. 16. 87%own cell phoneDecember 2012
  17. 17. 45%own smart phoneDecember 2012
  18. 18. 17%use phone as primary devicefor web accessApril 2012
  19. 19. 40–50% are mobile only in:• 18–29 year olds• African American and hispanic• Income under $30k / yearDecember 2012
  20. 20. Responsive Commercein the Wild
  21. 21. skinnyties.com
  22. 22. indochino.com
  23. 23. nuts.com
  24. 24. currys.co.uk
  25. 25. unitedpixelworkers.com
  26. 26. oneillclothing.com
  27. 27. Content First
  28. 28. “If our design was moremodern, we’d have bettersales.”
  29. 29. “Making our site mobile-friendly would be huge.”~ D. Trump
  30. 30. Companies think in design andtechnology problems.
  31. 31. Most problems are contentproblems.
  32. 32. Responsive web design is notall the devices + prettiness.
  33. 33. RWD is planning for yourcontent to go everywhere.
  34. 34. Case Study:SkinnyTies.com
  35. 35. skinnyties.com
  36. 36. Content problems:• Information architecture• Product photography• Knowledge leadership
  37. 37. Information Architecture
  38. 38. Limited Navigation Options
  39. 39. Every product spec needsa standardized set of values.
  40. 40. lime greenolive greensea foam greentrue greenturquoise2.5 inches2.5”2 1/2”2 1/2 inchesTwo inchesavocado greenforest greengreenhunter greenkelly green
  41. 41. New product schemas:• Descriptive• Consistent• Keyword infused
  42. 42. Refined content schemas= Great SEO
  43. 43. “Responsive design is Google’srecommended configuration.”~ Googlehttp://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html
  44. 44. Product Photography
  45. 45. Knowledge Leadership
  46. 46. Beautiful design without usefulcontent lacks authority.
  47. 47. RWD was not the silver bullet.
  48. 48. Content assumptionsaffect all devices.
  49. 49. Designing content-firstled to success.
  50. 50. netmagazine.com/features/top-25-responsive-sites-2012Net Magazine: Top 25 Responsive Sites of 2012
  51. 51. Performance
  52. 52. “What’s another poundto an elephant?”twitter.com/snookca/status/296746082837344256
  53. 53. Performance is adesign constraint.
  54. 54. Technology is losing theperformance fight.
  55. 55. Median Load Time from Alexa Retail 2000seekingalpha.com/article/1120151-reviewing-the-mobile-revenue-of-major-internet-companies5.94sDec. 20117.25sDec. 2012~9sDec. 2013
  56. 56. The business case needs to bemade for performance.
  57. 57. “We are not thefastest retailsite on theinternet today.”
  58. 58. webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/
  59. 59. Walmart Business Metrics for Performancewebperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/1s faster+2% conversions0.1s faster+1% Revenue
  60. 60. How do we improveperformance?
  61. 61. Ignore the backend.(gasp)
  62. 62. Tune the server!Full-page caching!EC2 ELB Varnish cloud magic!
  63. 63. stevesouders.com/blog/2012/02/10/the-performance-golden-rule/Load time of 50,000 sitesFrontendBackend13% 87%
  64. 64. “80–90% of the end userresponse time is spent on thefrontend. Start there.”stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
  65. 65. A bad frontend underminesthe perfect backend.
  66. 66. Your frontend needsa steward.
  67. 67. You cannot let sitesswell unchecked.
  68. 68. How do we measureperformance?
  69. 69. YSlowdeveloper.yahoo.com/yslow/Google PageSpeeddevelopers.google.com/speed/pagespeed/WebPageTestwebpagetest.org/Report Cards
  70. 70. Waterfall Charts
  71. 71. Some mobile devices lackprofiling tools.Hacking your way around it:stevesouders.com/blog/2013/03/26/mobile-waterfalls/
  72. 72. Measured Speedvs.Perceived Speed
  73. 73. 14 Small Ways toSpeed Up the Frontend
  74. 74. 1. Reduce HTTP requests.
  75. 75. 2. Use DNS pre-fetching.
  76. 76. 3. Use cookie-less domainsfor static assets.
  77. 77. 4. Use two domainsfor static assets.
  78. 78. 5. Put JS at the bottom.
  79. 79. 6. Use asynchronousJS loading.
  80. 80. 7. Use one CSS file.
  81. 81. 8. Link CSS fromthe site domain.
  82. 82. 9. Use aContent Delivery Network.
  83. 83. 10. Minify all CSS and JS.
  84. 84. 11. Use gzip compression.
  85. 85. 12. Optimize images.
  86. 86. 13. Use caching andfar-future expires headers.More info:youtube.com/watch?v=HKNZ-tQQnSY
  87. 87. 14. Use conditional loading.
  88. 88. Further Resourcesspeakerdeck.com/keithpitt/keith-and-marios-guide-to-fast-websites
  89. 89. Pitfalls in ResponsiveCommerce
  90. 90. Markup
  91. 91. One columnTwo columns leftTwo columns rightThree columns
  92. 92. Markup Order Matters
  93. 93. One Column template for:• Home• Login / Register• Informational CMS Pages
  94. 94. Custom Templates for:• Catalog > List• Catalog > Product• Checkout > OnePage• Customer > Dashboard
  95. 95. Flexible and Maintainble
  96. 96. Generic columnar layoutsdon’t work when contentchanges shape/size.
  97. 97. 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/
  98. 98. Responsive Images
  99. 99. 1. Image Replacement
  100. 100. 2. Over Sizing @2x or @1.5x
  101. 101. 3. Super Sizing @5x
  102. 102. 4. PictureFillhttps://github.com/scottjehl/picturefill
  103. 103. 5. Sechna.io Srcdocs.sencha.io/current/index.html#!/guide/src
  104. 104. 8 Guidelines and 1 Rulefor Responsive Images
  105. 105. “Plan for the fact that whateveryou implement will bedeprecated.”blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/
  106. 106. Bandwidth and latency stillcan’t reliably be detected.
  107. 107. Users that pay forbandwidth per MB maywant lo-res images.
  108. 108. A Balancing Actfor Skinny Ties
  109. 109. Images @1x
  110. 110. Images @1.5x
  111. 111. Image replacement
  112. 112. Sprite Icons
  113. 113. Tailor your approach tothe content at hand.
  114. 114. Sass + Compass
  115. 115. Sasssass-lang.comCompasscompass-style.org
  116. 116. maddesigns.de/sass-compass-introduction/
  117. 117. Gruntdeveloper.yahoo.com/yslow/CodeKitincident57.com/codekit/Hammerhammerformac.comBuild Tools for Sass/CompassScoutmhs.github.com/scout-app/
  118. 118. Left: hierarchy of SasspartialsRight: loader of SasspartialsSass + CompassStructure
  119. 119. Frontend Frameworksand Prototyping
  120. 120. Bootstraptwitter.github.io/bootstrap/Foundationfoundation.zurb.com
  121. 121. Build a lean patternlibrary for each project.
  122. 122. “Mini Bootstraps” are themodern design deliverable.daverupert.com/2013/04/responsive-deliverables/
  123. 123. JS Behaviorand Media Queries
  124. 124. if (window.matchMedia("(min-width: 400px)").matches){   // Do something}developer.mozilla.org/en-US/docs/DOM/window.matchMedia
  125. 125. Harveygithub.com/harvesthq/harveyEnquiregithub.com/WickyNilliams/enquire.js
  126. 126. Touch Events in JS
  127. 127. touchstarttouchmovetouchend
  128. 128. touchstarteventfiresclickeventfires300ms delay
  129. 129. Workarounds forclick delays
  130. 130. Touch librarieshttps://github.com/dotmaster/Touchable-jQuery-Pluginhttps://github.com/cheeaun/tappablehttps://github.com/jonpacker/jquery.taphttps://github.com/EightMedia/hammer.js
  131. 131. Here be dragons
  132. 132. https://developers.google.com/mobile/articles/fast_buttonshttp://www.html5rocks.com/en/mobile/touch/Further Resources
  133. 133. Form Structures
  134. 134. Stack Forms
  135. 135. ScaffoldForms
  136. 136. Adjacentfields arehard to use.
  137. 137. Your user’seyes shouldnot do this.
  138. 138. Make formsflow in onlyone direction.
  139. 139. HTML5 Input Types
  140. 140. <input type="email" />
  141. 141. <input type="tel" />
  142. 142. <input type="number" />
  143. 143. <inputtype="text"pattern="[0-9]*" />
  144. 144. Custom Quantity Widget
  145. 145. Sisyphus.jsgithub.com/simsalabim/sisyphus
  146. 146. Tables
  147. 147. 1. No Tables
  148. 148. 2. Simple Tables
  149. 149. 3. Priority Tables
  150. 150. 4. Linearized Tables
  151. 151. 5. Scroll Tables
  152. 152. css-tricks.com/responsive-data-table-roundup/Further Resources
  153. 153. Social Widgets
  154. 154. • 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.
  155. 155. Facebook + Twitter + Google PlusShare Widgets19HTTP Requests247KB of data
  156. 156. The Cost of Social Widgets+2.3sOver WiFi+11.5sOver 3G
  157. 157. I cannot jumpthe distance,you’ll have totoss me.
  158. 158. 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
  159. 159. The Cost of Share Links0HTTP Requests<1KB of data
  160. 160. http://socialitejs.comhttps://github.com/filamentgroup/SocialCountMissing social counters?
  161. 161. Extensions
  162. 162. Be prepared to auditall your extensions.
  163. 163. 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
  164. 164. Checkout
  165. 165. 1. Eliminate unnecessary steps.2. Pre-fill data whenever possible.3. Use appropriate inputs so typing is easier.Making checkout faster
  166. 166. http://baymard.comhttp://uxdesign.smashingmagazine.com/tag/e-commerce/Checkout Best Practices
  167. 167. Billing AddressShipping AddressShipping MethodPayment MethodReview + SubmitProgress
  168. 168. Billing AddressShipping AddressShipping MethodPayment MethodReview + SubmitProgress Billing AddressShipping AddressShipping MethodPayment MethodReview + SubmitProgress
  169. 169. Billing AddressShipping AddressShipping MethodPayment MethodReview + SubmitProgress
  170. 170. Woven Checkout
  171. 171. Billing AddressShipping MethodPayment MethodReview + SubmitShipping Address
  172. 172. Billing AddressShipping MethodPayment MethodReview + SubmitShipping AddressStep Summary
  173. 173. Billing AddressShipping MethodPayment MethodReview + SubmitShipping AddressStep SummaryStep Summary
  174. 174. Billing AddressShipping MethodPayment MethodReview + SubmitShipping AddressStep SummaryStep SummaryStep Summary
  175. 175. Billing AddressShipping MethodPayment MethodReview + SubmitShipping AddressStep SummaryStep SummaryStep SummaryStep Summary
  176. 176. 1. Natural Hierarchy2. Proximity3. Device Friendly
  177. 177. Again, extensions
  178. 178. Show Me The Money
  179. 179. Quantity78.0%Average Order Value20.8%Transactions57.8%Revenue – iPad224%Revenue – iPhone473%Revenue – Android187%YOY Impact of Responsive Designfor Skinny Ties
  180. 180. TransactionsOn Mobile382%Responsive + O’Neill Clothinghttp://electricpulp.com/notes/you-like-apples/http://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/RevenueOn Mobile370%
  181. 181. I hope to hear more storieslike this from you.
  182. 182. Thanks
  183. 183. Questions
  184. 184. GravityDept.comFalkowski

×