Post on 03-Dec-2014
description
a digital commerce consultancy
san francisco ~ new york ~ london ~ chişinău ~ guadalajara
Who Am I?
Tom MotleyDirector of EngineeringTacit Knowledge, Inc.
Tacit Knowledge – The 411
Runbook
1. The ‘Why’ ~15 Minutes
2. The ‘How’ ~15 Minutes
TL;DR
1. Mobile Commerce will represent ¼ of all online shopping by 2017.
2. You have options in tackling this challenge, but RWD is the write once & deploy anywhere paradigm.
3. Hybris is not currently RWD-enabled out of the box, but can be modified to be so using Open Source tooling (Foundation & Compass)
State of Play – Q1, 2014
"Last holiday season alone, Amazon customers purchased more than one toy per second via a
mobile device” - Techcrunch.com
"eBay is seeing the consumer transition between screens (computer, iPad, mobile)
depending on the time of day” - Steve Yankovich, VP of Innovation, eBay
Recent Trends in Mobile Shopping
2012 20130%
5%
10%
15%
20%
25%
30%
35%
TRAFFiCTRANSACTIONS
“Cyber Monday” - 2012 vs 2013
* http://www-01.ibm.com/software/marketing-solutions/benchmark-hub/alert.html
Smartphones Browse, Tablets Buy
BROWSE BUY0%
5%
10%
15%
20%
25%
SMARTPHONETABLET
Share of Online Sales & Transactions
* http://www-01.ibm.com/software/marketing-solutions/benchmark-
hub/alert.html
iOS vs Android
BROWSING
ANDROIDiOS
BUYING
ANDROIDiOS
* http://www-01.ibm.com/software/marketing-solutions/benchmark-hub/alert.html
Android-ians Have Tighter Wallets..
Android iOS$100
$105
$110
$115
$120
$125
AVG ORDER SIZE
AVG ORDER SIZE
* http://www-01.ibm.com/software/marketing-solutions/benchmark-hub/alert.html
Question
Are We Tailoring eCommerce Almost Exclusively To iOS Platforms?
Future Directions
Where is Mobile Commerce Headed?
Projected Future Growth
2013 2014 2015 2016 2017
$226
$297
$339
$385
$434
$39 $53 $71
$92 $109
Annual Online US Sales (in Billions)
Total Sales Mobile Device Sales
17%
25%
17%
21%24% 25%
* http://www-01.ibm.com/software/marketing-solutions/benchmark-hub/alert.html
Future Directions
What’s holding Mobile Commerce back?
Two Major Problems
1. Cart Abandonment
2. Security Fears
Cart Abandonment
• 41% : Checkout too difficult
• 23% : Checkout failed (technical issues)
Failed Purchases on Smartphone or Tablet…
* http://www.jumio.com/2013/05/retailers-listen-up-high-rates-of-mobile-shopping-cart-abandonment-tied-to-poor-user-experience-pr/
Security Fears
51% : Didn’t feel comfortable using their Credit Card on a Mobile Device
Why shoppers prefer to browse only online…:
* http://www.jumio.com/2013/05/retailers-listen-up-high-rates-of-mobile-shopping-cart-abandonment-tied-to-poor-user-experience-pr/
How to Enable M-Commerce
4. How to Enable Mobile Commerce?
Plan For Mobile First
STRATEGY THE GOOD THE BAD
1. One Site Fits All Zero extra effort
- Your site will suck on some devices
2. One Site Per Device Can be outsourced
- Longer Dev cycles- Duplicated code/logic
3. Mobile Apps Can tailor the end user experience exactly
- Overkill : consumers have enough apps already
- Expensive; requires an app dev team
4. Responsive Web Design (RWD)
Best scalability - Is hard to do properly- Longer Dev cycles.
What Is Responsive Web Design?
One Site That Renders Differently According To Device Viewport
Dimensions
Moreover..
“Responsive design is not just about fitting on a mobile screen, it's also about making sure that functionality works in contexts and scenarios ideal for mobile.
That means that if you are a restaurant, your responsive site can hook into geolocation APIs to offer easy access to directions.
It means that phone numbers are dial-able.
It means that buttons and text entry fields are touch-friendly.”
- * http://mashable.com/2013/08/06/responsive-vs-native-app/
Why RWD Scales Best…
We are dealing with 3 or 4 device types right now :
- TV- Desktop- Tablet- Smartphone
BUT others are coming : - Google Glass- In-Car Devices- Etc…
What Are Some Examples of Good RWD?
• Capital One (capitalone.com)• Mulberry (mulberry.com)• Mashable (mashable.com)• Wired (wired.com)
Mulberry.com – RWD Done Right
• Extensive Use of White Space
• Swipe-able Product Images on Mobile Devices
• Checkout Hosted on a Single Screen
Let’s Look At Some Sites
What Does Your Site Look Like On Each Device Type?
Getting More Technical..
Web Development Principles Of Responsive Design
Three Main Techniques
1. Fluid/Liquid Page Layouts (vs Fixed)2. CSS(3) Media Queries3. Load JS/CSS Inline & “Be Selective”
“Content is atomic, but presentation is dynamic. Responsive Web Design renders the page differently depending on the viewport information provided by the user’s browser. “
- me.
CSS Media Queries – The Basic Idea Dynamically Adjust Media Size Based on Viewport Information
Sometimes horizontal layout is optimal, such as product discovery on a widescreen device:
Sometimes height orientation is handy, such as Stacking items at checkout:
Image 1
Image 2
Image 4
Image 3
Image 1
Image 2
……
Implementing a Media Query – 2 Examples
@media screen and (orientation: landscape) { .f-dropdown { max-width:100%;left:0 }}
@media only screen and (min-width: 48em) { .checkout-header-wrapper { min-height: 90px; }}
CSS Media Queries – More Details
media_type : all | aural | braille | handheld | print | projection | screen media_feature : width | min-width | max-width | height | min height | max-height
A Selection of the Specification…
Advanced CSS Media Queries Far beyond my CSS
skillset…
1. Control how your CSS & JS assets are loaded for different viewports (modernizer lib)
2. Shrink or adapt images to be optimized for different viewports (picturefill lib)
All Is Not Lost…
OSS frameworks for RWD
• Foundation http://foundation3.zurb.com/
• Bootstrap http://getbootstrap.com/
• Breakpoint http://breakpoint-sass.com/
hybris RWD
How to do RWD on the hybris platform…
A hybris CMS Page – End User View
A hybris CMS Page – Author View
hybris Storefront Directory Layout
Dual assets per device type
Accelerator is not RWD, but Multi-Site.
The Accelerator Site is currently not responsive out of the box….Let’s make
it so
Introduce Compass & Foundation1. Add Compass & Foundation to the _UI dir in
the Accelerator Storefront extension
2. Override OOTB Foundation styling where desired
3. Compile Foundation SASS files to CSS
4. Deploy the compiled CSS to the WEB-INF/tags/template/comressables/css.tag in the same Storefront directory
5. Retrofit all desired RWD Views with Foundation CSS classes (and JS if required).
Hybris Storefront With RWD Retrofit
Lose the Mobile Directory Entirely
Foundation Directory Detail
Override OOTB Foundation Styles
Tell Foundation Where to Deploy to in Hybris
Building Foundation In hybrisCustom Ant Task
Configure the Build via Ruby Script
Altering JSPs To Use Foundation StylingBefore
After
Proof Is In The Pudding
Let’s Examine The Results…
Bonus Points..
Give content Authors responsive options using custom CMS Components that allow the Author to choose what and how page elements are displayed on different viewports
Wrap Up
1. Mobile Commerce will represent ¼ of all online shopping by 2017.
2. You have options in tackling this challenge, but RWD is the write once & deploy anywhere paradigm.
3. Hybris is not currently RWD-enabled out of the box, but can be modified to be so using Open Source tooling (Foundation & Compass)
Thank You!
What would you like to see discussed at the next Meet-Up?
1. B2B Accelerator?
2. Global Product Catalog Design?
3. Customizing the Cockpits?
4. New Features in 5x?