Hello
• I’m Matt Dennewitz <@mattdennewitz>
• VP Technology @ Pitchfork <@pitchforkmedia>
• First full-time developer, now heading up product
and engineering efforts
Slide 3
Slide 3 text
Pitchfork
• Most influential music publication on the ‘net.
• Founded in 1995, run from Chicago since ’99.
Slide 4
Slide 4 text
Pitchfork
• Two music festivals (Chicago, Paris)
• Pitchfork.tv, Nothing Major, The Dissolve
• Weekly mobile app
• The Pitchfork Review
Slide 5
Slide 5 text
This talk is about how we
create a lot from a little
Slide 6
Slide 6 text
• In the beginning, there was 1 developer
• No time for non-essential work. New features had
to be essential.
• From great constraint came great agility.
• Had to grow the team(s) to survive, had to rethink
what an online publication could be.
Slide 7
Slide 7 text
• Now 4 developers, 4 designers.
• Hire weirdos. Don’t silo.
• Invest in people, not products. Let people define
your products.
• Continue to embrace constraint.
• Constantly rethinking what an online publication
can mean.
Slide 8
Slide 8 text
In three parts
Things we’ve done with
what we have
Slide 9
Slide 9 text
1.
Defining what development
and design mean to us
Slide 10
Slide 10 text
• Embrace that reading is a feeling.
• Goal: understand and satisfy the reader’s
need to feel.
Slide 11
Slide 11 text
• Embrace browsing as a medium.
• Goal: build the tools necessary to remove the
browser from the browser.
Slide 12
Slide 12 text
• The emotions we want to evoke are a by-product
of combining of substantive writing, beautiful
design, and solid engineering.
• regardless of platform
Slide 13
Slide 13 text
• Principle: enable ourselves to focus on
engineering, design, and content in equal measure
Slide 14
Slide 14 text
2.
Building tools
Slide 15
Slide 15 text
• We only build the tools we need, and put extra
care into them.
Slide 16
Slide 16 text
• Use them to build the best features for
our readers.
Slide 17
Slide 17 text
• Use them to build excellent tools for our staff.
Slide 18
Slide 18 text
• Do not build what you cannot maintain.
• Build only what enables you to continue building.
• Ex: Django’s admin is fine for basic work. We build
tools for our staff to improve their workflow.
Slide 19
Slide 19 text
zineutil
Slide 20
Slide 20 text
zineutil
• Set of reusable Javascript interaction and design
components, broken into units of work
• Each unit serves a single purpose (image fitting,
video control, parallaxing).
• Used in almost everything we do.
Slide 21
Slide 21 text
Next-gen content design platform
longform
Slide 22
Slide 22 text
Problems:
• Trying to do even basic custom design work within
a CMS text editor can be a cruel joke.
• Design and dev concerns need to be removed
from editorial workflow.
Slide 23
Slide 23 text
Solutions:
• We built a platform where writers build stories
from pre-designed atomic elements.
• Dev and design can quickly build reusable
components to suit editorial needs.
• Editorial focuses exclusively on writing and
arrangement.
Slide 24
Slide 24 text
3.
Storytelling
Slide 25
Slide 25 text
Advance
Slide 26
Slide 26 text
Problems:
• Wanted to offer pre-release streams to artists
• Most pre-release streams do the music no favors
• How can we put albums in front of our readers
before stamping a number on it?
Slide 27
Slide 27 text
Solutions:
• Give bands and labels a full-screen blank canvas,
to be filled with video and artwork they make.
• Give listeners a real chance with the music:
stream the album for one week prior to its release,
and our scoring.
Slide 28
Slide 28 text
Outcome:
• Totally immersive, distraction-free experience for
listening to music.
• Listeners engage with the music and artwork as
they would a real album.
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Cover Stories
Slide 31
Slide 31 text
Problems:
• Craftsmanship put into our best writing wasn’t
reciprocated by dev and design.
• Not capitalizing on the potential a story has to be
more than its words.
• Need to sharpen the distinction between good
and disposable content.
Slide 32
Slide 32 text
Goals:
• Focus on new and innovative ways to showcase
our content.
• Amplify content with context: photography, video,
and music.
• Exploit powerful modern tech to push browsers
as a medium for beautiful storytelling.
Slide 33
Slide 33 text
Solutions:
• Seamless integration between media into
content–words flow into video and artwork.
• Use the whole team to create totally custom
experiences tailored to each story’s subject
and flow.
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
• We do what’s best for our readers and ourselves.
• We do it with what we have or can build.
• Every process is tuned for optimal
resource usage, just like a web app
• Our benchmark: we look back and see that
everyone’s trying to interrupt a conversation
we’ve already moved on from.