a marketer’s guide to responsive web design - merkle · • responsive web design is the clear...

39
A marketer’s guide to Responsive Web Design Patrick Collins President, 5th Finger, a Merkle Company

Upload: lythien

Post on 15-Feb-2019

215 views

Category:

Documents


0 download

TRANSCRIPT

A marketer’s guide to Responsive Web Design

Patrick Collins President, 5th Finger, a Merkle Company

Agenda

• Who is Merkle Mobile and 5th Finger?

• Some trends we’re seeing with the mobile web

• A primer on Responsive Web Design. Pros and Cons

• A new approach: Transformative Responsive Web Design (don’t rebuild your site!)

• Some Results

2

Merkle Mobile Group

Mobile User Experience Development Team (50 staff)

• iPhone / Android App Platform • Responsive Web Design • Mobile SEO services • Mobile Analytics

Mobile Contact Strategy Team (8 staff)

• Contact Strategy Development • SMS database development • SMS campaign effectiveness and

MMA compliance • Mobile Email Optimization • Push Notification Contact Strategy

and Execution

Digital Media Team (16 staff)

• Mobile Advertising • Mobile Paid Search • Mobile Display Optimization • Mobile Search Geolocation

3

Services Strategic engagement

Some of our most innovative work…

• Convenient customer access to coupons and deals across app and mobile • App Development, Mobile Site, AB testing and

analytics

• Review Wells Fargo’s Mobile Analytics capabilities for best practice

• After 14 stakeholder interviews a “mobile best practices gap assessment” led to recommendations of a new analytics platform.

• Comprehensive Mobile Marketing Contact Strategy.

• For Disney we provided a comprehensive marketing plan for their mobile marketing strategy including audience segmentation and SMS database marketing strategies.

• Acquisition based alert program mobile site, mobile app with over a 1,000,000 opt-ins

• Platform Services Retainer - Text Messaging,

Mobile Internet, App, mCoupons, Scannable Codes

4

• Build a tablet site for llbean.com • 5th Finger Responsive deployed to adapt their existing website.

30,000 foot view The Mobile and Tablet Web Phenomenon

Mobile Traffic as a % of Global Internet Traffic

6 Source: StatCounter Global Stats, 5/13

Mobile and tablet must be your first priority!

7

Most Brands’ reaction to tablet traffic on their sites

iPods changed the media industry… iPhones ramped even faster… iPad growth (3x iPhone) Leaves “Siblings” in Dust

9

Android ‘Phone’ Adoption Has Ramped even faster – 4x iPhone

10

Despite Tremendous Ramp So Far, Smartphone User Adoption Has Huge Upside

11

But now, is the best time to act! Responsive Design is here.

According to Ethan Marcotte,

Responsive Web Design is:

“A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout.”

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 2 Responsive unifies silo’ed teams (mobile vs desktop) and helps foster a more customer centric view of your web channels.

REASON 3 Resources and budget are constant hurdles faced by marketers and responsive is in a position to ease the pain.

Why It’s A Game Changer

Video of Responsive Design Examples

14

Let's take a little closer look as to what makes these sites successful responsive design executions. HM Insurance You'll notice as the screen gets smaller a few things change. For a start, the menu collapses under a recognizable little affordance button which expands down. A common tool being used by everyone from Facebook to Disney. Additionally, The image choices on the homepage carousel get neatly cropped in on for mobile without looking odd. Nice choice of images, and no need to use separate images. First Merit Bank Again as we cross the breakpoint here between PC and tablet you see the whole navigation structure change <resize quickly back and forward between the PC/tablet breakpoint a few times> As the move down to mobile you'll notice that the navigation focusses on content useful for customers on the go. Locations, Customer Service and Login. (again toggle quickly between tablet and PC) You'll also notice that the quotes and columns from their desktop site become one rotating image on mobile. They are using all their assets, but in a smart mobile friendly approach. Capital One (Show skimming through tablet site in background) Other major Financial companies like Capital One are investing in responsive to address their tablet customers. While they currently retain their m.capitalone.com for mobile customers, you can bet they will be working on transitioning them to their responsive site in the near future. Disney Disney's responsive site launched recently and was lauded as an example of Web simplicity and perfection with it's clever use of Responsive Desgin. Disney is a brand with an immense amount of brands under its umbrella, so responsive is a natural draw to try and combat deep-linking issues when linking from emails, Facebook and other sources. While the company is still undergoing what is surely a multi-year project to make its entire site responsive, it has already done a great job of addressing a number of disney.com pages. The site’s UI elements are stripped free of ornament and embellishments, putting the focus squarely on the content. Videos and games are the star of the Disney show. You can easily swipe through the content <show the neat carousel through the characters> For the Disney team, maintenance costs and time spent managing different sites have significantly improved. Microsoft The responsive microsoft site has a mobile first design approach. Simple text and imagery has carries across mobile, tablet and desktop. You will notice that the desktop version has a mobile feel with their style of drop-downs and clear columns. An approach that saved them iterations. A hero imagery easily crops and scales was chosen to minimize time investment All of these examples are traditional responsive web design, now lets look at something a little more transformative for sites who were not ready to rebuild from scratch..

