Upload
atwix
View
568
Download
0
Embed Size (px)
Citation preview
Insert photo of speaker here891 pixels h x 688 pixels w
FounderGravity Department
Brendan Falkowski
Mobile First:Responsive Designfor eCommerce(Part Two)
Acumen Theme• Used by 1200+ stores
• 3 years of updates
• Ready-to-launch frontend
• Made for customization
gravitydept.com/to/acumen-magento
1. Why mobile matters2. Small screen methodologies3. What you can build4. Best practices for MF/RWD5. How to define and execute a strategy
gravitydept.com/blog/responsive-ecommerce/
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
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 ofTotal eCommerce Revenue
Devices owned by US Adults
http://pewinternet.org/Commentary/2012/February/Pew-Internet-Mobile.aspx
31%own tablet
January 2013
87%own cell phone
December 2012
45%own smart phone
December 2012
17%use phone as primary device
for web access
April 2012
40–50% are mobile only in:• 18–29 year olds• African American and hispanic• Income under $30k / year
December 2012
lime greenolive greensea foam greentrue greenturquoise
2.5 inches2.5”2 1/2”2 1/2 inchesTwo inches
avocado greenforest greengreenhunter greenkelly green
“Responsive design is Google’s recommended configuration.”
http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html
netmagazine.com/features/top-25-responsive-sites-2012
Net Magazine: Top 25 Responsive Sites of 2012
“What’s another pound to an elephant?”
twitter.com/snookca/status/296746082837344256
Median Load Time from Alexa Retail 2000
seekingalpha.com/article/1120151-reviewing-the-mobile-revenue-of-major-internet-companies
5.94sDec. 2011
7.25sDec. 2012
~9sDec. 2013
webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/
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
stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
Load time of 50,000 sites
FrontendBackend
13% 87%
“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/
YSlowdeveloper.yahoo.com/yslow/
Google PageSpeeddevelopers.google.com/speed/pagespeed/
WebPageTestwebpagetest.org/
Report Cards
Some mobile devices lack profiling tools.
Hacking your way around it:stevesouders.com/blog/2013/03/26/mobile-waterfalls/
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/
4. PictureFill
https://github.com/scottjehl/picturefill
5. Sechna.io Src
docs.sencha.io/current/index.html#!/guide/src
“Plan for the fact that whatever you implement will be
deprecated.”
blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/
Sasssass-lang.com
Compasscompass-style.org
Gruntdeveloper.yahoo.com/yslow/
CodeKitincident57.com/codekit/
Hammerhammerformac.com
Build Tools for Sass/Compass
Scoutmhs.github.com/scout-app/
Bootstraptwitter.github.io/bootstrap/
Foundationfoundation.zurb.com
“Mini Bootstraps” are the modern design deliverable.
daverupert.com/2013/04/responsive-deliverables/
if (window.matchMedia("(min-width: 400px)").matches){ // Do something}
developer.mozilla.org/en-US/docs/DOM/window.matchMedia
Harveygithub.com/harvesthq/harvey
Enquiregithub.com/WickyNilliams/enquire.js
Touch librarieshttps://github.com/dotmaster/Touchable-jQuery-Pluginhttps://github.com/cheeaun/tappablehttps://github.com/jonpacker/jquery.taphttps://github.com/EightMedia/hammer.js
https://developers.google.com/mobile/articles/fast_buttonshttp://www.html5rocks.com/en/mobile/touch/
Further Resources
• 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.
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
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
1. Eliminate unnecessary steps.2. Pre-fill data whenever possible.
3. Use appropriate inputs so typing is easier.
Making checkout faster
http://baymard.comhttp://uxdesign.smashingmagazine.com/tag/e-commerce/
Checkout Best Practices
Billing Address
Shipping Address
Shipping Method
Payment Method
Review + Submit
Progress Billing Address
Shipping Address
Shipping Method
Payment Method
Review + Submit
Progress
Billing Address
Shipping Method
Payment Method
Review + Submit
Shipping Address
Step Summary
Step Summary
Billing Address
Shipping Method
Payment Method
Review + Submit
Shipping Address
Step Summary
Step Summary
Step Summary
Billing Address
Shipping Method
Payment Method
Review + Submit
Shipping Address
Step Summary
Step Summary
Step Summary
Step Summary
Quantity78.0%
Average Order Value20.8%
Transactions57.8%
Revenue – iPad224%
Revenue – iPhone473%
Revenue – Android187%
YOY Impact of Responsive Designfor Skinny Ties
TransactionsOn Mobile
382%Responsive + O’Neill Clothing
http://electricpulp.com/notes/you-like-apples/http://electricpulp.com/notes/more-on-apples-mobile-optimization-in-ecommerce/
RevenueOn Mobile
370%