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 /
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%
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
10. Etsy’s mobile web journey
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
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
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
89. Mobile Web Hack Week
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
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
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 &