Mobile Web at Etsy

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 /

2. What is Etsy?

3. 1 million ACTIVE SELLERS 25 million ACTIVE LISTINGS $1.35 billion

   GROSS MERCHANDISE SALES IN 2013

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

5. None

6. Engineering Teams at Etsy • Feature Teams • Listing page

   • Seller tools • Checkout

7. Engineering Teams at Etsy • Feature Teams • Listing page

   • Seller tools • Checkout • Infrastructure Teams • Performance • Data engineering • Autobots (testing)

8. Engineering Teams at Etsy • Feature Teams • Listing page

   • Seller tools • Checkout • Infrastructure Teams • Performance • Data engineering • Autobots (testing) • Mobile Web spun
9. None

10. Etsy’s mobile web journey

11. None

12. Hard decisions in 2011 • No mobile subdomain

13. Hard decisions in 2011 • No mobile subdomain • Not

    a "Web App"

14. Hard decisions in 2011 • No mobile subdomain • Not

    a "Web App" • Only officially support Webkit

15. Hard decisions in 2011 • No mobile subdomain • Not

    a "Web App" • Only officially support Webkit • iPads see desktop template

16. Hard decisions in 2011 • No mobile subdomain • Not

    a "Web App" • Only officially support Webkit • iPads see desktop template • Mobile team does mobilization

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

18. Worked okay...
    for a while.

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

    assets/css/ assets/css/mobile/

20. We began to
    explore native
    development

21. “Everyone at Etsy
    should be doing mobile”

22. ... so then no more
    mobile web work
    

    happened for a year.

23. It was a large
    technical hurdle

24. Device sizes and operating systems
    grew more fragmented

25. mobile web caring shipping teaching }

26. “I don’t want to think
 about mobile web”

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

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

29. “Everything
    changes too fast.”

30. We’ve got history

31. <table>

32. 2009

33. 2009

34. Screen Size Wars

35. None

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

37. Browser Wars

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

39. Etsy.com Visits by Browser

40. Change is scary

41. <picture>

42. Hindsight is 20:20.

43. Options

44. 1. Give up
 
 


45. Etsy.com Visits by Browser

46. 1. give up
    ! ! Source: StatCounter Global Stats, 6/14

    % of Internet Traffic

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


48. In 2013,
    we appointed a new
    Mobile Web

    Team...

49. ... but feature teams know
    how their feature
    

    should work on mobile.

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

    technical solutions


51. We built tools
    to make it easy
    to mobilize

    features...

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

53. 1. Give up 2. Appoint mobile web cops/janitors 3. Implement

    technical solutions 4. Enact culture change

54. We were trying to
    solve a cultural problem
    

    with just technology.

55. • Infrastructure Teams • Performance • Data engineering • Autobots

    (testing) • Mobile Web • Feature Teams • Listing page • Seller tools • Checkout

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

    • Mobile Web got

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

58. Educated coworkers

59. Empower your teammates

60. Empower your teammates clear

61. experiments to measure biz impact

62. experiments to measure biz impact +160kb

63. Incentivized coworkers

64. None

65. whoa!

66. Developers fixed it

67. whoa,

68. Performance hero

69. Performance hero

70. Empowered coworkers

71. People began to do performance caring shipping teaching }

72. stan: hey bucky perf just jumped with this deploy bucky:

    looking now stan stan: dashboards.etsycorp.com/ deploy.php#pageperf...

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

    seeing something 
 & saying something bucky: stan

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

75. Solving mobile web’s culture problem

76. Educating coworkers

77. Designing for Mobile Web • Designing for fat fingers •

    Using our grid • Mobile icon fonts • Other design considerations for small screens

78. Handling Touch • Common bugs • Developing for gestures (like

    our carousel) • Challenges of devices like the Chromebook Pixel or Windows Surface

79. How to Test on Mobile Web • Using Adobe Edge

    Inspect • Using simulators • Remote debugging

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

81. Mobile Web Performance • Dynamically resizing images • Issues with

    @font-face • How radio connections work and optimizing requests • Tools to measure performance on mobile

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

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

    OS and breakpoint

84. Mobile Web Experiments • A/B test everything! • analyze by

    OS and breakpoint • measure orientation changes

85. Empowering coworkers

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

    in a company meeting

87. Incentivizing coworkers

88. None

89. Mobile Web Hack Week

90. None
91. None

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

93. Make it easy to choose devices For each device, label

    nearby: • device name and ID number • screen resolution, pixel density • operating system version

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

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

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

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

98. Find surprises

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

    operating system

100. Other Device Lab Lessons Have an unusual device

101. Give people
     things to steal

102. Reflect your company

103. We started to see behaviors shift.

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
105. None

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
107. None

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

     
 wasn’t previously mobilized.”
     (yet

109. celebrating successes

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

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

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

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

114. culture technology &