davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>‘Snow Fall’ at 10: How It Changed Journalism (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.nytimes.com/2022/12/23/insider/snow-fall-at-10-how-it-changed-journalism.html">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>‘Snow Fall’ at 10: How It Changed Journalism</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.nytimes.com/2022/12/23/insider/snow-fall-at-10-how-it-changed-journalism.html" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <section>
<div class="css-53u6y8"><p class="css-798hid etfikam0"><a class="css-yywogo" href="https://www.nytimes.com/series/times-insider" title="">Times Insider</a> explains who we are and what we do and delivers behind-the-scenes insights into how our journalism comes together.</p><p class="css-at9mc1 evys1bk0">Ten years ago this week, in December 2012, “<a class="css-yywogo" href="https://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek" title="">Snow Fall: The Avalanche at Tunnel Creek</a>,” an ambitious multimedia feature about a deadly avalanche in Washington State that year, took the journalism world by storm. In less than a week after it was published online, the article, which was broken up into six chapters and combined more than 15,000 words with video interviews, interactive graphics and animated simulations, was viewed by more than 3.5 million people. <a class="css-yywogo" href="https://www.theatlantic.com/technology/archive/2012/12/new-york-times-snow-fall-feature/320253/" title="" rel="noopener noreferrer" target="_blank">The Wire heralded it as a pivotal moment in journalism.</a></p><p class="css-at9mc1 evys1bk0">The article opens with a full-screen video, playing on a loop, of snow blowing off a mountain. As a reader scrolls, text, video and images appear. The article also uses simulations to trace the path of skiers who became trapped; these models were built with LIDAR elevation data and satellite imagery.</p><p class="css-at9mc1 evys1bk0">The feature, which was reported by the Times journalist John Branch over six months, was produced by a team of 11, including Hannah Fairfield, the current Climate editor who helped guide the process of building the piece; Jacky Myint, the principal designer on the project; and Jeremy White and Joe Ward, Graphics editors who created ambitious visual elements for it. “Snow Fall” won the 2013 Pulitzer Prize in Feature Writing and a Peabody Award.</p></div><aside class="css-ew4tgv" aria-label="companion column"></aside></div><div></div><div class="css-s99gbd StoryBodyCompanionColumn"><div class="css-53u6y8"><p class="css-at9mc1 evys1bk0">The project helped open the door for more compelling combinations of multimedia and text in the New York Times newsroom — and at publications across the country.</p></div><aside class="css-ew4tgv" aria-label="companion column"></aside></div><div><figure class="sizeMedium css-7rkrfl" aria-label="media" role="group" data-testid="VideoBlock"><div class="css-bsn42l"><span class="css-1dv1kvn">Video</span><div class="css-11kuxu4" style="width:100%;padding-bottom:61.53846153846154%;overflow:hidden"><div class="css-122y91a"><img src="https://static01.nyt.com/images/2022/12/24/insider/24snowfall-still-3/24snowfall-still-3-superJumbo-v2.jpg" class="css-c7hxrg" alt="Cinemagraph"/><video data-testid="cinemagraph" src="https://vp.nyt.com/video/2022/12/22/105131_1_24itt-video-3_wg_720p.mp4" class="cinemagraph_video css-c7hxrg" muted="" loop="" autoplay="" playsinline=""></video></div></div></div><figcaption class="css-y5g5d7 e1maroi60"><span class="css-jevhma e13ogyst0">The project combined text with interactive graphics, animated simulations, video and more.</span></figcaption></figure></div><div class="css-s99gbd StoryBodyCompanionColumn"><div class="css-53u6y8"><p class="css-at9mc1 evys1bk0">“The multimedia elements work together with the written component, so the narrative feels seamless,” said Steve Duenes, a deputy managing editor for The Times. He was the paper’s Graphics director at the time of “Snow Fall”’s publication and helped develop the core presentation concept for the project.</p><p class="css-at9mc1 evys1bk0">The positive response to the project in journalism circles — and the enthusiastic support of masthead editors at The Times — heightened the newsroom’s ambitions for future interactive projects, Mr. Duenes said. But rather than investing six months into building another “Snow Fall,” the Graphics and Digital News Design teams took what they had learned from the process of creating “Snow Fall” and streamlined it.</p><p class="css-at9mc1 evys1bk0">“We learned how to do many of the things we did in ‘Snow Fall’ with a smaller group,” Mr. White said.</p><p class="css-at9mc1 evys1bk0">In the past year, The Times has published dozens of ambitious interactive journalism packages, including a <a class="css-yywogo" href="https://www.nytimes.com/interactive/2022/07/08/nyregion/bronx-fire-nyc.html" title="">3-D model</a> that <a class="css-yywogo" href="https://www.nytimes.com/2022/07/09/insider/reconstructing-the-bronx-apartment-fire.html" title="">reconstructs</a> how a fire in a Bronx high-rise in January killed 17 people and a visual investigation that revealed Russia’s battlefield failures via audio clips from intercepted phone calls that soldiers made to relatives at home. The collaborative workflow among reporters, video journalists, designers and Graphics editors on desks across the newsroom that was integral to producing those pieces has a distant relationship to “Snow Fall,” Mr. Duenes said.</p></div><aside class="css-ew4tgv" aria-label="companion column"></aside></div><div></div><div class="css-s99gbd StoryBodyCompanionColumn"><div class="css-53u6y8"><p class="css-at9mc1 evys1bk0">“It reinforced the idea that the report needed to be more visual in the future,” he said of the project.</p><p class="css-at9mc1 evys1bk0">The Graphics desk has grown substantially since “Snow Fall.” And no longer are charts, maps and animations considered last-minute sweeteners for completed articles.</p><p class="css-at9mc1 evys1bk0">“The Graphics desk has a lot more autonomy to drive stories now,” Mr. White said, citing the Pulitzer Prize-winning <a class="css-yywogo" href="https://www.nytimes.com/2021/06/24/insider/covid-tracking-data.html" title="">Covid-19 tracking project</a> as one example of a piece that was led by the desk. “We’re becoming involved early on in the process and adding value in ways we haven’t in the past.”</p><p class="css-at9mc1 evys1bk0">Mr. Duenes also noted that “Snow Fall” helped budding designers and engineers see themselves as potential journalists.</p><p class="css-at9mc1 evys1bk0">“It generated the idea among people with visual skills that journalism might be a place for them,” Mr. Duenes said. “Not people who were experts at the moment, but people in school who could see an overlap between an area where they had talent and the discipline of visual journalism.”</p></div><aside class="css-ew4tgv" aria-label="companion column"></aside></div><div><figure class="sizeMedium css-7rkrfl" aria-label="media" role="group" data-testid="VideoBlock"><div class="css-bsn42l"><span class="css-1dv1kvn">Video</span><div class="css-11kuxu4" style="width:100%;padding-bottom:53.10674455655868%;overflow:hidden"><div class="css-122y91a"><img src="https://static01.nyt.com/images/2022/12/24/insider/24snowfall-still-2/24snowfall-still-2-superJumbo-v2.png" class="css-c7hxrg" alt="Cinemagraph"/><video data-testid="cinemagraph" src="https://vp.nyt.com/video/2022/12/22/105130_1_24itt-video-2_wg_720p.mp4" class="cinemagraph_video css-c7hxrg" muted="" loop="" autoplay="" playsinline=""></video></div></div></div><figcaption class="css-y5g5d7 e1maroi60"><span class="css-jevhma e13ogyst0">“Snow Fall” used video, playing on a loop, to help immerse readers in the reporting.</span></figcaption></figure></div><div class="css-s99gbd StoryBodyCompanionColumn"><div class="css-53u6y8"><p class="css-at9mc1 evys1bk0">The visual teams at The Times are making progress on new waves of digital design challenges, such as how to structure sweeping interactive projects for an audience that reads articles primarily — or sometimes exclusively — on their phones. (Mr. Duenes said it was not unusual to see nearly three-quarters of people who read a particular Times interactive project now doing so on a mobile device.)</p></div><aside class="css-ew4tgv" aria-label="companion column"></aside></div><div></div><div class="css-s99gbd StoryBodyCompanionColumn"><div class="css-53u6y8"><p class="css-at9mc1 evys1bk0">Looking back, Mr. White said, the tools and techniques in “Snow Fall” now seem a bit rudimentary. (“If we were to redo ‘Snow Fall’ today,” he said, “we’d have new techniques, we’d be using faster devices and it would be a mobile-first story.”) But the collaborative framework and the pursuit of a seamless combination of words and visuals, like that of “Snow Fall,” continue to guide many visual projects.</p><p class="css-at9mc1 evys1bk0">“Before ‘Snow Fall,’ there was a tendency to be wary of doing too much digital experimentation,” said Andrew Kueneman, the editor of Digital News Design. “When it came down to delivering an article, it was a piece of written journalism, first and foremost. But ‘Snow Fall’ made it clear you can do something really different.”</p>
</section>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>