The Traditional Approach to Mobile Web (2008-2011)…

www.safeway.com m.safeway.com

Do you have an existing m.site?

Poll Question:

Device Optimized Device specific touch events and features

Ease of Maintenance Easy to update and maintain means lower costs

Single URL allows Deep Linking Links from Email & Social work on all devices

No website rebuild Quick to launch – No Site rebuild required

Maximized SEO 20% Increased organic traffic

Separate Mobile Site

Traditional Responsive Design

Mobile Web Design – Options Comparison

If only we could get the benefits of Responsive Web Design without rebuilding the website…

Transformative Responsive Web Design - allows the code of an existing site to be morphed into a flexible multi-device Responsive solution.

Transformative Responsive Web Design – what is it?

Transformative Responsive Web Design - allows the code of an existing site to be morphed into a flexible multi-device Responsive solution.

Transformative Responsive Web Design – what is it?

Transformative Web Design takes the best features of

• Responsive Web Design

• Adaptive Web Design (also known as Progressive Enhancement) and

• Modern HTML to manipulate pages

It allows the code of an existing site to be morphed into a flexible multi-device Responsive solution.

+ + RWD Modern HTML

Transformative Responsive Web Design

Video of LL bean, NARS, 1800 (2 minutes)

22

5thFinger.js

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

Step 1 – Define ‘layout flows’ for device breakpoint (typically 3 or 4).

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

On Any Existing eCommerce Platform

5th Finger Responsive Technology

Device Optimized Device specific touch events and features

Ease of Maintenance Easy to update and maintain means lower costs

Single URL allows Deep Linking Links from Email & Social work on all devices

No website rebuild Quick to launch – No Site rebuild required

Maximized SEO 20% Increased organic traffic

Separate Mobile Site

Traditional Responsive Design

5th Finger Responsive

Mobile Web Design – Benefits 5th Finger Responsive Web Platform

Quick to market A blank canvas to start from The cost to develop is reasonable

Consistent branding and messaging across all channels Supports all devices, from the smallest mobile to a large plasma TV It's ready to support any newly released devices in the future

All pros under traditional responsive +plus…

No rebuild necessary A completely separate style sheet ensures the retrofit won’t interfere with existing desktop styles Less costly responsive solution

Two/Three websites to maintain Dilution of SEO / SEM investments and rankings Deep Linking Fail

A rebuild from scratch is costly and time consuming Hard to tailor to individual device situations.

An existing site with muddled code and patchwork can extend implementation time The content of some existing sites do not format well for smaller screens

Traditional Responsive Transformative Solution m.site

Which one is right for me?

Case Studies

We initially engaged with NARS because they were concerned that they were behind their competitors as they had no mobile site or presence. Where NARS saw a challenge, 5th Finger saw an opportunity for NARS to leapfrog their competitors with a next-generation mobile solution – Responsive Design.

NARS Cosmetics

NARS Cosmetics

NARS Cosmetics

NARS Cosmetics

vs.

NARS Cosmetics

Through extensive collaboration with NARS and the powerful 5th Finger Responsive framework, we were able to launch NARS’ mobile and tablet site experiences within just 14 weeks.

NARS Cosmetics

54% Increase in Checkout

Conversion

NARS Cosmetics

48% Increase in Checkout

Conversion

NARS Cosmetics

Tablet: Before

Tablet: After

Responsive WINS: mdot: 10.6% conversion rate

Responsive: 11.5%

1-800 CONTACTS now has full control of the Responsive codebase and technology – no more black box provider.

1-800 CONTACTS

Take Aways

• Mobile Web Traffic will hit 30% of all traffic by 2013. • Many brands experience 30% tablet traffic already. • Responsive Web Design is the clear winner for mobile and web tablet sites development. • If you are unable to rebuild your site, Transformative Responsive Web Design is the best

option over a traditional m. site. It has higher conversion rates, lower costs of maintenance, better SEO benefits and a much richer experience.

38

39

[email protected]

THANKS!