Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Web at Etsy

Mobile Web at Etsy

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

245cee81a9c424266e5e401d844ea881?s=128

Lara Hogan

April 22, 2014
Tweet

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 &