389 lines
16 KiB
HTML
389 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en" prefix="og: http://ogp.me/ns#">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- CLEAN MARKUP = GOOD KARMA.
|
|
Hi source code lover,
|
|
|
|
you're a curious person and a fast learner ;)
|
|
Let's make something beautiful together. Contribute on Github:
|
|
https://github.com/webslides/webslides
|
|
|
|
Thanks!
|
|
-->
|
|
|
|
<!-- SEO -->
|
|
<title>Netflix's Culture · WebSlides</title>
|
|
<meta name="description" content="Patty McCord wrote the document called 'Netflix Culture: Freedom & Responsibility'.It's one of the most important documents ever to come out of Silicon Valley.">
|
|
|
|
<!-- URL CANONICAL -->
|
|
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
|
|
|
|
<!-- CSS Base -->
|
|
<link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
|
|
|
|
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
|
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
|
|
|
|
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
|
|
|
<!-- FACEBOOK -->
|
|
<!-- EDIT -->
|
|
<meta property="og:url" content="http://your-url.com/permalink">
|
|
|
|
<!-- EDIT -->
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:title" content="WebSlides: Netflix's Culture" />
|
|
<meta property="og:description" content="Patty McCord created Netflix's culture. This is a homage.">
|
|
|
|
<!-- EDIT -->
|
|
<meta property="og:updated_time" content="2017-04-16T16:24:56">
|
|
<!-- EDIT -->
|
|
<meta property="og:image" content="../static/images/share-webslides.jpg" >
|
|
<!-- EDIT -->
|
|
<meta property="og:image:width" content="800">
|
|
<meta property="og:image:height" content="429">
|
|
|
|
<!-- TWITTER -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@webslides">
|
|
|
|
<!-- EDIT -->
|
|
<meta name="twitter:creator" content="@jlantunez">
|
|
<!-- EDIT -->
|
|
<meta name="twitter:title" content="WebSlides: Netflix's Culture">
|
|
<!-- EDIT -->
|
|
<meta name="twitter:description" content="Patty McCord created Netflix's culture. This is a homage.">
|
|
<!-- EDIT -->
|
|
<meta name="twitter:image" content="../static/images/share-webslides.jpg">
|
|
|
|
<!-- EDIT -->
|
|
|
|
<!-- FAVICONS -->
|
|
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
|
|
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
|
|
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
|
|
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
|
|
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
|
|
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
|
|
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
|
|
|
|
<!-- Android -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="theme-color" content="#333333">
|
|
</head>
|
|
|
|
<body>
|
|
<header role="banner">
|
|
<nav role="navigation">
|
|
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
|
|
<ul>
|
|
<li class="github">
|
|
<a rel="external" href="https://github.com/webslides/webslides" title="Github">
|
|
<svg class="fa-github">
|
|
<use xlink:href="#fa-github"></use>
|
|
</svg>
|
|
<em>WebSlides</em>
|
|
</a>
|
|
</li>
|
|
<li class="twitter">
|
|
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
|
<svg class="fa-twitter">
|
|
<use xlink:href="#fa-twitter"></use>
|
|
</svg>
|
|
<em>@WebSlides</em>
|
|
</a>
|
|
</li>
|
|
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main role="main">
|
|
<article id="webslides">
|
|
|
|
<!-- Quick Guide
|
|
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
|
- Vertical sliding = <article id="webslides" class="vertical">
|
|
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
|
|
-->
|
|
|
|
<section class="bg-red">
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800')"></span>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<h1>
|
|
<strong>Netflix's Culture</strong>
|
|
</h1>
|
|
<p class="text-symbols">* * * </p>
|
|
<p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free">
|
|
<svg class="fa-cloud-download">
|
|
<use xlink:href="#fa-cloud-download"></use>
|
|
</svg> WebSlides</a>
|
|
</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap size-50 bg-white">
|
|
<h2>
|
|
<svg class="fa-info-circle large">
|
|
<use xlink:href="#fa-info-circle"></use>
|
|
</svg>
|
|
<strong>A bit of context</strong>
|
|
</h2>
|
|
<hr>
|
|
<p><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> created <a href="https://jobs.netflix.com/life-at-netflix">Netflix's culture</a>. She wrote the document called <strong>"Netflix Culture: Freedom & Responsibility."</strong> (2009). So far, it's been shared over 16 million times on <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> and has been called "the most important document ever to come out of the Valley" by Sheryl Sandberg.</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap">
|
|
<div class="grid vertical-align">
|
|
<div class="column">
|
|
<h3><strong>We seek excellence</strong></h3>
|
|
</div>
|
|
<div class="column">
|
|
<p class="text-intro">We value candor, transparency, and courage. <strong>We embrace context and avoid control</strong>, seeking insight and understanding to make sound decisions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-red">
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/BYYu5nvQoUM/1600x800')"></span>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter fadeInUp">
|
|
<h3><strong>Diversity & Inclusiveness</strong></h3>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap size-50">
|
|
<h2><strong>7 Aspects</strong> of our Culture</h2>
|
|
<hr>
|
|
<ol class="text-cols">
|
|
<li><strong>Values are what we Value</strong></li>
|
|
<li>High Performance</li>
|
|
<li>Freedom & Responsibility</li>
|
|
<li>Context, not Control</li>
|
|
<li>Highly Alined, Loosely Coupled</li>
|
|
<li>Pay Top of Market</li>
|
|
<li>Promotions & Development</li>
|
|
</ol>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap size-50 bg-white">
|
|
<h3><strong>1/7 Values are what we value</strong></h3>
|
|
<p class="text-intro">Make your values mean something.</p>
|
|
<hr>
|
|
<p>Many companies have nice sounding value statements displayed in the lobby. Enron, whose leaders went to jail, and which went <strong>bankrupt from <a href="https://www.youtube.com/watch?v=jrEf8uabe7E">fraud</a></strong> had these values displayed in their lobby: <strong>integrity, communication, respect, and excellence</strong>.</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap size-50">
|
|
<h2><strong>9 Behaviors</strong></h2>
|
|
<p class="text-intro">At Netflix, we particularly value the following nine behaviors and skills. We hire and promote people who demonstrate these nine.</p>
|
|
<hr>
|
|
<ol class="text-cols">
|
|
<li>Judgment</li>
|
|
<li>Communication</li>
|
|
<li>Impact</li>
|
|
<li>Curiosity</li>
|
|
<li>Innovation</li>
|
|
<li>Courage</li>
|
|
<li>Passion</li>
|
|
<li>Honesty</li>
|
|
<li>Selflessness</li>
|
|
</ol>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap size-50">
|
|
<h2><strong>7 Aspects</strong> of our Culture</h2>
|
|
<hr>
|
|
<ol class="text-cols">
|
|
<li><strong>Values are what we Value</strong></li>
|
|
<li><strong>High Performance</strong></li>
|
|
<li>Freedom & Responsibility</li>
|
|
<li>Context, not Control</li>
|
|
<li>Highly Alined, Loosely Coupled</li>
|
|
<li>Pay Top of Market</li>
|
|
<li>Promotions & Development</li>
|
|
</ol>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-black">
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/8lUTnkZXZSA/1600x800')"></span>
|
|
<div class="wrap">
|
|
<h3><strong>2/7 High Performance</strong></h3>
|
|
<ul class="flexblock features">
|
|
<li>
|
|
<div>
|
|
<h2>
|
|
<svg class="fa-users">
|
|
<use xlink:href="#fa-users"></use>
|
|
</svg>
|
|
We're a team
|
|
</h2>
|
|
not a family.
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<h2>
|
|
<svg class="fa-trophy">
|
|
<use xlink:href="#fa-trophy"></use>
|
|
</svg>
|
|
We're a pro sports team
|
|
</h2>
|
|
not a kid's recreational team.
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<h2>
|
|
<svg class="fa-star">
|
|
<use xlink:href="#fa-star"></use>
|
|
</svg>
|
|
We have stars
|
|
</h2>
|
|
in every position.
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/M-H70CDJnDI/1600x800')"></span>
|
|
<div class="wrap size-60 bg-trans-dark">
|
|
<h4><strong>Why are we so manic on high performance?</strong></h4>
|
|
<p class="text-intro">In procedural work, the best are 2x better than the average.</p>
|
|
<hr>
|
|
<p class="text-intro">In creative work, the best are 10x better than the average, so huge premium on creating effective teams of the best.</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-black">
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/26qZsuRwm0c/1600x800')"></span>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>Content that people love</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="fullscreen">
|
|
<div class="embed">
|
|
<video autoplay loop poster="https://webslides.tv/static/images/netflix.jpg">
|
|
<source src="https://webslides.tv/static/videos/netflix.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<!-- .end .embed -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap size-50">
|
|
<h3><strong>3/7 Freedom & Responsibility</strong></h3>
|
|
<p class="text-intro">Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.</p>
|
|
<hr>
|
|
<p class="text-intro"><strong>Netflix's Policy</strong>: "Act in Netflix's best interest" (5 words long).</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h3><strong>"Act in Netflix's best interest"</strong> generally means...</h3>
|
|
<ul class="flexblock border">
|
|
<li>
|
|
Expense only what you would otherwise not spend.
|
|
</li>
|
|
<li>
|
|
Travel as you would if it were your own money.
|
|
</li>
|
|
<li>
|
|
What gifts you can accept?
|
|
Disclose non-trivial vendor gifts.
|
|
</li>
|
|
<li>
|
|
Take from Netflix only when it is inefficient to not take (calls...)
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap size-50 bg-white">
|
|
<h4><strong>Summary of Freedom & Responsibility</strong></h4>
|
|
<hr>
|
|
<ol>
|
|
<li>As we grow, minimize rules.</li>
|
|
<li>Inhibit chaos with ever more high performance people.</li>
|
|
<li><strong>Flexibility is more important than efficiency</strong> in the long term.</li>
|
|
</ol>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="grid">
|
|
<div class="column">
|
|
<p class="text-context">
|
|
This is a homage.
|
|
</p>
|
|
<p class="text-intro"><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> wrote <strong>"Netflix Culture: Freedom & Responsibility"</strong>. Go to <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> to read the whole document.</p>
|
|
</div>
|
|
<div class="column">
|
|
<div>
|
|
<div class="embed">
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/uvG0aCbuG60?rel=0&controls=0" allowfullscreen></iframe>
|
|
</div>
|
|
<!-- normalize flexbox -->
|
|
</div>
|
|
<!-- end .embed -->
|
|
</div>
|
|
<!-- end .column -->
|
|
</div>
|
|
<!-- end .grid -->
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
|
|
</article>
|
|
</main>
|
|
<!--main-->
|
|
|
|
<footer>
|
|
<div class="wrap">
|
|
<p>
|
|
<span class="alignright"><a href="http://netflix.com" title="Netflix"><img src="../static/images/logos/netflix.svg" alt="Netflix"></a></span>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Required -->
|
|
<script src="../static/js/webslides.js"></script>
|
|
<script>
|
|
window.ws = new WebSlides();
|
|
</script> <!-- Autoslide? window.ws = new WebSlides({ autoslide: 8000 }); -->
|
|
|
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
|
<script defer src="../static/js/svg-icons.js"></script>
|
|
|
|
</body>
|
|
</html>
|