Mobile Web at Etsy

Additional links/resources: http://laraswanson.com/mobileweb/

Transcript

1. @l
   a
   r
   a
   _
   h
   o
   g
   a
   n
   l
   a
   r
   a
   h
   o
   g
   a
   n
   .
   me
   /
   mo
   b
   i
   l
   e
   w
   e
   b
   /
   

   View Slide

2. What is Etsy?
   

   View Slide

3. 1 million
   ACTIVE SELLERS
   25 million
   ACTIVE LISTINGS
   $1.35 billion
   GROSS MERCHANDISE SALES IN 2013
   

   View Slide

4. traffic from
   mobile web+apps:
   >
   50%
   

   View Slide

5. View Slide

6. Engineering Teams at Etsy
   • Feature Teams
   • Listing page
   • Seller tools
   • Checkout
   

   View Slide

7. Engineering Teams at Etsy
   • Feature Teams
   • Listing page
   • Seller tools
   • Checkout
   • Infrastructure Teams
   • Performance
   • Data engineering
   • Autobots (testing)
   

   View Slide

8. Engineering Teams at Etsy
   • Feature Teams
   • Listing page
   • Seller tools
   • Checkout
   • Infrastructure Teams
   • Performance
   • Data engineering
   • Autobots (testing)
   • Mobile Web
   spun

   View Slide

9. View Slide

10. Etsy’s mobile web
    journey
    

    View Slide

11. View Slide

12. Hard decisions in 2011
    • No mobile subdomain
    

    View Slide

13. Hard decisions in 2011
    • No mobile subdomain
    • Not a "Web App"
    

    View Slide

14. Hard decisions in 2011
    • No mobile subdomain
    • Not a "Web App"
    • Only officially support Webkit
    

    View Slide

15. Hard decisions in 2011
    • No mobile subdomain
    • Not a "Web App"
    • Only officially support Webkit
    • iPads see desktop template
    

    View Slide

16. Hard decisions in 2011
    • No mobile subdomain
    • Not a "Web App"
    • Only officially support Webkit
    • iPads see desktop template
    • Mobile team does mobilization
    

    View Slide

17. Hard decisions in 2011
    • No mobile subdomain
    • Not a "Web App"
    • Only officially support Webkit
    • iPads see desktop template
    • Mobile team does mobilization
    only

    View Slide

18. Worked okay...
    for a while.
    

    View Slide

19. Everyone hates
    duplicate code
    templates/
    templates/mobile/
    !
    assets/js/
    assets/js/mobile/
    !
    assets/css/
    assets/css/mobile/
    

    View Slide

20. We began to
    explore native
    development
    

    View Slide

21. “Everyone at Etsy
    should be doing mobile”
    

    View Slide

22. ... so then no more
    mobile web work
    happened for a year.
    

    View Slide

23. It was a large
    technical hurdle
    

    View Slide

24. Device sizes and
    operating systems
    grew more fragmented
    

    View Slide

25. mobile web
    caring
    shipping
    teaching
    }
    

    View Slide

26. “I don’t want to think

    about mobile web”
    

    View Slide

27. “Building for both
    is going to take
    twice as long.”
    

    View Slide

28. “Responsive web design
    is bad for performance.”
    

    View Slide

29. “Everything
    changes too fast.”
    

    View Slide

30. We’ve got history
    

    View Slide

31. 
    

    View Slide

32. View Slide

33. View Slide

34. Screen Size Wars
    

    View Slide

35. View Slide

36. Screen sizes: >1 million visits/month to Etsy
    

    View Slide

37. Browser Wars
    

    View Slide

38. Others (Opera, Safari, PSP…)
    Firefox, Mozilla, Camino, etc.
    Netscape classic
    Internet Explorer for Windows
    Browser Wars
    0%
    10%
    20%
    30%
    40%
    50%
    60%
    70%
    80%
    90%
    100%
    1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009
    

    View Slide

39. Etsy.com Visits by Browser
    

    View Slide

40. Change is scary
    

    View Slide

41. 
    

    View Slide

42. Hindsight is 20:20.
    

    View Slide

43. Options
    

    View Slide

44. 1. Give up

    

    

    

    View Slide

45. Etsy.com Visits by Browser
    

    View Slide

46. 1. give up
    !
    !
    Source: StatCounter Global Stats, 6/14
    % of Internet Traffic
    

    View Slide

47. 1. Give up
    2. Appoint mobile web cops/janitors

    

    

    View Slide

48. In 2013,
    we appointed a new
    Mobile Web Team...
    

    View Slide

49. ... but feature teams know
    how their feature
    should work on mobile.
    

    View Slide

50. 1. Give up
    2. Appoint mobile web cops/janitors
    3. Implement technical solutions

    

    View Slide

51. We built tools
    to make it easy
    to mobilize
    features...
    

    View Slide

52. ... but feature teams
    still weren’t
    mobilizing anything.
    

    View Slide

53. 1. Give up
    2. Appoint mobile web cops/janitors
    3. Implement technical solutions
    4. Enact culture change
    

    View Slide

54. We were trying to
    solve a cultural problem
    with just technology.
    

    View Slide

55. • Infrastructure Teams
    • Performance
    • Data engineering
    • Autobots (testing)
    • Mobile Web
    • Feature Teams
    • Listing page
    • Seller tools
    • Checkout
    

    View Slide

