Tweet
Tweet

Slide 1

Slide 1 text

@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 /

Slide 2

Slide 2 text

What is Etsy?

Slide 3

Slide 3 text

1 million ACTIVE SELLERS 25 million ACTIVE LISTINGS $1.35 billion GROSS MERCHANDISE SALES IN 2013

Slide 4

Slide 4 text

traffic from mobile web+apps: > 50%

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Engineering Teams at Etsy • Feature Teams • Listing page • Seller tools • Checkout

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Engineering Teams at Etsy • Feature Teams • Listing page • Seller tools • Checkout • Infrastructure Teams • Performance • Data engineering • Autobots (testing) • Mobile Web spun

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Etsy’s mobile web journey

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Hard decisions in 2011 • No mobile subdomain

Slide 13

Slide 13 text

Hard decisions in 2011 • No mobile subdomain • Not a "Web App"

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Worked okay... for a while.

Slide 19

Slide 19 text

Everyone hates duplicate code templates/ templates/mobile/ ! assets/js/ assets/js/mobile/ ! assets/css/ assets/css/mobile/

Slide 20

Slide 20 text

We began to explore native development

Slide 21

Slide 21 text

“Everyone at Etsy should be doing mobile”

Slide 22

Slide 22 text

... so then no more mobile web work happened for a year.

Slide 23

Slide 23 text

It was a large technical hurdle

Slide 24

Slide 24 text

Device sizes and operating systems grew more fragmented

Slide 25

Slide 25 text

mobile web caring shipping teaching }

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

“Responsive web design is bad for performance.”

Slide 29

Slide 29 text

“Everything changes too fast.”

Slide 30

Slide 30 text

We’ve got history

Slide 31

Slide 31 text

Slide 32

Slide 32 text

2009

Slide 33

Slide 33 text

2009

Slide 34

Slide 34 text

Screen Size Wars

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Screen sizes: >1 million visits/month to Etsy

Slide 37

Slide 37 text

Browser Wars

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Etsy.com Visits by Browser

Slide 40

Slide 40 text

Change is scary

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Hindsight is 20:20.

Slide 43

Slide 43 text

Options

Slide 44

Slide 44 text

1. Give up
 
 


Slide 45

Slide 45 text

Etsy.com Visits by Browser

Slide 46

Slide 46 text

1. give up ! ! Source: StatCounter Global Stats, 6/14 % of Internet Traffic

Slide 47

Slide 47 text

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


Slide 48

Slide 48 text

In 2013, we appointed a new Mobile Web Team...

Slide 49

Slide 49 text

... but feature teams know how their feature should work on mobile.

Slide 50

Slide 50 text

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


Slide 51

Slide 51 text

We built tools to make it easy to mobilize features...

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

1. Give up 2. Appoint mobile web cops/janitors 3. Implement technical solutions 4. Enact culture change

Slide 54

Slide 54 text

We were trying to solve a cultural problem with just technology.

Slide 55

Slide 55 text

• Infrastructure Teams • Performance • Data engineering • Autobots (testing) • Mobile Web • Feature Teams • Listing page • Seller tools • Checkout

Slide 56

Slide 56 text

• Infrastructure Teams ! • Data engineering • Autobots (testing) • Mobile Web got

Slide 57

Slide 57 text

Mobile Web’s parallel universe: Performance at Etsy

Slide 58

Slide 58 text

Educated coworkers

Slide 59

Slide 59 text

Empower your teammates

Slide 60

Slide 60 text

Empower your teammates clear

Slide 61

Slide 61 text

experiments to measure biz impact

Slide 62

Slide 62 text

experiments to measure biz impact +160kb

Slide 63

Slide 63 text

Incentivized coworkers

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

whoa!

Slide 66

Slide 66 text

Developers fixed it

Slide 67

Slide 67 text

whoa,

Slide 68

Slide 68 text

Performance hero

Slide 69

Slide 69 text

Performance hero

Slide 70

Slide 70 text

Empowered coworkers

Slide 71

Slide 71 text

People began to do performance caring shipping teaching }

Slide 72

Slide 72 text

stan: hey bucky perf just jumped with this deploy bucky: looking now stan stan: dashboards.etsycorp.com/ deploy.php#pageperf...

Slide 73

Slide 73 text

Yash: great catch stan, thanks for vigilance ross: thanks for seeing something 
 & saying something bucky: stan

Slide 74

Slide 74 text

None of these people are on the performance team.

Slide 75

Slide 75 text

Solving mobile web’s culture problem

Slide 76

Slide 76 text

Educating coworkers

Slide 77

Slide 77 text

Designing for Mobile Web • Designing for fat fingers • Using our grid • Mobile icon fonts • Other design considerations for small screens

Slide 78

Slide 78 text

Handling Touch • Common bugs • Developing for gestures (like our carousel) • Challenges of devices like the Chromebook Pixel or Windows Surface

Slide 79

Slide 79 text

How to Test on Mobile Web • Using Adobe Edge Inspect • Using simulators • Remote debugging

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Mobile Web Performance • Dynamically resizing images • Issues with @font-face • How radio connections work and optimizing requests • Tools to measure performance on mobile

Slide 82

Slide 82 text

Mobile Web Experiments • A/B test everything!

Slide 83

Slide 83 text

Mobile Web Experiments • A/B test everything! • analyze by OS and breakpoint

Slide 84

Slide 84 text

Mobile Web Experiments • A/B test everything! • analyze by OS and breakpoint • measure orientation changes

Slide 85

Slide 85 text

Empowering coworkers

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Incentivizing coworkers

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

Mobile Web Hack Week

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Make it easy to choose devices For each device, label nearby: • device name and ID number • screen resolution, pixel density • operating system version

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Find surprises

Slide 99

Slide 99 text

Other Device Lab Lessons • Color coding Color code by operating system

Slide 100

Slide 100 text

Other Device Lab Lessons Have an unusual device

Slide 101

Slide 101 text

Give people things to steal

Slide 102

Slide 102 text

Reflect your company

Slide 103

Slide 103 text

We started to see behaviors shift.

Slide 104

Slide 104 text

“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

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

“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

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

“...we’ve mobilized the Interactions feature in the Activity Feed, which 
 wasn’t previously mobilized.” (yet

Slide 109

Slide 109 text

celebrating successes

Slide 110

Slide 110 text

These are our success metrics. caring shipping teaching }

Slide 111

Slide 111 text

Which of these are you missing? caring shipping teaching }

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

We don’t know what the future looks like

Slide 114

Slide 114 text

culture technology &