@aweil #convcon

Mobile First?

@aweil #convcon

What is Mobile First?

It’s an Opportunity–Reach more people –Focus on content– Innovate–Convert more customers

http://bit.ly/16ZN7pe

Instead of starting with a desktop site, start with a mobile site & progressively enhance to devices with larger screens.

@aweil #convcon80% of mobile revenue Derived from visitors browsing the full site from a mobile device

35% of mobile visitorsPrefer to use a full site over an m.site whenever the option is provided

(souders)

One in fiveElectronic purchases is made using a mobile phone

(BuzzCity)

@aweil #convcon

½ billion mCommerce shoppers by 201671% of smartphone users shop on their mobile

48% of retail shopping time already on mobile

@aweil #convcon

@aweil #convcon

Apparel & Accessories sold $1Bn via mobile in Q113

@aweil #convcon

• You can’t just shrink an existing site– Size matters…but it really IS more than

that– (common) Assumptions are your enemy

• Mobile cannot be treated as a subset– Start simply by removing excess– Iterate and grow with testing & validation

http://bit.ly/158FIEH

Quick notes for context

@aweil #convcon

51% say websites hard to navigate & use

46% say product images are too small

41% are concerned about security26% feel that checkout is frustrating

41% are materially concerned about security

@aweil #convcon

Conversions Support Mobile First

Website Visits by Device

Smartphone Revenue / Session

@aweil #convcon

How Does Your App Behave?

• Lose the signal– Find a basement or elevator

• Mix it up– Walk in and out of WiFi areas

• Have a cuppa– Find slow, saturated WiFi (coffee shop, train)

• Shut up and drive– Ride along in a car to swap towers, signals

• Paint a picture– Map your findings to understand and prioritize

http://bit.ly/14MOmNr

@aweil #convcon

You Need To Know…It’s Important

42%

29%

28%

Will go to a competitorWill NEVER RETURNWill wait a year

85% expect mobile to be

FASTER

57% experience

PROBLEMSWILL NEVER RETURN!!

@aweil #convcon

Users perceive sites to be 15% slower than they really are

@aweil #convcon

• You need to start over – Design for the smaller, more limited devices– Note: conceptually, not necessarily a rollback

• Basic abilities to plan for– Responsive images for various viewports, DPI– Adaptive capability based on env. & capability– Dynamic layout as screen real estate increases– Optimized user experience to drive conversions

http://bit.ly/19QS5t2

So what’s the point?

@aweil #convcon

• Launched mCommerce app in 2012• Visualize product: Virtual stickers via

camera• 5 column design (conversions vs. columns)

• Cost: $250,000– 1,500 staff hours from 10 people– 3 months to implement

http://bit.ly/18oin2z

Enough hyperbole. Prove it.

1 col 2 col 3 col 4 col 5 col

Device(s) Phones Tablets Tablets & Desktops

Desktops Widescreen Desktops

Traffic 16% 6% 54% 17% 7%

@aweil #convcon

It’s a Journey

http://bit.ly/15BQqGT

@aweil #convcon

@aweil #convcon

Do you even need a mobile site?

10% site traffic from mobileCalculate

– % target customers– $ to implement

Would another solution have a larger impact?

@aweil #convcon

@aweil #convcon

Consider Existing Investments

• Site Design and Development

• Maintenance & Support

• Hosting / Server fees

• Marketing, automation, analytics

• eCommerce Software

http://bit.ly/18vHK66

@aweil #convcon

What is your objective?

@aweil #convcon

@aweil #convcon

Goals Help Determine “How”

• Less expensive

• Faster development

• Simpler deployment

• Better tracking

• Best for productivity

• More robust

• Better interaction

• Faster

• Offline access

• Best for interactivity

Site App

@aweil #convcon

LinkedIN Went Native

2012: HTML5 for efficiency & agility

8-10%Mobileusers

Appsrunningout ofMemory

Lackedtesting &profiling

2013: Native for user experience

Majority of Traffic from

mobile

Betterfeatures (useHTML5, CSS

for email)

Apple andGoogle drive

innovation

http://bit.ly/15NdyAg

@aweil #convcon

Educate Yourself

http://bit.ly/14IgtMN@aweil #convcon

@aweil #convcon

Advantages Disadvantages

Enables mobile-optimized content Split mobile/main link value

m. subdomains synonymous with mobile

Large investment to implement redirects

Could affect usability/CRO

Mobile URL Redirect

@aweil #convcon

Consider Consistent Content

http://bit.ly/14IfBrC

@aweil #convcon

RWD Your site works well on every device

Advantages Disadvantages

No duplicate content maintains rankings Requires additional code re-working

One URL means no mobile crawlers Can’t differentiate mobile content

Max link value. No risk of split link value Could affect usability/CRO

No redirects = low latency & fewer errors New code may affect rankings

@aweil #convcon

Responsive Not.

How do Users Experience You?

@aweil #convcon

For 90/10 Go to Extremes

@aweil #convcon

