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

Insert photo of speaker here891 pixels h x 688 pixels w

FounderGravity Department

Brendan Falkowski

Mobile First:Responsive Designfor eCommerce(Part Two)

Brendan FalkowskiFounderGravity Department

Falkowski

GravityDept.com

Design Consulting For

Acumen Theme• Used by 1200+ stores

• 3 years of updates

• Ready-to-launch frontend

• Made for customization

gravitydept.com/to/acumen-magento

Magento CertificationAdvisory Board Member

A day in the life

Responsive Designfor eCommerce

Part Two

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/

State of Mobile & Commerce:2013 Edition

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

Responsive Commercein the Wild

skinnyties.com

indochino.com

nuts.com

currys.co.uk

unitedpixelworkers.com

oneillclothing.com

Content First

“If our design was more modern, we’d have better

sales.”

“Making our site mobile-friendly would be huge.”

~ D. Trump

Companies think in design and technology problems.

Most problems are content problems.

Responsive web design is notall the devices + prettiness.

RWD is planning for your content to go everywhere.

Case Study:SkinnyTies.com

skinnyties.com

Content problems:• Information architecture• Product photography• Knowledge leadership

Information Architecture

Limited Navigation Options

Every product spec needsa standardized set of values.

lime greenolive greensea foam greentrue greenturquoise

2.5 inches2.5”2 1/2”2 1/2 inchesTwo inches

avocado greenforest greengreenhunter greenkelly green

New product schemas:• Descriptive• Consistent• Keyword infused

Refined content schemas= Great SEO

“Responsive design is Google’s recommended configuration.”

~ Google

http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html

Product Photography

Knowledge Leadership

Beautiful design without useful content lacks authority.

RWD was not the silver bullet.

Content assumptions affect all devices.

Designing content-firstled to success.

netmagazine.com/features/top-25-responsive-sites-2012

Net Magazine: Top 25 Responsive Sites of 2012

Performance

“What’s another pound to an elephant?”

twitter.com/snookca/status/296746082837344256

Performance is adesign constraint.

Technology is losing theperformance fight.

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

The business case needs to bemade for performance.

“We are not the fastest retail site on the

internet today.”

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

How do we improveperformance?

Ignore the backend.(gasp)

Tune the server!Full-page caching!

EC2 ELB Varnish cloud magic!

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/

A bad frontend underminesthe perfect backend.

Your frontend needsa steward.

You cannot let sitesswell unchecked.

How do we measure performance?

YSlowdeveloper.yahoo.com/yslow/

Google PageSpeeddevelopers.google.com/speed/pagespeed/

WebPageTestwebpagetest.org/

Report Cards

Waterfall Charts

Some mobile devices lack profiling tools.

Hacking your way around it:stevesouders.com/blog/2013/03/26/mobile-waterfalls/

Measured Speedvs.

Perceived Speed

14 Small Ways toSpeed Up the Frontend

1. Reduce HTTP requests.

2. Use DNS pre-fetching.

3. Use cookie-less domainsfor static assets.

4. Use two domainsfor static assets.

5. Put JS at the bottom.

6. Use asynchronousJS loading.

7. Use one CSS file.

8. Link CSS from the site domain.

9. Use a Content Delivery Network.

10. Minify all CSS and JS.

11. Use gzip compression.

12. Optimize images.

13. Use caching andfar-future expires headers.

More info:youtube.com/watch?v=HKNZ-tQQnSY

14. Use conditional loading.

Further Resourcesspeakerdeck.com/keithpitt/keith-and-marios-guide-to-fast-websites

Pitfalls in Responsive Commerce

Markup

One columnTwo columns left

Two columns rightThree columns

Markup Order Matters

One Column template for:• Home• Login / Register• Informational CMS Pages

Custom Templates for:• Catalog > List• Catalog > Product• Checkout > OnePage• Customer > Dashboard

Flexible and Maintainble

Generic columnar layoutsdon’t work when content

changes shape/size.

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/

Responsive Images

1. Image Replacement

2. Over Sizing @2x or @1.5x

3. Super Sizing @5x

4. PictureFill

https://github.com/scottjehl/picturefill

5. Sechna.io Src

docs.sencha.io/current/index.html#!/guide/src

8 Guidelines and 1 Rulefor Responsive Images

“Plan for the fact that whatever you implement will be

deprecated.”

blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/

Bandwidth and latency still can’t reliably be detected.

Users that pay for bandwidth per MB may

want lo-res images.

A Balancing Actfor Skinny Ties

Images @1x

Images @1.5x

Image replacement

Sprite Icons

Tailor your approach tothe content at hand.

Sass + Compass

Sasssass-lang.com

Compasscompass-style.org

maddesigns.de/sass-compass-introduction/

Gruntdeveloper.yahoo.com/yslow/

CodeKitincident57.com/codekit/

Hammerhammerformac.com

Build Tools for Sass/Compass

Scoutmhs.github.com/scout-app/

Left: hierarchy of Sass partials

Right: loader of Sass partials

Sass + Compass Structure

Frontend Frameworksand Prototyping

Bootstraptwitter.github.io/bootstrap/

Foundationfoundation.zurb.com

Build a lean patternlibrary for each project.

“Mini Bootstraps” are the modern design deliverable.

daverupert.com/2013/04/responsive-deliverables/

JS Behaviorand Media Queries

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 Events in JS

touchstarttouchmovetouchend

touchstart eventfires

click event fires300ms delay

Workarounds forclick delays

Touch librarieshttps://github.com/dotmaster/Touchable-jQuery-Pluginhttps://github.com/cheeaun/tappablehttps://github.com/jonpacker/jquery.taphttps://github.com/EightMedia/hammer.js

Here be dragons

https://developers.google.com/mobile/articles/fast_buttonshttp://www.html5rocks.com/en/mobile/touch/

Further Resources

Form Structures

Stack Forms

ScaffoldForms

Adjacent fields are hard to use.

Your user’s eyes should not do this.

Make forms flow in only one direction.

HTML5 Input Types

<input type="email" />

<input type="tel" />

<input type="number" />

<input type="text" pattern="[0-9]*" />

Custom Quantity Widget

Sisyphus.jsgithub.com/simsalabim/sisyphus

Tables

1. No Tables

2. Simple Tables

3. Priority Tables

4. Linearized Tables

5. Scroll Tables

css-tricks.com/responsive-data-table-roundup/

Further Resources

Social Widgets

• 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.

Facebook + Twitter + Google PlusShare Widgets

19HTTP Requests

247KB of data

The Cost of Social Widgets

+2.3sOver WiFi

+11.5sOver 3G

I cannot jump the distance, you’ll have to toss me.

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

The Cost of Share Links

0HTTP Requests

<1KB of data

http://socialitejs.comhttps://github.com/filamentgroup/SocialCount

Missing social counters?

Extensions

Be prepared to auditall your extensions.

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

Checkout

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 Address

Shipping Method

Payment Method

Review + Submit

Progress

Billing Address

Shipping Address

Shipping Method

Payment Method

Review + Submit

Progress

Woven Checkout

Billing Address

Shipping Method

Payment Method

Review + Submit

Shipping Address

Billing Address

Shipping Method

Payment Method

Review + Submit

Shipping Address

Step Summary

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

1. Natural Hierarchy2. Proximity

3. Device Friendly

Again, extensions

Show Me The Money

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%

I hope to hear more storieslike this from you.

Thanks

Questions

GravityDept.comFalkowski