retrofitting the hybris accelerator with responsive web design

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?