A Note on Device Support

http://bit.ly/159wwjl @aweil #convcon

@aweil #convcon

And It’s Becoming More Difficult

Growth of Webpage Footprint & Numberof Requests (1995 to 2012)

(Sources: Demenech 2007, Gomez 2008, Charzinski 2010, Souders 2012)

Ajax / HTML5 Becomes

Mainstream

Global Internet Devices Shipment (2005 to 2016, Unit: 500M)

(Source: Business Insider Mobile Report 2012)

2005

Personal Computers

Smartphones

Tablets

2006 2007 2008 2009 2010 2011 2012E2013E2014E2015E2016E

@aweil #convcon

Analyze & Optimize

http://bit.ly/17nUE7z@aweil #convcon

@aweil #convcon

Performance Impacts Conversions

28.7%faster

slower

BETTER PERFORMANCE=

HIGHER CONVERSIONS

11.9%Quality Score

impacts cost per click

PerformanceCPCLOWERS

IMPROVING

@aweil #convcon

Performance = Experience + Speed

4.3%in REVENUE

2 secondsslower

Pages that were…

DROP

2.2 secondsimprovement in

landing page speedINCREASED

DOWNLOADS

15.4%by

60% faster

INCREASEDDONATION CONVERSION

MakingBarack Obama’s website

14%

1 seconddelaycauses a

7%in CONVERSIONS

1 seconddelaycauses a

16%in CUSTOMERSATISFACTION

DROP DROP

1 seconddelaycauses an

11%in PAGE VIEWS

DROP

@aweil #convcon

All Things Are NOT Created Equal

DNS Resolution

ServerConnection

Server‘Wait Time’

Page Downloaded

Browser Title Bar Appears

Page Starts to Render

Page is Displayed

Ready for Interaction

• Network bottlenecks

• Number of round trips

• Content Size & Complexity

− Page asset weight (4.3 MB)

− Number of requests (304)

− 3rd party widgets

− Use of CSS and Javascripts

• Serialization (sequential loading & execution of individual page assets)

LEGENDDNSResolution

Content Delivery

User ExperienceDelivery

Challenges

StartYour Website

0.013Sec

1.056Sec

2.116Sec

11.389Sec

1.687Sec

0.748Sec

0.062Sec

@aweil #convcon

3rd Parties = Distributed Problems

http://bit.ly/1dsV3b7

@aweil #convconhttp://bit.ly/15aRBtG

Pick Your Battles

@aweil #convcon

Engaging Experiences Aren’t Free

– Fonts

– Retina Images

– Audio

– Video

– 3rd party tags

http://bit.ly/16GoSfX

@aweil #convcon

Image-ine that…

20%

4%

5%

70%

1%

Average Bytes per Page by Content Type on Mobile

ScriptsStylesheetsHTMLImagesOther

@aweil #convcon

Base resolution(300 x 200 px)

Retina/HD resolution(600 x 400 px)

Jpg compression 80 / 21 kb Jpg compression 31 / 16 kb (75% of base)

Can you spot the difference?

@aweil #convcon

Compress

Aim LOW– Lowest acceptable

quality

Investigate Formats– WebP?

Be Progressive– Can lead to better

perceived perf

@aweil #convconhttp://bit.ly/133ijam

Improve the Experience

Challenge User Experience Issues

Goal Increase traffic & conversions

Solution Accelerate page rendering

Results 30% more conversions

“That’s a very real figure indicating more sales and more money in my pocket.” James Ness, Founder and President

@aweil #convcon

@aweil #convcon

• Yottaa case studies

Put Your Site on a Diet

http://bit.ly/15aVu1E

Challenge 1.4 MB page, heaviest 20% on web

Goal Increase traffic & conversions, incl. mobile

Solution Reduce Requests 41%

Results 53% faster loads, increased traffic 100%

“With Yottaa turned on, the Big Train site just flies on mobile devices.” Jim Wendt, eCommerce Marketing Manager

@aweil #convcon

@aweil #convcon

Experience is EVERYTHING

74%OF SHOPPERS

WILL ABANDON TRANSACTIONS

OVER 5s

$3BnPOTENTIAL

CONVERSIONREVENUE

LOST

70%cite poor performance

CART ABANDONMENT

IN eCOMMERCE

46%

Say performanceIs materialto BRAND loyalty

52%Loss in CONVERSIONSfor every 1sec

7%SEM CLICKS

DOUBLEDINCREASEDPAGE LOAD 5s AND

@aweil #convcon

In Summary

• Analyze Needs• Either

– Go Mobile First!– Think mobile!

• Optimize Images & Rendering• Evaluate 3rd Party Javascripts• ITERATE!

@aweil #convcon

Thank You!

ROI of WPO eBook

http://www.yottaa.com/how-to-prove-the-roi-of-wpo-ebook

1.Analyze Needs2.Go Mobile First! Think mobile!3.Optimize Images & Rendering4.Evaluate 3rd Party Javascripts5.ITERATE!