Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mobile Web at Etsy
Search
Lara Hogan
April 22, 2014
Technology
36
16k
Mobile Web at Etsy
Additional links/resources:
http://laraswanson.com/mobileweb/
Lara Hogan
April 22, 2014
Tweet
Share
More Decks by Lara Hogan
See All by Lara Hogan
Balancing Empowerment & Direction
lara
1
530
Navigating Conflict
lara
3
500
What Humans Need at Work
lara
2
650
Influence Without Authority
lara
8
3.8k
Optimising for team health: Tools and techniques of supportive teams who build successful products
lara
4
590
Management 101
lara
4
630
Dealing with surprising human emotions - workshop
lara
19
740
Delivering (and requesting) feedback workshop
lara
17
1.4k
Mentoring, Coaching, and Sponsoring Workshop
lara
15
3.9k
Other Decks in Technology
See All in Technology
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
370
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
230
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
500
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
680
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
0
1k
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
570
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
htan
1
210
alecthomas/kong はいいぞ
fujiwara3
6
1.4k
Lambda management with ecspresso and Terraform
ijin
2
130
Rubyの国のPerlMonger
anatofuz
3
730
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
770
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
180
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Unsuck your backbone
ammeep
671
58k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Adopting Sorbet at Scale
ufuk
77
9.5k
Transcript
@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 /
What is Etsy?
1 million ACTIVE SELLERS 25 million ACTIVE LISTINGS $1.35 billion
GROSS MERCHANDISE SALES IN 2013
traffic from mobile web+apps: > 50%
None
Engineering Teams at Etsy • Feature Teams • Listing page
• Seller tools • Checkout
Engineering Teams at Etsy • Feature Teams • Listing page
• Seller tools • Checkout • Infrastructure Teams • Performance • Data engineering • Autobots (testing)
Engineering Teams at Etsy • Feature Teams • Listing page
• Seller tools • Checkout • Infrastructure Teams • Performance • Data engineering • Autobots (testing) • Mobile Web spun
None
Etsy’s mobile web journey
None
Hard decisions in 2011 • No mobile subdomain
Hard decisions in 2011 • No mobile subdomain • Not
a "Web App"
Hard decisions in 2011 • No mobile subdomain • Not
a "Web App" • Only officially support Webkit
Hard decisions in 2011 • No mobile subdomain • Not
a "Web App" • Only officially support Webkit • iPads see desktop template
Hard decisions in 2011 • No mobile subdomain • Not
a "Web App" • Only officially support Webkit • iPads see desktop template • Mobile team does mobilization
Hard decisions in 2011 • No mobile subdomain • Not
a "Web App" • Only officially support Webkit • iPads see desktop template • Mobile team does mobilization only
Worked okay... for a while.
Everyone hates duplicate code templates/ templates/mobile/ ! assets/js/ assets/js/mobile/ !
assets/css/ assets/css/mobile/
We began to explore native development
“Everyone at Etsy should be doing mobile”
... so then no more mobile web work
happened for a year.
It was a large technical hurdle
Device sizes and operating systems grew more fragmented
mobile web caring shipping teaching }
“I don’t want to think about mobile web”
“Building for both is going to take twice as long.”
“Responsive web design is bad for performance.”
“Everything changes too fast.”
We’ve got history
<table>
2009
2009
Screen Size Wars
None
Screen sizes: >1 million visits/month to Etsy
Browser Wars
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
Etsy.com Visits by Browser
Change is scary
<picture>
Hindsight is 20:20.
Options
1. Give up
Etsy.com Visits by Browser
1. give up ! ! Source: StatCounter Global Stats, 6/14
% of Internet Traffic
1. Give up 2. Appoint mobile web cops/janitors
In 2013, we appointed a new Mobile Web
Team...
... but feature teams know how their feature
should work on mobile.
1. Give up 2. Appoint mobile web cops/janitors 3. Implement
technical solutions
We built tools to make it easy to mobilize
features...
... but feature teams still weren’t mobilizing anything.
1. Give up 2. Appoint mobile web cops/janitors 3. Implement
technical solutions 4. Enact culture change
We were trying to solve a cultural problem
with just technology.
• Infrastructure Teams • Performance • Data engineering • Autobots
(testing) • Mobile Web • Feature Teams • Listing page • Seller tools • Checkout
• Infrastructure Teams ! • Data engineering • Autobots (testing)
• Mobile Web got
Mobile Web’s parallel universe: Performance at Etsy
Educated coworkers
Empower your teammates
Empower your teammates clear
experiments to measure biz impact
experiments to measure biz impact +160kb
Incentivized coworkers
None
whoa!
Developers fixed it
whoa,
Performance hero
Performance hero
Empowered coworkers
People began to do performance caring shipping teaching }
stan: hey bucky perf just jumped with this deploy bucky:
looking now stan stan: dashboards.etsycorp.com/ deploy.php#pageperf...
Yash: great catch stan, thanks for vigilance ross: thanks for
seeing something & saying something bucky: stan
None of these people are on the performance team.
Solving mobile web’s culture problem
Educating coworkers
Designing for Mobile Web • Designing for fat fingers •
Using our grid • Mobile icon fonts • Other design considerations for small screens
Handling Touch • Common bugs • Developing for gestures (like
our carousel) • Challenges of devices like the Chromebook Pixel or Windows Surface
How to Test on Mobile Web • Using Adobe Edge
Inspect • Using simulators • Remote debugging
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
Mobile Web Performance • Dynamically resizing images • Issues with
@font-face • How radio connections work and optimizing requests • Tools to measure performance on mobile
Mobile Web Experiments • A/B test everything!
Mobile Web Experiments • A/B test everything! • analyze by
OS and breakpoint
Mobile Web Experiments • A/B test everything! • analyze by
OS and breakpoint • measure orientation changes
Empowering coworkers
“We are a mobile-first company.” - Chad Dickerson, Etsy CEO
in a company meeting
Incentivizing coworkers
None
Mobile Web Hack Week
None
None
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
Make it easy to choose devices For each device, label
nearby: • device name and ID number • screen resolution, pixel density • operating system version
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
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
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
Building a Device Lab It’s a product with real users
Find surprises
Other Device Lab Lessons • Color coding Color code by
operating system
Other Device Lab Lessons Have an unusual device
Give people things to steal
Reflect your company
We started to see behaviors shift.
“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
None
“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
None
“...we’ve mobilized the Interactions feature in the Activity Feed, which
wasn’t previously mobilized.” (yet
celebrating successes
These are our success metrics. caring shipping teaching }
Which of these are you missing? caring shipping teaching }
Mobile is coming. redbubble.com/people/faniseto/works/7794027-winter-is-coming
We don’t know what the future looks like
culture technology &