MAKING A BIG IMPACTwith a small web team

MATT WONDRA@mattwondramattwondra.com

OBLIGATORY BACKGROUND INFO

2004 2007–2011 2011–now2003

APARTMENT THERAPYSaving the world, one room at a time.

THE KITCHNInspiring cooks, nourishing homes.

12EDITORIAL+90 active contributors

7ADVERTISING

4OPERATIONS

7TECHNOLOGY

7 PEOPLE!? You call that small?

64 M monthly pageviews

25 pageviews per second

monthly unique visitors19 M

WEB TEAM SIZE COMPARISON

7

20

39

9.6M

19M

WEB TEAM SIZEMUU (UNIQUES)

16M

big small teams

big small teamsIGNORE JOB TITLES

Senior WebDesigner

Sr. Front-EndWeb Developer

Front-EndEngineer

Senior WebEngineer

Senior WebEngineer

OperationsEngineer

Chief Technology Officer

330 employees

100% flat hierarchy

http://www.valvesoftware.com/jobs/

“Traditionally at Valve, nobody has an actualtitle… [W]e all take on the role that suits thework in front of us. Everyone is a designer. Everyone can question each other’s work. Anyone can recruit someone onto his or her project.”

JOB TITLE

GENERAL WEB SKILLS

Job titles should bedescriptive, not restrictive.

NEW FEATURE ASSIGNMENTS

BACKEND FRONT-END DESIGN

BUILDING A T-SHAPED TEAM

1. TEACH EACH OTHERCode reviews / Group bug fixes / Swap jobs for a day

2. LOSE YOUR EGOGive up full control

3. TAKE OWNERSHIP OF EVERYTHINGDon’t hide behind title / Jump in and help

big small teamsDEFEND THEIR SCHEDULE

Site visitorsEditorial

AdvertisingCEOUs

STAKEHOLDERS

EFFECTS OF INTERRUPTIONS

DEFEND?

It’s about settinggood expectations.

1. DON’T REACT

2. CHANNEL SUPERNANNY

You need to put on your pajamasand brush your teeth.

Which would you like to do first, put on your PJs or brush your teeth?

I DON’T WANNA GO TO BED!

Invite a conversation.Give them a choice.

We’re in the middle of anotherproject right now. No.

That will delay our current project.Which would you rather have first?

GIMME PHOTO GALLERIES!

3. WORK IN PUBLIC

WRITE EVERYTHING DOWN

Share it with everyone.

big small teamsARE TERRIBLE ESTIMATORS

(AND THEY KNOW IT)

SKELETON CREWFewer people = less experience

SHIFTING TIDESInterruptions

UNKNOWN DANGERSBrowser bugs / Hidden complexity

SO HOW DO WE GET BETTER?

1. EXPERIENCE...but that takes time

2. MORE TIME PLANNING...can’t predict interruptions and scope changes

3. SMALLER FEATURES...we’ll get to that in a minute

Make your estimate.Then double it.

big small teamsPERFORM TASK TRIAGE

Manage tasks byassigning priority.

TASK TRIAGE

Small Task Large Task

HighImpact

LowImpact

LOW-HANGINGFRUIT

BASEMENTCLOSET

MAJORFEATURES

IN-BETWEENTASKS

big small teamsTAKE TINY BITES

PHOTO GALLERY SPEC

Captions on images

No JS required

Editable in CMS

Embed on any page

Full-screen popup

Swipeable

PROJECT ESTIMATE8 weeks

Start with theminimum viable product.

Embed on any page / No JS required

VERSION 12 weeks

+

EDIT GALLERY

++ + +

++++

Editable in CMS

VERSION 12 weeks

VERSION 22 weeks

Full-screen popup / Captions on images

This is a caption for my image!

+CLOSE

VERSION 12 weeks

VERSION 22 weeks

VERSION 32 weeks

Swipeable

a caption for my image!

+CLOSE

Look! I’m swipeab

VERSION 12 weeks

VERSION 22 weeks

VERSION 32 weeks

VERSION 42 weeks

Progressive enhancement.

WHY TAKE TINY BITES?

1. FASTER RELEASESHappy users / Happy stakeholders / Happy team

2. EASIER ESTIMATION1 large task vs. 4 small tasks

3. BECAUSE WE CANServer deploy = instant upgrade

big small teamsARE PRAGMATIC,NOT DOGMATIC

dog·mat·icinclined to lay down principles as incontrovertibly true

prag·mat·icdealing with things sensibly and realistically in a way that is based on practical rather than theoretical considerations

Focus on what worksinstead of what’s “right.”

RESPONSIVE LAYOUT — IMAGES

RESPONSIVE LAYOUT — IMAGES

It’s not any worse than before.We can solve that problem later.

Smaller screens must be servedsmaller images before we launch.

NAMING CONVENTIONS

PRESENTATIONAL.pull-left

.pull-right.aside

.aside-alt

SEMANTICLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eleifend egestas. Quisque a elit neque. Pellentesque eleifend nisi placerat, porttitor mi a, venenatis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eleifend egestas. Quisque a elit neque. Pellentesque eleifend nisi placerat, porttitor mi a, venenatis tellus. Nullam tempor orci magna, eget fringilla turpis tristiq aliquam eleifend nec.

tellus. Nullam tempor orci magna, eget fringilla turpis tristique aliquam eleifend nec.

NAMING CONVENTIONS

PRESENTATIONAL.pull-left

.pull-right.aside

.aside-alt

SEMANTICLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eleifend egestas. Quisque a elit neque. Pellentesque eleifend nisi placerat, porttitor mi a, venenatis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam eleifend egestas. Quisque a elit neque. Pellentesque eleifend nisi placerat, porttitor mi a, venenatis tellus. Nullam tempor orci magna, eget fringilla turpis tristiq aliquam eleifend nec.

tellus. Nullam tempor orci magna, eget fringilla turpis tristique aliquam eleifend nec.

Either way works, as long as we agree to stay consistent.

Classes shouldn’t describe presentation! Semantic naming!

Use best practices, butonly when they’re helpful.

IGNORE JOB TITLESJob titles should be descriptive,

not restrictive.

DEFEND THEIR SCHEDULEIt’s about setting

good expectations.

ARE TERRIBLE ESTIMATORS(AND THEY KNOW IT)

Make your estimate.Then double it.

PERFORM TASK TRIAGEManage tasks byassigning priority.

TAKE TINY BITESStart with the

minimum viable product.

ARE PRAGMATIC,NOT DOGMATIC

Focus on what worksinstead of what’s “right.”

BIG SMALL TEAMS...

thanks!