Top Banner
1 President [email protected] 415.578.8929 © 2013 5th Finger 5 Simple Actions to Make a Measurable Impact on Your Responsive Site
24

5 Simple Actions to Make a Measurable Impact on Your Responsive Site

Aug 21, 2015

Download

Mobile

5th Finger
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

1

[email protected]

415.578.8929

© 2013 5th Finger

5 Simple Actions to Make a Measurable

Impact on Your Responsive Site

Page 2: 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

Page 3: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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

Page 4: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

4

We consider our clients to be partners in innovation

Page 5: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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.

Page 6: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

6

Simple Actions for ROI5

Page 7: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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

Page 8: 5 Simple Actions to Make a Measurable Impact on Your Responsive 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)

Page 9: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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

Page 10: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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

Page 11: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

11

2 Speed is Critical to ROI

Increased speed means:

• Increased ROI

• Page load speed

• User experience speed

Page 12: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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

Page 13: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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

Page 14: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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

Page 15: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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.

Page 16: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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.

Page 17: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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+

Page 18: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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

Page 19: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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

Page 20: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

20

Page 21: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

21

Page 22: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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

Page 23: 5 Simple Actions to Make a Measurable Impact on Your Responsive Site

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