How to Find Your Ideal Technical Responsive Design Approach

1

Steen AnderssonVice President

steen.andersson@5thfinger.com

© 2013 5th Finger

How to Find Your Ideal Technical

Responsive Design Approach

2

1. Demystifying the Types of Responsive Design

2. Matching the Approach to the Scenario

3. Delivering ROI

Agenda

3

About 5th Finger

We are a team of 50 5th Finger employees based in San Francisco and backed by over 1,400 Merkle employees.

About 5th Finger

We are a team of 50 5th Finger employees backed by over 1,600 big data professionals at Merkle.

Our acquisition by Merkle adds multi-channel capabilities that allow us to optimize and expand our client services.

2013 DMA Mobile Innovation Award Finalist

2012 Smarties WinnerBest Mobile Campaign

4

We consider our clients to be partners in innovation…

5

Responsive Web Design is a Game Changer

REASON 1

For the first time, Responsive is enabling the practical realization of omni-channel marketing and e-commerce. Prior solutions were not maintainable.

REASON 2Responsive completely unifies silo’ed teams (mobile vs desktop), silo’ed code, silo’ed content, and silo’ed analytics.

REASON 3One Web with a single URL. Greatly improved SEO benefits, much easier URL sharing in email and social.

6

Demystifying the types of Responsive Design

7

Demystifying the types of Responsive Design

Technologies and approaches are being combined into a single equation. It can be confusing.

Com

ple

xit

y o

f Exe

cuti

on

Site Loading Time

Ground-up RWD

Transformative + RESS

Ground-up RWD+ RESS

Transformative

Larger is More Expensive

*All single site approaches provide SEO and omni-channel benefits

8

Ground-up Responsive Design

A single website that displays an optimized layout based on screen width.

It will fluidly change and respond to fit any screen or device size.

9

Ground-up Responsive Design

Considerations

Do you have 6-12 months to rebuild?

How long ago did you rebuild your site?

Benefits

Fresh codebase

Downsides

Have to rebuild your website

10

Transformative Responsive

A responsive design approach that uses CSS and Javascript only to make an existing site responsive.

11

Transformative Responsive

Considerations

How soon do you plan on rebuilding your site?

Is it difficult to get large site upgrades approved?

Benefits

Responsive in 7-14 weeks

Downsides

Dependent upon stability of existing site

12

What is RESS?

RESS = REsponsive Server Side

13

No RESS vs RESS

NO RESS RESS

All HTML, CSS & JS loaded by phone

Only Select HTML, CSS & JS loaded by phone

On Device On Device

On Server On Server

4x source files4x source files

4x source files2x source files

14

Why RESS

Speed

Specific experiences are possible based on device

Requires more maintenance

Requires a device DB on server. If device database falls out of date, you may end up serving the Desktop page to a brand new phone.

May be dependence upon vendor for site functionality

Positives Negatives

15

What is Adaptive Web Design?

• Delivers the same outcomes as responsive (mobile,tablet & Desktop from one URL), however, the technology approach is different.

• Similar to RESS, the server is determining the device type and selecting the right page layout.

Downside of this approach is that if your device database falls out of date, you may end up serving the Desktop page to a brand new phone.

Heard of Progressive enhancement?A term for an approach, or process that means you design with the least common denominator and add more content as you expand. Much like – Mobile First Design

16

Which is the Best Approach for You?

17

Considerations

The state of your current site

Lifespan of current site

Do you have an mDot site

Budget

How important is internal ownership

Site Speed

18

Scenario 1: Old Website, With Budget And Support

Typical Solution:

Ground-up Responsive

(or Transformative followed by Ground-up Responsive)

19

Typical Solution:

Transformative Responsive

Scenario 2: Old Website, Limited Budget And Support

20

Scenario 3: Old Website, Limited Budget And Support

Typical Solution:

Transformative Responsive

21

Scenario 4: Well Maintained Website and mDot, Just Need Tablet

Typical Solution:

Transformative Responsive (Tablet breakpoint only)

22

What’s the ROI for RWD?

23

Common E-Commerce Conversion Rates

mDot

Mobile Site

Conversion

Rate: .93%

Accessed on…

Desktop

Tablet

Mobile

Responsive DesignDesktop Site

2.51%

2.6%

.79%

2.51%

3.9%

1.02%

24

I have an mDot, but I want Responsive Design

Assumptions

Current conversion rates: Desktop 2.51%, Tablet 2.61%, Mobile .93%

New conversion rates: Desktop: 2.51%, Tablet: 3.92%, Mobile: 1.02%

Average order value: $100

Total Monthly Visitors: 500,000

Costs: Full responsive site rebuild $600,000, and $2,000 hosting, Transformative Responsive $130,000

2 Year ROI with Transformative$1,643,429

2 Year ROI with Ground-up$1,173,429

mDotDesktop Responsive

25

I’m keeping my mDot, just need a tablet breakpoint

Assumptions

Current conversion rates: Desktop 2.51%, Tablet 2.61%, Mobile 0.93%

New conversion rates: Desktop: 2.51%, Tablet: 3.92%, Mobile: 0.93%

Average order value: $100

Total Monthly Visitors: 500,000

Costs: tDot site $100,000 and $2,000 hosting, Transformative Responsive $100,000

2 Year ROI with Transformative$1,558,710

2 Year ROI with a tDot site$939,957

mDotDesktop Responsive mDot

26

Some KeyLearnings

27

1Your users want the full site

mDot siteLoad Time : 6.8sContent : LimitedConversion Rate : 10.6%

ResponsiveLoad Time: 7.2s (5.5% slower)Content : CompleteConversion Rate : 11.5% (10% higher conversion rate)

20% of people use their mobile device as their primary internet device.- 2013 Pew Research

28

Speed matters

• Have page load speed goals, e.g. < X seconds over LTE on iphone 4.

• Address experience speed. ie – use the appropriate keyboard for the input type.

• Expert developers know:

1. Image Selection and Optimization (50-75% speed improvement).

2. Careful use of Javascript and lazy loading to make it “feel faster”.

3. Minify and compress all CSS

2

29

Internal Processes

Designers need to understand HTML and CSS.

• Use design tools like Axure to create rapid prototypes and try to avoid tools that are too pixel perfect like Photoshop.

• Never look at just the desktop layout, you should be reviewing all layouts simultaneously.

3

30

4 Consider your Analytics and AB testing strategies.

Requires a complete rethink of A/B testing and analytics strategy. Adds a per breakpoint flavor.

Plan early

31

Is my site old?

Yes

NoYes

NoDo I have a budget?

Do I have time?

Is internal ownership important?

Yes No

NoYes Consider RESS

If you answered “No” to any of them, then transformative could be the best approach.

If you answered “Yes” to any of the above factors, ground-up could be the best approach.

Ask Yourself These Questions

32

For more information on responsive, download our free whitepaper online at:

5thfinger.com/whitepaper/featured

Contact us:415-294-2058newbiz@5thfinger.com