• Like

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

  • 499 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
499
On Slideshare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
3
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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