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/

Lara Hogan

April 22, 2014
Tweet

More Decks by Lara Hogan

Other Decks in Technology

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

    View Slide

  33. 2009

    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