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 /
  2. Engineering Teams at Etsy • Feature Teams • Listing page

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

    • Seller tools • Checkout • Infrastructure Teams • Performance • Data engineering • Autobots (testing) • Mobile Web spun
  4. Hard decisions in 2011 • No mobile subdomain • Not

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

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

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

    a "Web App" • Only officially support Webkit • iPads see desktop template • Mobile team does mobilization only
  8. 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
  9. 1. Give up 2. Appoint mobile web cops/janitors 3. Implement

    technical solutions 4. Enact culture change
  10. • Infrastructure Teams • Performance • Data engineering • Autobots

    (testing) • Mobile Web • Feature Teams • Listing page • Seller tools • Checkout
  11. stan: hey bucky perf just jumped with this deploy bucky:

    looking now stan stan: dashboards.etsycorp.com/ deploy.php#pageperf...
  12. Yash: great catch stan, thanks for vigilance ross: thanks for

    seeing something 
 & saying something bucky: stan
  13. Designing for Mobile Web • Designing for fat fingers •

    Using our grid • Mobile icon fonts • Other design considerations for small screens
  14. Handling Touch • Common bugs • Developing for gestures (like

    our carousel) • Challenges of devices like the Chromebook Pixel or Windows Surface
  15. How to Test on Mobile Web • Using Adobe Edge

    Inspect • Using simulators • Remote debugging
  16. 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
  17. Mobile Web Performance • Dynamically resizing images • Issues with

    @font-face • How radio connections work and optimizing requests • Tools to measure performance on mobile
  18. Mobile Web Experiments • A/B test everything! • analyze by

    OS and breakpoint • measure orientation changes
  19. 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
  20. Make it easy to choose devices For each device, label

    nearby: • device name and ID number • screen resolution, pixel density • operating system version
  21. 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
  22. 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
  23. 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
  24. “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
  25. “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