1

THE TRUTHS OF RESPONSIVEWEB DESIGN

2

Brands are experiencing the limits of living in a multi-channel,

multi-screen world. Until responsive web design (RWD), we had

to accept the SEO issues and deeplinking challenges that come

with creating a second and third version of a site for mobile

and tablet. Not to mention, the regular maintenance and

consistency problems that rear up while trying to juggle three

different sites.

Responsive web design has been presented as the touted hero

to eCommerce managers, IT, marketers and brand managers

everywhere. The new technology promises to solve a brand’s

ailments and do so with gusto. Before you start your hero

worship... let's learn a little more about RWD.

IS RESPONSIVE A

KNIGHT INSHININGARMOR?

2 3

What is Responsive Web Design?

Responsive web design (RWD) is a way of making

a single website that displays just as optimally on

mobile and tablet devices as it does on desktop.

Responsive architecture displays a website layout

based on screen size – regardless if you are on a

smartphone, tablet, netbook or e-reader, no matter

what the operating system.

You can see responsive web design demonstrated by

taking the corner of your desktop browser window and

increasing and decreasing the size of the window on

www.mashable.com. Menus, images and copy will all

shift and scale based on the size of the window.

4

Why People Are Worshiping It

A Responsive website looks great on all devices and it only has to

be built once, updated once and maintained by one IT group. RWD

essentially saves time, money and resources.

No matter what industry you are in, the benefits of responsive web design can be

appealing. In addition to the points listed above, brands can typically expect a cost

savings in set-up and in the long term by using a single site solution. But for a few

industries, the benefits can be even more significant.

The life-science industry is no stranger to

time-consuming regulatory reviews, and

when you have multiple sites, you have

multiple reviews. Responsive web design

is cutting that review time significantly with

only one site to drag through the time-

consuming process.

eCommerce sites are seeing higher conversion rates, resulting in

up to 30%-40% revenue uplift. Imagine that shoppers no longer

experience discrepancies between desktop, tablet and mobile sites.

Logins, preferences and shopping carts carry easily across all devices.

No more updating bugs between desktop and m.sites.

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

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

4 5

Why People Are Worshiping It The Darkside

We all know the saying, “nothing is all it’s cracked up to be.” While you are

reading this, you are probably looking for the Great Oz behind the curtain.

So here it is…responsive web design has its downsides, just like anything else.

You have to rebuild your website

If you want a responsively designed site, you have to start from scratch. This is

less than ideal for eCommerce companies or companies with very deep and

large websites.

Optimizing is more than just screen size

If a consumer is on their mobile phone, chances are there is a great deal

of device specific controls and features they would have the option to use.

Consumers and brands have come to expect these device controls from their

use of mobile sites. Don’t worry though; there is a new solution for that…

Menu size from DESKTOP to TABLET does not often require a change, but many legacy desktop menu buttons are not touchscreen friendly.

When designing for responsive, a MOBILE eye is important. As mobile is your most difficult screen to design for, a mobile-first approach will save you countless iterations.

6

Adaptive Web Design

Adaptive Web Design (AWD) is responsive web

design without that pesky downside of being

unable to optimize user experience based on

device. AWD allows you to turn a carousel with

arrows from the desktop version of your site,

to swipe-able images for mobile. Or hide that

video that would cause your site to be slow

on mobile. Essentially, you can hide items and

modify controls to create a more optimal user

experience. Some people will use responsive

web design interchangeably with adaptive web

design, but they are by definition, different.

Unfortunately, true AWD requires that you

host device/feature specific pieces of content

separately, and have a way to add them to

the page via Javascript, eliminating the true

“one-site” feature of RWD. Although for the

most part, your site has

one set of code, and

maintenance issues

are drastically reduced.

For most eCommerce

retailers, this is still

considered a “win”.

Technological innovation is moving at light-speed, and the Responsive trajectory is no different.

Solutions that address the weaknesses of Responsive Website Design are already on the market.

Transformative Solutions

Innovation never stops. Technology

companies, have created custom solutions

that give brands the benefit of responsive

web design, without having to rebuild

their website. 5th Finger achieves this by

dropping Javascript into an existing website.

You can find companies offering variations

of this concept. The best options will be

adaptive in their ability to hide information

and provide device specific menus or other

alternatives and, importantly, have an in-

depth understanding of mobile.

What Are My Other Options?

Transformative Solution

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

Technology companies like 5th Finger, A Merkle Company have created transformative solutions such as "5th Finger Responsive."

6 7

Weighing The Options

Separate mobile site

A blank canvas to start from

Less devices to design and implement for

The cost to develop is reasonable

It costs extra to develop and support a separate site

Doesn't have longevity

Link fails and social media fails when linking to non-mobile site pages and SEO investment does not carry over

PROS

CONS

The debate is hot. Mobile solution companies will tell you an m.site is still the best way to go, and techies will say they're in denial. But whether a mobile site, traditional responsive design or a transformative solution lies in your future may depend on these upsides and downsides.

8

Traditional Responsive Web Design

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

A rebuild from scratch is costly and time consuming

Designing for small devices without knowledge of mobile and tablet user behavior can leave you with a less than optimal mobile experience

Some large screen mobile devices or tablets have a similar screen size to small laptops, causing an unintended layout to be presented on a device

Transformative Solution

All pros under traditional responsive plus:

No rebuild necessary

A completely separate style sheet ensures that the retrofit will not interfere with existing desktop styles

