Responsive Design is NOT a Mobile Strategy

JASON “RETAILGEEK” GOLDBERG – RAZORFISH BROOKE WOLF – eBAGS GARY PENN – TRUE RELIGION BRAND JEANS

RESPONSIVE DESIGN IS NOT A MOBILE STRATEGY

Mobile Web

This is NOT a mobile strategy

This is a mobile strategy

Mobile Web

Mobile App

Mobile E-Mail

SMS

Mobile POS

Mobile In-Store

Mobile Wallet

Mobile Customer

Service

3rd Party Mobile Apps

Mobile Social

iBeacons

Mobile Chat

Responsive Design

Adaptive Design

Dynamic Design

Mobile First

Mobile Optimized

Native Mobile

Mobile Tolerant

Fluid Design

Liquid Layout Break Points

ViewPort

User Agent

Touch Centric

M dot

Progressive Enhancement

Hybrid Design

We need a common language

Business User Tech/Dev

A website that looks great on a laptop and a

smartphone

A website that adapts the layout to the viewing environment by

using fluid grids and CSS3 media queries

(Ethan Marcotte)

“Responsive Design”

3 approaches https://www.google.com/think/multiscreen/

1. Client Side

AND

1. Client Side (Responsive Web Design)

One URL with responsive content

Client Side Adoption

yourname.com/category

2. Server Side

OR

2. Server Side (Dynamic Serving)

One URL Show different content according to the user

agent

One URL

Server Side Adoption

yourname.com/category

Wait, isn’t that Adaptive Design?

A high level design philosophy for progressive enhancement that can be achieved through a variety of execution tactics including server side user agent detection, or client side responsive web design.

Adaptive Design

Aaron Gustofson

3. Multiple URL’s

3. Multiple URL’s (m-dot site)

Two URLs Show different content based on URL

User Adoption

yourname.com/category m.yourname.com/category

Problems with Separate Mobile Sites

Why wouldn’t you just use responsive design?

Please Wait (loading)

Problems with Responsive Design

Please Wait (loading)

Problems with Responsive Design

Please Wait (loading)

Problems with Responsive Design

Problems with Responsive Design

What should we do?

4. Blend Client & Server

OR

Elastic Waistbands

4. Blend Client & Server (Hybrid or RESS)

One URL Show some different content according to user

agent, leverage some responsive content.

One URL

Server & Side Adoption

RESS/Hybrid yourname.com/category

4 Approaches to Mobile Optimized

One URL with responsive content

One URL

Server Side Adoption

Responsive Web Design yourname.com/category

One URL Show different content

according to the user agent

One URL Server Side Adoption

Dynamic Serving yourname.com/category

One URL Show some different content

according to user agent, leverage some responsive content.

One URL

Server & Client Side Adoption

RESS/Hybrid yourname.com/category

Two URLs Show different content on

different devices based on URL

Multiple URLs Server Side Adoption

Separate Mobile Site yourname.com/category

m.yourname.com/category

4 Approaches to Mobile Optimized

One URL with responsive content

One URL

Client Side Adoption

Responsive Web Design yourname.com/category

One URL Show different content

according to the user agent

One URL Server Side Adoption

Dynamic Serving yourname.com/category

One URL Show some different content

according to user agent, leverage some responsive content.

One URL

Server & Client Side Adoption

RESS/Hybrid yourname.com/category

Two URLs Show different content on

different devices based on URL

Multiple URLs Server Side Adoption

Separate Mobile Site yourname.com/category

m.yourname.com/category

Bibliography

HOW DO WE GET THERE?

Most of us are here

Most of us are here

But we want to get here

We could try to get there in one step

Or we could do it in more manageable steps

Stairway to Awesomeness

GARY PENN TRUE RELIGION STEP-WISE PROCESS

True Religion is a pioneer in the premium denim market. We create modern and distinctive apparel and are known for exceptional fit and styling details.

Style isn’t put on. It’s pulled off. Fortune favors the bold. True Style is Fearless. #BeSoBold

It Helps to Crawl First

BROOKE WOLF EBAGS MOBILE STRATEGY

!  Primary'focus'is'Luggage,'Handbags'and'Backpacks'

!  500'brands'including'Tumi,'Michael'Kors,'The'North'Face'

!  50,000'items'on'our'site'

!  Over'21'million'bags'sold'

!  2.9'million'customer'reviews'

Posted'by'Grooverpr'under'PRCA'2330'&'3334'

PROJECT #1: RESPONSIVE DESIGN

PROJECT #2: ADAPTIVE DESIGN

!  Enhanced'Wishlist'capability'

!  Cross'device'synchronization'

!  ReSdesigned'for'the'touch'device'

!  Greater'accessibility'across'the'site'

!  Effective'personalization'

!  Stronger'call'to'action'

PROJECT #3: MY FAVORITES

PROJECT #4: EBAGS OBSESSION

DISCUSSION

Discussion 1: Mobile Apps vs. Websites

Discussion 2: Mobile Payments

Discussion 3: Multi-Device

DISCUSSION 4: MOBILE NAVIGATION

DISCUSSION 5: MOBILE HOME PAGE

AUDIENCE QUESTIONS

JASON “RETAILGEEK” GOLDBERG – RAZORFISH BROOKE WOLF – eBAGS GARY PENN – TRUE RELIGION BRAND JEANS

RESPONSIVE DESIGN IS NOT A MOBILE STRATEGY