56. • Infrastructure Teams
    !
    • Data engineering
    • Autobots (testing)
    • Mobile Web
    got

    View Slide

57. Mobile Web’s
    parallel universe:
    Performance at Etsy
    

    View Slide

58. Educated coworkers
    

    View Slide

59. Empower your
    teammates
    

    View Slide

60. Empower your
    teammates
    clear

    View Slide

61. experiments to measure
    biz impact
    

    View Slide

62. experiments to measure
    biz impact
    +160kb

    View Slide

63. Incentivized coworkers
    

    View Slide

64. View Slide

65. whoa!
    

    View Slide

66. Developers fixed it
    

    View Slide

67. whoa,

    View Slide

68. Performance hero
    

    View Slide

69. Performance hero
    

    View Slide

70. Empowered coworkers
    

    View Slide

71. People began
    to do performance
    caring
    shipping
    teaching
    }
    

    View Slide

72. stan: hey bucky perf just jumped with
    this deploy
    bucky: looking now stan
    stan: dashboards.etsycorp.com/
    deploy.php#pageperf...
    

    View Slide

73. Yash: great catch stan, thanks for
    vigilance
    ross: thanks for seeing something 

    & saying something
    bucky: stan
    

    View Slide

74. None of these people are
    on the performance team.
    

    View Slide

75. Solving mobile web’s
    culture problem
    

    View Slide

76. Educating coworkers
    

    View Slide

77. Designing for Mobile Web
    • Designing for fat fingers
    • Using our grid
    • Mobile icon fonts
    • Other design considerations for small screens
    

    View Slide

78. Handling Touch
    • Common bugs
    • Developing for gestures (like our carousel)
    • Challenges of devices like the Chromebook Pixel or
    Windows Surface
    

    View Slide

79. How to Test on Mobile Web
    • Using Adobe Edge Inspect
    • Using simulators
    • Remote debugging
    

    View Slide

80. Responsive Workflow
    • Desktop- vs. Mobile-First
    • How to choose breakpoints
    • Thinking about content hierarchy
    • Why you might choose to use a mobile web template
    instead of RWD
    

    View Slide

81. Mobile Web Performance
    • Dynamically resizing images
    • Issues with @font-face
    • How radio connections work and optimizing requests
    • Tools to measure performance on mobile
    

    View Slide

82. Mobile Web Experiments
    • A/B test everything!
    

    View Slide

83. Mobile Web Experiments
    • A/B test everything!
    • analyze by OS and breakpoint
    

    View Slide

84. Mobile Web Experiments
    • A/B test everything!
    • analyze by OS and breakpoint
    • measure orientation changes
    

    View Slide

85. Empowering coworkers
    

    View Slide

86. “We are a mobile-first company.”
    - Chad Dickerson, Etsy CEO in a company meeting
    

    View Slide

87. Incentivizing coworkers
    

    View Slide

88. View Slide

89. Mobile Web Hack Week
    

    View Slide

90. View Slide

91. View Slide

92. Make it easy to check out devices
    • Library card underneath 

    each device (color-coded, 

    of course)
    • RFID tags on each device and
    reader that works with
    employee badges
    

    View Slide

93. Make it easy to choose devices
    For each device, label nearby:
    • device name and ID number
    • screen resolution, pixel density
    • operating system version
    

    View Slide

94. Make it easy to test
    • Install Adobe Edge Inspect
    • Make sure VMs and staging
    environments can be accessed
    • Make sure all the devices 

    can live upright
    

    View Slide

95. Make it easy to collaborate
    • Set up comfortable seating 

    and long tables nearby
    • Make sure other outlets are available
    • Make it so that people 

    don’t have to walk back 

    to their desks to test their work
    

    View Slide

96. Make it attractive
    A good-looking lab is inviting.
    • New hires, guests, tours
    • No one wants to be near clutter
    • The more organized, the more
    they’ll put stuff back properly
    and want to use it
    

    View Slide

97. Building a Device Lab
    It’s a product with real users
    

    View Slide

98. Find surprises
    

    View Slide

99. Other Device Lab Lessons
    • Color coding
    Color code by operating system
    

    View Slide

100. Other Device Lab Lessons
     Have an unusual device
     

     View Slide

101. Give people
     things to steal
     

     View Slide

102. Reflect your company
     

     View Slide

103. We started to see
     behaviors shift.
     

     View Slide

104. “Remember this win on desktop, where we added
     some light copy changes and saw a lift in
     conversion? As promised, we're running this
     experiment on mobile web...”
     (actual

     View Slide

105. View Slide

106. “Does this work on mobile? Absolutely! ... We
     found that a one-template approach for this page
     was much better for both user experience and
     operational overhead...”
     (another

     View Slide

107. View Slide

108. “...we’ve mobilized the Interactions
     feature in the Activity Feed, which 

     wasn’t previously mobilized.”
     (yet

     View Slide

109. celebrating successes
     

     View Slide

110. These are our
     success metrics.
     caring
     shipping
     teaching
     }
     

     View Slide

111. Which of these
     are you missing?
     caring
     shipping
     teaching
     }
     

     View Slide

112. Mobile is coming.
     redbubble.com/people/faniseto/works/7794027-winter-is-coming
     

     View Slide

113. We don’t know
     what the future
     looks like
     

     View Slide

114. culture technology
     &
     

     View Slide