Is Responsive Web Design Right for Your Business?

#RWDwebinar | July 30th, 2013

+

Join the conversation at #RWDwebinar

Igor FaletskiCEO & Co-Founder

@igorskee @mobify | mobify.com

Linda BustosDirector of E-Commerce Research

@elasticpath | getelastic.com

Meet Our Hosts

In today’s webinar1. Mobile Web: The Big Picture

2. What is Responsive Web Design

3. PROs & CONs of Different Approaches

4. How to Build a Google-Friendly Mobile Site

5. What You Need to Consider

6. Q&A with Igor and Linda

#RWDwebinar

We provide the fastest, most secure way of optimizing your website for mobile experiences on a global scale.

Adapt your website for smartphones, tablets and more with our open platform and services, and speed up your

responsive or mobile website with our automated performance optimization features.

Mobify is used by leading Fortune 500 companies and drives hundreds of millions of dollars in mobile revenue:

#RWDwebinar

Commerce Everywhere

We provide ecommerce software that powers the next generation of digital experience and allows you to bring the combined power of all of your technology to websites, apps, and other touchpoints

for the ultimate customer buying experience.

#1 ecommerce blog www.getelastic.com

Market leaders depend on Elastic Path to drive billions of dollars in digital commerce annually:

#RWDwebinar

+

We work together to help businesses deliver amazing mobile and digital commerce experiences that drive

conversions and maximize revenues.

MOBILE WEB:THE BIG PICTURE

#RWDwebinar

#RWDwebinar

#RWDwebinar

#RWDwebinar

Mobile as a Percentage of Retail Sales

#RWDwebinar

2012 2013 2016

Retail Sales

#RWDwebinar

#RWDwebinar

BEFORE AFTER

WHAT IS RESPONSIVE WEB DESIGN?

#RWDwebinar

ONE URLCSS OR

JAVASCRIPTSAME HTML

Google says RWD is 3 configurations

#RWDwebinar

Ethan Marcotte says RWD is 3 front-end techniques

FLUID GRIDS MEDIA QUERIESFLEXIBLE MEDIA

Image Credit: Luke Wroblewski, CSS-Tricks

#RWDwebinar

RWD is understanding users and breakpoints

#RWDwebinar

PROS & CONS IN DIFFERENT

APPROACHES

Three approaches to mobile web development1. Device-specific sites

(aka m-dot or proxy)

2. Server-side solutions

3. Responsive web design

#RWDwebinar

Device-Specific ApproachWith a device-specific approach (aka m-dot or proxy solution), you develop separate versions of their site for each type of device, each with a separate URL.

#RWDwebinar

Server-Side Adaptive

In this setup, the server responds with different HTML (and CSS) on the same

URL depending on the user agent requesting the page.

#RWDwebinar

Responsive Web Design

Rather than building separate sites for each device, responsive design uses a single

website that intelligently adjusts its layout and features based on breakpoints.

#RWDwebinar

Device-Specific ApproachYour site is found at different URLs, based on device:

Desktop: www.example.comMobile: m.example.comTablet: t.example.com

Watch: w.example.com?

Redirects are done through proxy.

#RWDwebinar

You can customize per device

PRO: Device-Specific Approach

#RWDwebinar

Light code = fast to load(but you have to maintain several code bases)

PRO: Device-Specific Approach

#RWDwebinar

Fast to market(but this isn’t a future-friendly solution)

PRO: Device-Specific Approach

#RWDwebinar

You must redirect your users, which is bad for conversions, social sharing, SEO, scalability...

#RWDwebinar

CON: Device-Specific Approach

Multiple code bases to maintain

#RWDwebinar

CON: Device-Specific Approach

Duplicate content

#RWDwebinar

CON: Device-Specific Approach

Extra work is required in order for mobile content to be discovered and properly indexed

by Google (more on this later)

#RWDwebinar

CON: Device-Specific Approach

Server-Side Approach

Your site is always found at one URL:

www.example.com

on desktop, mobile, tablet, etc.

#RWDwebinar

PRO: Server-Side Approach

One URL

#RWDwebinar

PRO: Server-Side Approach

Gain development control

#RWDwebinar

CON: Server-Side Approach

Multiple code bases to maintain

#RWDwebinar

CON: Server-Side Approach

Higher risk in servers

#RWDwebinar

CON: Server-Side Approach

Strong developer skills needed

#RWDwebinar

Responsive Web DesignYour site is always found at one URL:

www.example.com

on desktop, mobile, tablet, etc.

#RWDwebinar

Responsive Web Design

Image Credit: Peter Sheldon, Forrester Research

#RWDwebinar

Google is happy (SEO best practice)

PRO: Responsive Web Design

#RWDwebinar

Performance is not guaranteed

CON: Responsive Web Design

#RWDwebinar

A lot of labour, money, testing and risk is required to build a responsive

website from scratch

CON: Responsive Web Design

#RWDwebinar

Conversions+66% Apple, +400% Android

Transactions +113% Apple, +333% Android

Revenue+100% Apple, +590% Android

Non-mobileconversion +20.3%, revenue +41%

Responsive Test Results: O’Neill

#RWDwebinar

Responsive Results: Time Magazine

#RWDwebinar

Homepage unique visitsincreased 15%

Time spent on siteincreased 7.5%

Mobile bounce ratedecreased 26%

Garmin worked with Mobify to get all the benefits and none of the drawbacks of RWD.

Mobile sales performance+ 55% month-over-month+391% year-over-year

Average order value+ 16% month-over-month+ 70% year-over-year

Responsive Results: Garmin

#RWDwebinar

HOW TO BUILD A GOOGLE-FRIENDLY

MOBILE SITE

#RWDwebinar

Use a device-specific or server-side solution but beware:

• Google ranks these sites lower

• Extra work is needed in order for mobile content to be detected by Google

• Most vendors provide partial or no implementation of the required annotations

#RWDwebinar

Use responsive web design

Google recommends this approach.

Responsive sites built from scratch or adapted by Mobify are automatically crawled and

indexed, and preferentially ranked by Google.

#RWDwebinar

Google: how to fix your mobile SEO

Responsive Configurations Device-Specific Server-Side

Adaptive Adaptive (Mobify)

One URL No (Separate Sites) One URL One URL

Same HTML No No (Different HTML) Same HTML

CSS for Adaptations No No CSS + JavaScript for

Adaptations

Additional Configurations

Canonical and Alternate Tags Vary HTTP Header Not needed (100%

Compliant)

#RWDwebinar

Mobify is the only enterprise-ready multi-screen platform vendor that is officially recommended

by Google and fully compliant with all of Google’s SEO and responsive web design best practices.

#RWDwebinar

WHAT YOU NEED TO CONSIDER

Business considerations1. Time to market

2. $$$

3. Marketing ROI

4. Branding

5. Organizational structure

6. Risk and security

7. Scalability

#RWDwebinar

Technology considerations1. Development resources and skill

2. Development and maintenance process

3. Technology stack and vendors

4. Risk and security

5. Scalability

#RWDwebinar

User considerations1. User experience

2. Context

3. Layout and functionality

4. Localization and personalization

5. Performance

#RWDwebinar

Any questions?

Igor FaletskiCEO & Co-Founder

@igorskee @mobify | mobify.com

Linda BustosDirector of E-Commerce Research

@elasticpath | getelastic.com

Thanks for joining us for #RWDwebinar