Less costly responsive solution

An existing site with muddled code and patchwork can extend implementation time

The content of some existing sites does not format well for smaller screens

Some large screen mobile devices or tablets have a similar screen size to small laptops, causing an unintended layout to be presented on a device

8 9

When to Use Responsive –

Companies have already begun making the shift to responsive design. First in the queue were media/

publishing companies with customers who frequent their sites on a mobile or tablet device. Retailers are

beginning the shift with a few, such as NARS Cosmetics and Samsung, leading the pack. It won’t be long

before more sites are responsive than are not. But before you decide if responsive or a transformative

solution is your chosen route, let’s qualify you.

Hector, from Life Science Products:

“I’m Starting From Scratch“ or

“It’s Easy to Rebuild My Website“

If you have one site used across multiple digital

channels, and the need or ability to easily build a

website from scratch, responsive web design or

adaptive web design is a win for you. If you have

highly engaged mobile users who behave very

different than your desktop users, you should

consider AWD. This will allow you to hide items and

adjust menus to tailor to different screens.

Natalie, from Pretty in Pink Clothing:

“I Have to Update My Current Website”

A transformative solution is your best route

when you have a website viewed across

many digital channels, but you are not ready

to rebuild from scratch. This is a common

situation for eCommerce websites.

10

Martin, from Blue Whale Advertising:

“I’m Doing a One-off Mobile Campaign”

A mobile-first approach to RWD is generally

the quickest and most cost effective way to get

this campaign up and running. Martin will have

eliminated the need for separate mobile hosting for

a mobile site.

By designing your RWD site for mobile first,

you are not left struggling to create an optimal

layout from your desktop site assets. Mobile will

always be your most challenging screen to design.

Creating the mobile layout without constraints will

definitely benefit you.

Barry LatimerSenior Director of Technology5th Finger, A Merkle Company

Walker Sands

Merkle Case Study 2013

The future of m.brand.com site is over. We should use the "Mobile First" paradigm to create a responsive site for mobile specific campaigns, which could be easily extended for tablet and PC. Let's use progressive enhancement.

Responsive typically has 20% better SEO results than a non-responsive site

23.1% of web traffic was on mobile devices by Q4 2012

10 11

Adapting Your Analytics For RWD

When it comes to RWD Analytics, segmenting is the primary difference you can expect over

analytics from your traditional desktop, mobile and tablet sites. Previously, your site analytics

were reported based on device, now it is screen size. By establishing screen size breakpoints, you

are able to segment your RWD website traffic. There are a couple ways to go about segmenting.

Segmenting is not as cut and dry as you may think. There are a number of devices with different

resolutions that all fall into the class of mobile, tablet or desktop. There are 77 Android phones

alone, and not all of them are the same resolution. When you add all the rest of the phones on

the market, you can see how this could become an issue. Multiple phones and tablets ride right

on the edge of these two categories. This is why segmenting is a process that takes significant

consideration, education and sometimes revisions.

1.

2.

When a page is loaded, the device’s resolution is captured.

Your analytics system stores the device breakpoints and reports

device traffic based on your preestablished breakpoints.

This route is generally advised.

Capture resolution and segment device groups post

capturing. You can then segment and filter your reports by the

different breakpoints you are optimizing for.

Breaking Down Breakpoints

12

Look Who's Already Doing It

Traditional Responsive

ACTEMRA

ACTEMRA’s responsively designed site

allows healthcare professionals access to

the same patient profile information across

all devices. This optimized experience gives

healthcare providers the ease and comfort

of using the website’s dosage calculator

and risk evaluator without worrying about

any disconnect in patient information from

mobile to tablet or desktop.

Skinny Ties

The eCommerce tie site clearly designed

“mobile-first,” and thought outside

traditional web expectations. By making

their large product showcase banner

become a clickable product carousel on

mobile, they have created a unique way

of addressing product menus. This is not

only visually appealing, but functional and

interactive. And aren’t those the ingredients

we all strive for when creating a website?

12 13

Transformative Solutions

NARS Cosmetics

The cosmetics company utilized 5th Finger

Responsive to achieve all the benefits

responsive design, without rebuilding their

current site. NARS had two goals in mind

– mutli-device presence and the ability to

keep maintenance in-house. Proving the

responsive theory, post-launch eCommerce

check out conversions increased for

smartphones by 54%, while tablet

conversions increased by 24%. And within

one month of launch, the NARS IT team is

successfully maintaining the website.

1-800 CONTACTS

The 1-800 CONTACTS’ responsively designed

site allows customers to easily manage their

account and shopping cart without confusion

from one device to the next. As a brand all

about convenience, you can imagine how

significant of a channel mobile is to the

contact provider. By minimizing steps to

purchase with the most popular brands on the

home screen, 1-800 Contacts is making check-

out easier, and customers happier.

About 5th Finger, A Merkle Company

5th Finger connects clients with consumers across all digital channels using its unique 5th Finger Responsive and mobile solutions. The market dominating 5th Finger Responsive offers brands all the benefits of Responsive Design, without having to rebuild their current website. Our award-winning mobile app and tablet solutions place powerful brand experiences in the hands of consumers. As a part of the Merkle family of companies, 5th Finger is backed by innovative technology, world-class service and data-driven strategy. We deliver mobile focused answers to brands' biggest digital challenges.

Visit 5thfinger.com to learn more

For more information on mobile retail or 5thfinger contact us at:

mobilegurus@5thfinger.com