responsive design is not a mobile strategy
TRANSCRIPT
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