RESPONSIVE DESIGN IS NOT A MOBILE...

JASON “RETAILGEEK” GOLDBERG – RAZORFISH

BROOKE WOLF – eBAGS

GARY PENN – TRUE RELIGION BRAND JEANS

RESPONSIVE DESIGN IS NOT A MOBILE STRATEGY

MobileWeb

This is NOT a mobile strategy

This is a mobile strategy

MobileWeb

MobileApp

MobileE-Mail

SMS

MobilePOS

MobileIn-Store

MobileWallet

MobileCustomerService

3rd PartyMobileApps

MobileSocial

iBeacons

MobileChat

Responsive Design

Adaptive Design

Dynamic Design

Mobile First

Mobile Optimized

Native Mobile

Mobile Tolerant

Fluid Design

Liquid LayoutBreak 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 URLwith responsive content

Client Side Adoption

yourname.com/category

2. Server Side

OR

2. Server Side (Dynamic Serving)

One URLShow different content according to the user

agent

One URLServer 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 URLsShow different content based on URL

User Adoption

yourname.com/categorym.yourname.com/category

Problems with Separate Mobile Sites

Why wouldn’t you just use 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 URLShow some different content according to user

agent, leverage some responsive content.

One URLServer & Side Adoption

RESS/Hybridyourname.com/category

4 Approaches to Mobile Optimized



Responsive Web Designyourname.com/category

One URLShow different content

according to the user agent


Dynamic Servingyourname.com/category

One URLShow some different content

according to user agent, leverage some responsive content.

One URLServer & Client Side

Adoption


Two URLsShow different content on

different devices based on URL

Multiple URLsServer Side Adoption

Separate Mobile Siteyourname.com/category

m.yourname.com/category

4 Approaches to Mobile Optimized


One URLClient Side Adoption

Responsive Web Designyourname.com/category

One URLShow different content

according to the user agent


Dynamic Servingyourname.com/category

One URLShow some different content

according to user agent, leverage some responsive content.

One URLServer & Client Side

Adoption


Two URLsShow different content on

different devices based on URL

Multiple URLsServer Side Adoption

Separate Mobile Siteyourname.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 PENNTRUE 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 WOLFEBAGS 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

Re-designed 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

RESPONSIVE DESIGN IS NOT A MOBILE...

Documents

Transcript of RESPONSIVE DESIGN IS NOT A MOBILE...