Jason "Retailgeek" Goldberg presentation from shop.org Digital Summit 2014

1. JASON “RETAILGEEK” GOLDBERG – RAZORFISH
BROOKE WOLF – eBAGS
GARY PENN – TRUE RELIGION BRAND JEANS
RESPONSIVE DESIGN
IS NOT A MOBILE STRATEGY

2. Mobile
Web
This is NOT a mobile strategy

3. 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

4. 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

5. 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”

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

7. 1. Client Side
AND

8. 1. Client Side (Responsive Web Design)
One URL
with responsive content
Client Side Adoption
yourname.com/category

9. 2. Server Side
OR

10. 2. Server Side (Dynamic Serving)
One URL
Show different content according to the user
agent
One URL
Server Side Adoption
yourname.com/category

11. Wait, isn’t that Adaptive Design?

12. 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

13. 3. Multiple URL’s

14. 3. Multiple URL’s (m-dot site)
Two URLs
Show different content based on URL
User Adoption
yourname.com/category
m.yourname.com/category

15. Problems with Separate Mobile Sites

16. Why wouldn’t you just use responsive design?

17. Please Wait
(loading)
Problems with Responsive Design

18. Please Wait
(loading)
Problems with Responsive Design

19. Please Wait
(loading)
Problems with Responsive Design

20. Problems with Responsive Design

21. What should we do?

22. 4. Blend
Client & Server
OR
Elastic Waistbands

23. 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

24. 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

25. 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

26. Bibliography

27. HOW DO WE GET THERE?

28. Most of us are here

29. Most of us are here
But we want to get here

30. We could try to get there in one step

31. Or we could do it in more manageable steps

32. Stairway to Awesomeness

33. GARY PENN
TRUE RELIGION
STEP-WISE PROCESS

34. 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

35. It Helps to Crawl First

40. BROOKE WOLF
EBAGS MOBILE STRATEGY

41. ! 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'

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

44. PROJECT #1: RESPONSIVE DESIGN

46. PROJECT #2: ADAPTIVE DESIGN

47. ! 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

48. PROJECT #4: EBAGS OBSESSION

49. DISCUSSION

50. Discussion 1:
Mobile Apps vs. Websites

51. Discussion 2:
Mobile Payments

52. Discussion 3:
Multi-Device

53. DISCUSSION 4:
MOBILE NAVIGATION

54. DISCUSSION 5:
MOBILE HOME PAGE

55. AUDIENCE QUESTIONS

56. JASON “RETAILGEEK” GOLDBERG – RAZORFISH
BROOKE WOLF – eBAGS
GARY PENN – TRUE RELIGION BRAND JEANS
RESPONSIVE DESIGN
IS NOT A MOBILE STRATEGY