1

Presidentpatrick.collins@5thfinger.com

415.578.8929

© 2013 5th Finger

5 Simple Actions to Make a Measurable

Impact on Your Responsive Site

2

• About 5th Finger

• Responsive is a Game Changer

• 5 Simple Actions to Make a Measureable Impact

• Transformative Responsive Design

• Questions

Contents

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

Simple Actions for ROI5

7

Consumers will transact more on a fully featured responsive site, than a high speed dumbed down experience with less content and functionality.

1Your users want the full site

8

1Your users want the full site… proof

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)

9

Prioritize your content on each page.

How? Use your analytics package and build a heat map of where people click from your home page. Prioritize those elements first and optimize.

1Your users want the full site.. but prioritize carefully

10

Brands still should include a “full-site link” to satisfy user skepticism created from past minimal mobile experiences.

1Your users want the full site..

11

2 Speed is Critical to ROI

Increased speed means:

• Increased ROI

• Page load speed

• User experience speed

12

• Specify your page load speed goals, e.g. LTS on iPad2 < 8 seconds

• Expert developers know:

1. Image Selection and Optimization (50-75% page download is here).

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

3. Minify and gzip all CSS

2 Speed is Critical to ROI … Page Load Speed

13

Experience Speed

Reduce form input. Make this a priority!

(Learn from the master at lukew.com)

2 Speed is Critical to ROI … Experience Speed

14

Experience Speed

Specify input type to make keyboard adapt to expected data type (i.e. email or number).

2 Speed is Critical to ROI … Experience Speed

15

3 Adopt a Mobile First Design Process

Keep the design in a flexible grid to maintain the fluidity of the content.

Scale up from 1 column on mobile to 3-5 columns on the desktop.

16

3

Adopt a Mobile First Design Process

Designers need to understand HTML and CSS.

Since designers will be focusing on the percentages of the sites instead of the pixels, use design tools like Axure to create rapid prototypes and try to avoid tools that are too pixel perfect like Photoshop.

17

3

Adopt a Mobile First Design Process

670 px 1024 px0 px

small and large tabletssmartphones desktop

480 px 768px

high end smartphones and portrait iPads

Nice to have first generation smartphones

in portrait mode

Must have

1600 px+

18

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

19

Transformative Design is a responsive design approach which doesn’t require you to rebuild your existing website. You are essentially transforming your current site to be responsive.

5

Consider responsive a journey, not a big rebuild

20

21

22

5th Finger Responsive Technology

5thFinger.js

Step 2 – 5thFinger.js tags are added into the existing website’s HTML code.

Step 1 – Define ‘layout flows’ for device breakpoint.

Step 3 – When the site is loaded, 5thFinger.js re-flows pages dynamically, hiding or expanding any content.

On Any Existing eCommerce Platform

23

Summary

1. Users want the full site2. Speed means skilled developers3. Adopt a mobile first design process4. Adjust your analytics and A/B testing strategies immediately5. Consider responsive a journey, not a rebuild

24

patrick.collins@5thfinger.com