retrofitting the hybris accelerator with responsive web design
DESCRIPTION
This is a presentation I gave to the Bay Area hybris meetup earlier this week. It is a high level explanation of how to alter OOTB hybris to use RWD (Responsive Web Design). It focuses on the hybris Accelerator and Foundation JS framework.TRANSCRIPT
![Page 1: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/1.jpg)
a digital commerce consultancy
san francisco ~ new york ~ london ~ chişinău ~ guadalajara
![Page 2: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/2.jpg)
Who Am I?
Tom MotleyDirector of EngineeringTacit Knowledge, Inc.
![Page 3: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/3.jpg)
Tacit Knowledge – The 411
![Page 4: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/4.jpg)
Runbook
1. The ‘Why’ ~15 Minutes
2. The ‘How’ ~15 Minutes
![Page 5: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/5.jpg)
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)
![Page 6: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/6.jpg)
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
![Page 7: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/7.jpg)
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
![Page 8: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/8.jpg)
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
![Page 9: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/9.jpg)
iOS vs Android
BROWSING
ANDROIDiOS
BUYING
ANDROIDiOS
* http://www-01.ibm.com/software/marketing-solutions/benchmark-hub/alert.html
![Page 10: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/10.jpg)
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
![Page 11: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/11.jpg)
Question
Are We Tailoring eCommerce Almost Exclusively To iOS Platforms?
![Page 12: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/12.jpg)
Future Directions
Where is Mobile Commerce Headed?
![Page 13: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/13.jpg)
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
![Page 14: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/14.jpg)
Future Directions
What’s holding Mobile Commerce back?
![Page 15: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/15.jpg)
Two Major Problems
1. Cart Abandonment
2. Security Fears
![Page 16: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/16.jpg)
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/
![Page 17: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/17.jpg)
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/
![Page 18: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/18.jpg)
How to Enable M-Commerce
4. How to Enable Mobile Commerce?
![Page 19: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/19.jpg)
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.
![Page 20: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/20.jpg)
What Is Responsive Web Design?
One Site That Renders Differently According To Device Viewport
Dimensions
![Page 21: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/21.jpg)
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/
![Page 22: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/22.jpg)
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…
![Page 23: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/23.jpg)
What Are Some Examples of Good RWD?
• Capital One (capitalone.com)• Mulberry (mulberry.com)• Mashable (mashable.com)• Wired (wired.com)
![Page 24: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/24.jpg)
Mulberry.com – RWD Done Right
• Extensive Use of White Space
• Swipe-able Product Images on Mobile Devices
• Checkout Hosted on a Single Screen
![Page 25: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/25.jpg)
Let’s Look At Some Sites
What Does Your Site Look Like On Each Device Type?
![Page 26: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/26.jpg)
Getting More Technical..
Web Development Principles Of Responsive Design
![Page 27: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/27.jpg)
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.
![Page 28: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/28.jpg)
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
……
![Page 29: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/29.jpg)
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; }}
![Page 30: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/30.jpg)
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…
![Page 31: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/31.jpg)
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)
![Page 32: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/32.jpg)
All Is Not Lost…
OSS frameworks for RWD
• Foundation http://foundation3.zurb.com/
• Bootstrap http://getbootstrap.com/
• Breakpoint http://breakpoint-sass.com/
![Page 33: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/33.jpg)
hybris RWD
How to do RWD on the hybris platform…
![Page 34: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/34.jpg)
A hybris CMS Page – End User View
![Page 35: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/35.jpg)
A hybris CMS Page – Author View
![Page 36: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/36.jpg)
hybris Storefront Directory Layout
Dual assets per device type
![Page 37: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/37.jpg)
Accelerator is not RWD, but Multi-Site.
The Accelerator Site is currently not responsive out of the box….Let’s make
it so
![Page 38: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/38.jpg)
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).
![Page 39: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/39.jpg)
Hybris Storefront With RWD Retrofit
Lose the Mobile Directory Entirely
![Page 40: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/40.jpg)
Foundation Directory Detail
Override OOTB Foundation Styles
Tell Foundation Where to Deploy to in Hybris
![Page 41: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/41.jpg)
Building Foundation In hybrisCustom Ant Task
Configure the Build via Ruby Script
![Page 42: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/42.jpg)
Altering JSPs To Use Foundation StylingBefore
After
![Page 43: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/43.jpg)
Proof Is In The Pudding
Let’s Examine The Results…
![Page 44: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/44.jpg)
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
![Page 45: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/45.jpg)
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)
![Page 46: Retrofitting the hybris Accelerator with Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061204/547e83efb4af9f76458b46ec/html5/thumbnails/46.jpg)
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?