davidbgk
/
larlet-fr-david-cache

<!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>
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>The Web’s Grain by Frank Chimero (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://frankchimero.com/talks/the-webs-grain/transcript/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  The Web’s Grain by Frank Chimero (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://frankchimero.com/talks/the-webs-grain/transcript/">Source originale du contenu</a></h3>
    <section class="foreword">
<p>
    This site is an interpretation of my talk from <a href="http://www.webstock.org.nz/15/">Webstock, 2015.</a> It is a companion to <a href="http://frankchimero.com/talks/what-screens-want/transcript/">What Screens Want</a>, a previous essay on designing natively for screens.
</p>
</section>

<section class="white panel1">

<h1 class="q">Can I play something for you?</h1>

<p>Trust me: it’s totally worth it. Oh, and while you’re listening, pay attention to your chest. You may feel a growing warmth, kind of like the firey trickle after a shot of whiskey.</p>

<p>All right, here we go:</p>
</section>

<section class="rainbowbreak">
<div class="ui360">
    <a href="http://frankchimero.com/talks/the-webs-grain/transcript/dialup.mp3">Play Sound</a>
</div>
<img src="http://frankchimero.com/talks/the-webs-grain/transcript/speaker.svg" alt="This is audio" class="speaker">
</section>

<section class="black">
<p>Wasn’t that <em>great</em>? I’ve listened to those irritating bing-bongs 30 or 40 times in the process of making this page, and while you can’t see it, I’m typing this with a big, stupid smile on my face. If you came online in the ’90s like me, you’re probably smiling too.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/win95_connect.gif" alt="Windows 95 Dial-Up Dialog" class="fullimg">
    <figcaption>Windows 95 Dial-Up Dialog Box</figcaption>
</figure>

<p>That sound, of course, is the audio handshake of a modem connecting to the internet. And the fiery feeling in the chest it creates is the warm pang of nostalgia. I’ve managed to tether that grating sound to all the wonder and magic I felt my first years on the internet. Back then, if you told me that I’d get to spend the next decade or so making things for the web&mdash;well, that would be just about the best news I could be told.</p>

<p>But things have changed, as they always do. I’m writing this fifteen years after the bing-bongs, and the fascination has faded. What happened is what always happens: the wonder I felt was diminished by experience.</p>

<p>The awe goes&mdash;time takes it.</p>
</section>

<section class="white">
<p>There’s a quote from the French philosopher Gaston Bachelard. He says:</p>
<blockquote>“We begin in admiration and end by organizing our disappointment.”</blockquote>

<p>Now, this is a bit pessimistic—he <em>is</em> a French philosopher, after all—but right now the statement does ring true for the technology industry. Think about the weight we’ve added to the world: attention-greedy devices and services, new business structures that turn out to reinforce existing inequalities instead of working against them, technocratic blowhards, never mind the surveillance shit storm we all now must navigate. </p>

<p>How could any self-aware person who works in technology <em>not</em> start to organize their disappointment? It’s gotten to where several of my peers are floating half-hearted speculations about their next careers. This isn’t good: you want the talented and mindful people to stick around, not get husked out, then leave frustrated, exhausted, and conflicted.</p>

<p>The closer I get to it all, the more I become confused and overwhelmed. A thing I knew so well has reached out wider and wider, only to make less and less sense. So last year, instead of being stubborn, complaining, or feeling powerless, I went searching for a different perspective. I wanted to take something big and make it small again. This was urgent: I needed a way to re-engage with my craft on a foundational level. Otherwise, I’d also be looking for a second career.</p>          
</section>

<section class="rainbowbreak">
<h1>It<br>is<br>what<br>it<br>is</h1>
</section>

<section class="white">
<figure>
    <video loop autoplay class="fullimg">
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/sea10s.mp4" type="video/mp4" />
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/sea10s.webmhd.webm" type="video/webm" />
        Your browser does not support the video tag.
    </video>
    <figcaption><a href="https://www.youtube.com/watch?v=SxWKffqBjMM">South China Sea by Toby Smith</a></figcaption>
</figure>
<p>In Buddhism, there’s something called the beginner’s mind. If you’ve ever done any kind of guided meditation, you’re probably familiar. It refers to having an attitude of openness, of eagerness. You drop your heavy preconceptions and revitalize a practice by finding a new way to look at it. Making things for the web started to feel very heavy to me, so this seemed to be what I needed.</p>

<p>Most investigations into beginner’s mind eventually lead to the same zen koan. It’s a small story, and it goes like this:</p>

<blockquote class="koan">
    <p>Before I began to practice, mountains were mountains and rivers were rivers.</p>

    <p>After I began to practice, mountains were no longer mountains and rivers were no longer rivers.</p>

    <p>Now, I have practiced for some time, and mountains are again mountains, and rivers are again rivers.</p>
</blockquote>

<p>So what’s the lesson? Here’s my take: we eventually work through the naive belief that profundity comes from complication. It simply isn’t so. Things have enough depth and worth on their own terms. No metaphors or analogies are needed for insight, only the willingness to listen to the subject speak for itself, even if it contradicts received wisdom.</p>

<p>I’d like to do some listening today.</p>
</section>

<section class="realblack">
<p>What is there to see when you look at a website as itself? A lot, actually, but let’s simplify things down to their core. As we go through this, please excuse me for stating the obvious. My intent is to describe and document the apparent. Rivers as rivers, remember?</p>

<p>Here we have a very vanilla website. No styles, just markup. All defaults.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/code1.gif" alt="Super plain markup for a website" class="fullimg">
</figure>

<p>The first thing to notice about this page is that it is fluid—it adapts to the width of the viewport to fill it up. We can’t quite say it’s responsive, because responsive sites require media queries, but this site, like a responsive one, isn’t opinionated about the size of the viewport. It works well at whatever size you throw at it.</p>

<figure>
    <video loop controls poster="mobydick1poster.jpg" class="fullimg">
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/mobydick1.mp4" type="video/mp4" />
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/mobydick1.webmhd.webm" type="video/webm" />
        Your browser does not support the video tag.
    </video>
</figure>

<p>The page’s fluidity leads to the second thing to notice: the page is vertical.</p>

<figure>
    <video loop controls poster="mobydick2poster.jpg" class="fullimg">
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/mobydick2.mp4" type="video/mp4" />
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/mobydick2.webmhd.webm" type="video/webm" />
        Your browser does not support the video tag.
    </video>
</figure>

<p>Okay, terribly obvious, but let’s tease this apart.</p>

<p>Elements get stacked like a layer cake by default, and it make sense—vertical stacks are much easier to adapt across all kinds of screen sizes, because you don’t have layout issues to manage with more or less space across. You simply keep the elements the full width. This is especially handy for design methods like mobile first, since narrower screens can’t necessarily hold designs where elements are beside one another. By stacking, you get greater consistency in a design, what ever the screen size.</p>

<p>But not every site can be a big vertical stack of bricks, can it? What happens if you place things side-by-side?</p>

<h1>This leads us to the primary visual challenge of responsive design.</h1>

<p>It’s the big daddy, the ur problem, the foundational thorn in your side that, for some reason, I have never seen documented.</p>

<p>I’m going to go back to my vanilla HTML page, but let’s add a couple lines of CSS so that our image is beside the text, and both scale in width as the viewport changes.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/code2.gif" alt="Super plain markup for a website, with a little bit of CSS added to put the image beside the type" class="fullimg">
</figure>

<p>Okay, take a look:</p>

<figure>
    <video loop controls poster="mobydick3poster.jpg" class="fullimg">
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/mobydick3.mp4" type="video/mp4" />
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/mobydick3.webmhd.webm" type="video/webm" />
        Your browser does not support the video tag.
    </video>
</figure>

<h1>Are you crying? No? Look closer.</h1>

<p>I’ll explain: as I change the window width, the image gets <em>taller</em> as it gets wider, because its proportions are fixed. The text, on the other hand, gets <em>shorter</em> as it gets wider since it has no fixed proportions.</p>

<p>If you’ve ever designed a responsive website, this is the source of all your sadness. This is the fount of your tears, the wellspring of your suffering.  If you believe in the afterlife, this is the circle of hell where they light the soles of your feet on fire.</p>

<p>You know how people say to add a breakpoint to a responsive design when the layout starts to look weird? This is the thing that makes the layout look weird. Every time. But, this contradiction is unavoidable and unsolvable, so the only choice is to recognize it as implicit to the medium, and devise strategies to manage it.</p>
</section>

<section>
<p>Most of the solidified techniques about our practice come from the natural ways of the web that have been there since the start. The answer is right there in front of us, in the website itself, and each step we take away from its intentions makes our creations weaker.</p>

<p>What does it look like when you work against the web’s natural character? Well, it probably looks like this:</p>

<figure class="bear">
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/bicyclebear.jpg" alt="A bear riding a bicycle. Yes, really.">
</figure>

<p>I think you make what I call “bicycle bear websites.” Why? Because my response to both is the same.</p>

<p>“Listen bub,” I say, “it is very impressive that you can teach a bear to ride a bicycle, and it is fascinating and novel. But perhaps it’s cruel? Because that’s not what bears are supposed to do. And look, pal, that bear will never actually be <em>good</em> at riding a bicycle.”</p>

<p>This is how I feel about so many of the fancy websites I see. “It is fascinating that you can do that, but it’s really not what a website is supposed to do.” For example, behold <a href="http://www.apple.com/mac-pro/">Apple’s Mac Pro website</a>.</p>
</section>

<section class="realblack">
<figure>
    <video loop controls poster="macproposter.jpg" class="fullimg">
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/macpro.mp4" type="video/mp4" />
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/macpro.webmhd.webm" type="video/webm" />
        Your browser does not support the video tag.
    </video>
    <figcaption>Above: Apple’s promotional website for the Mac Pro computer. Not Pictured: me throwing my laptop across the room trying to use this website.</figcaption>
</figure>

<p>Same response as the bear on the bicycle: all glee, until things go haywire, and you realize it is coming right for you.</p>

<p>What is this monstrosity? Why does it feel like docking a spaceship? Why can’t I scroll? And why is there lag on my fancy laptop? What’s that sound? My computer’s fan? Do I need a Mac Pro to look at the site to buy a Mac Pro? (Actually, that’s a pretty good sales strategy.)</p>

<p>Apple’s pursuit of cool yielded an incredibly fragile, willfully esoteric website that’s good for no one. And I’m certain you can think of a few similar examples of your own: clumsy sites that work counter to the inclinations of the web. Back to the zen koan&mdash;if we see the mountains as mountains and rivers as rivers, these are the sites that try to be different, yet end up swimming up stream and climbing uphill.</p>
</section>

<section class="white examples">
<p>I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology. Too often, the internet is cast as a wide-open, infinitely malleable material. We expect technology to help us overcome limitations, not produce more of them. In spite of those promises, we typically yield consistent design results.</p>

<figure>
    <a href="http://showcase.commercialtype.com" class="img"><img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/pattern-color.jpg" alt="Commercial Type Showcase"></a>
    <figcaption><a href="http://showcase.commercialtype.com">Commercial Type’s Showcase Website</a></figcaption>
</figure>

<p>We use flat colors and simple gradients, because they’re lightweight, easy to draw with CSS, and can easily scale for areas of unknown proportions.</p>

<figure>
    <a href="http://shapeofdesignbook.com" class="img"><img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/pattern-sod.jpg" alt="Website for The Shape of Design"></a>
    <figcaption><a href="http://shapeofdesignbook.com">Website for <em>The Shape of Design</em></a></figcaption>
</figure>

<p>Sites have large horizontal stripes of content, because of the vertical bias I mentioned earlier.</p>

<figure>
    <a href="http://dropmark.com" class="img"><img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/pattern-interface.jpg" alt="Dropmark"></a>
    <figcaption><a href="http://dropmark.com">Dropmark</a></figcaption>
</figure>

<p>We use text as interface, because the nuanced but significant differences in technology’s abstractions are difficult to communicate visually.</p>

<figure>
    <a href="http://obvious.com" class="img"><img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/pattern-photo.jpg" alt="Obvious Ventures"></a>
    <figcaption><a href="http://obvious.com">Obvious Ventures</a></figcaption>
</figure>

<p>Ambient, atmospheric, blurred, or tinted photographs become background images, because we can’t quite be sure how it will be cropped across different viewports.</p>

<p>And big type is overlaid on top of these images because every client simultaneously wants big images and big type. Plus it dances around those text versus image scaling problems I showed earlier.</p>

<figure>
    <a href="http://mailchimp.com" class="img"><img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/pattern-tableau.jpg" alt="Mailchimp"></a>
    <figcaption><a href="http://mailchimp.com">MailChimp</a></figcaption>
</figure>

<p>We use photography with props, because software is abstract and hard to embody, so we show it on a device in a related context to have it seem like the product that it is.</p>

<figure>
    <a href="http://dblg.co.uk" class="img"><img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/pattern-mosiac.jpg" alt="DBLG"></a>
    <figcaption><a href="http://dblg.co.uk">DBLG</a></figcaption>
</figure>

<p>And mosiacs, because every page presents a multitude of elements, and we need structured ways of showcasing this variety.</p>

<p class="sep">***</p>

<p>The web is forcing our hands. And this is fine! Many sites will share design solutions, because we’re using the same materials. The consistencies establish best practices; they are proof of design patterns that play off of the needs of a common medium, and not evidence of a visual monoculture.</p>

<p>So this is a good start, but it is only a start. Could those simple sites I showed earlier assist us beyond the page and provide a larger way to think? To put a finer point on it:</p>

<h1>What would happen if we stopped treating the web like a blank canvas to paint on, and instead like a material to build <em>with</em>?</h1>

<p>It turns out, I found the answer from a painter who also thought to step away from the canvas. Let’s have a short art history lession, shall we?</p>
</section>

<section class="rainbowbreak">
<h1>How<br>to<br>see<br>a<br>moment</h1>
</section>

<section class="black">
<figure>
    <video controls poster="hockneyposter.jpg" class="fullimg">
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/hockney.mp4" type="video/mp4" />
        <source src="http://frankchimero.com/talks/the-webs-grain/transcript/hockney.webmhd.webm" type="video/webm" />
        Your browser does not support the video tag.
    </video>
    <figcaption><a href="https://www.youtube.com/watch?v=cGtraVb_0vY">Clip from David Hockney’s Joiners</a></figcaption>
</figure>

<p>Meet David Hockney&mdash;artist, painter, and conflicted photographer. In the early ’80s, he took a small break from painting to pursue these mentioned photographic joiners. They were an investigation of time and space. Now, that seems really heady, but once you see them, you’ll know exactly what I’m talking about. They kind of look like cubist paintings, but much quicker to read. I’d like to show you a few.</p>

<p>As Hockney says in the video, he started the project with Polaroids. You can see them tiled together here, because each individual photo can’t capture the whole picture.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/hockney1.jpg" alt="Noya and Bill Brandt with Self Portrait (Although They Were Watching This Picture Being Made)" class="fullimg">
    <figcaption>Noya and Bill Brandt with Self Portrait (Although They Were Watching This Picture Being Made), by David Hockney, 1982</figcaption>
</figure>

<p>Inside, Hockney is using redundancy to show action. How many hands are there? How many heads does that man have? Two faces in this image, but you don’t interpret it as a two-headed man. It is two glances at one face&mdash;facets of the same thing.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/hockney2.jpg" alt="Noya and Bill Brandt with Self Portrait (Although They Were Watching This Picture Being Made)" class="fullimg">
</figure>

<p>It’s so seamless, you’d probably not count the faces without me mentioning it. You just know, because this is how you see. You have a small focal range; your brain stitches the bits together into a complete whole.</p>

<p>Here’s another piece, even more advanced. This one is my favorite, because it’s so economical—like a comic strip.</p>

<figure class="billy">
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/hockney3.jpg" alt="Billy Wilder Lighting His Cigar" class="fullimg">
    <figcaption>Billy Wilder Lighting  His Cigar, by David Hockney, 1982</figcaption>
</figure>

<p>Do you see what’s changed? Hockney stopped using Polaroids. The grid is gone, replaced by overlaid, borderless photos. Nothing cut or cropped, nothing tricky. Hockney’s able to do a lot of work with only six images.</p>

<p>What would this method look like with many more? Hockney asked the same question.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/hockney4.jpg" alt="The Scrabble Game" class="fullimg">
    <figcaption>The Scrabble Game, by David Hockney, 1982</figcaption>
</figure>

<p>This is The Scrabble Game, and in my opinion, it’s the masterpiece from this era of Hockney’s career. This piece is all over the place: so many faces, so many hands. The game board is out of sync from image to image, so you can actually piece together the plays in the order they were made. Also, there are no ends to my aggrevation about how he does not see he has a word in his tiles. (Liqueur, anyone?)</p>

<p>So, do you see what’s happened? Recall the first joiner I showed you with the Polaroids, and compare it to The Scrabble Game.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/hockney5.jpg" alt="The Scrabble Game beside Noya and Bill Brandt with Self Portrait" class="fullimg">
</figure>

<p>Hockney began with an image-making practice that relied on the grid necessitated by the Polaroids’ borders and produced a rectangular final work. When he switched to normal film, he was able to overlay images in any necessary shape  that accurately described the time and space of a scene. Nobody would set out to make a picture with these edges—what you see is what was required by the images he managed to snap.</p>

<p>In essence, Hockney abandoned the notion that a two-dimensional work of art needed to exist at a fixed, rectangular size. Instead, small individual photos were overlaid and assembled until they formed a complete picture. Individually, the photos don’t mean much, but collectively they&hellip;</p>

<h1>Wait. Stop. Does this seem familiar?</h1>

<p>Okay, I’m sorry. I’ve tricked you, and we’ve come full circle. We’re back to responsive design. Let’s make an analogy.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/hockney6.jpg" alt="The Scrabble Game beside Noya and Bill Brandt with Self Portrait" class="fullimg">
</figure>

<p>On the left, the Mona Lisa. Cliché, but why the hell not? The painting, to me, is like designing for the printed page. On the right, The Scrabble Game. This assemblage more closely resembles designing for a screen. Do you see it? It is control versus discovery, uniformity versus multiplicity.</p>

<p>With the Mona Lisa, we have fixed, uniform edges that can be planned for with a high degree of certainty and control. We revere and celebrate this painting because of that exquisite control.</p>

<p>With the joiner, we have a different kind of beauty. It is an edgeless surface of unknown proportions, comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment.</p>

<p><em>Also known as web design.</em> Here, I’ll restate what I just said, but this time, imagine I’m talking about web design and not the Hockney photos:</p>

<h1>an edgeless surface of unknown proportions comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment</h1>

<p>That’s a pretty good description of the visual challenges in interaction design, huh?</p>

<p>My head is spinning.</p>
</section>

<section>
<p>In November of 2013, I gave a talk called <a href="#">What Screens Want</a>, where I tried to answer what it meant to natively design for screens. I said it was something I called flux—the capacity for things to change. This could be as showy as animation, but also as simple and fundamental as a spreadsheet sorting itself and showing new results. You can’t do that on paper. So, designing for screens is managing this change over time, and expressing it in clear, communicative, and powerful ways.</p>

<p>Now, after looking at Hockney’s work for far too long, I can add another item to the list:</p>
</section>

<section class="rainbowbreak">
<h1>EDGE<br>LESS<br>NESS</h1>
</section>

<section class="realblack">
<p>A lack of edges permeates the web at all levels. You just have to look for it:</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/graph.gif" alt="Network graph" class="fullimg">
    <figcaption><a href="http://www.opte.org/maps/">Partial map of the Internet from OPTE.</a></figcaption>
</figure>

<p>Edgelessness is in the web’s structure: it’s comprised of individual pages linked together, so its structure can branch out forever.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/infinitecanvas.jpg" alt="Infinite canvas" class="fullimg">
</figure>

<p>Edgelessness applies to the screens that show the web, because they offer an infinite canvas that can scroll in any direction for however long. Boy, do we take for granted that a screen can show more content than is able to be displayed in a single shot.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/devicesizes.gif" alt="Spectrum of Android device sizes" class="fullimg">
    <figcaption><a href="http://opensignal.com/reports/fragmentation.php">Spectrum of Android Fragmentation sizes from OpenSignal. And this is from 2012.</a></figcaption>
</figure>

<p>Edgelessness speaks to the diffusion of device and viewport sizes. Above is a chart of screen sizes across Android devices. How could there be a clear edge on a spectrum with such minor differences between each size?</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/edges.gif" alt="Collapsing walls" class="fullimg">
</figure>

<p>And, most interesting to me, edgelessness means blurred lines between the disciplines that work together to make things for the web. Everyone that I’ve spoken with that’s worked on a large responsive project with a big client says that the process disrupts workflows, expectations, and work culture.</p>

<p>Simply put, the edgelessness of the web tears down the constructed edges in the company. Everything is so interconnected that nobody has a clear domain of work any longer—the walls are gone, so we’re left to learn how to collaborate in the spaces where things connect.</p>
</section>

<section class="white">
<p>Let’s take a look at how edgelessness affects how we work. Suppose you’re about to start a web project with some sketches. How would you begin?</p>

<p>You’d probably draw a box.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/box1.gif" alt="Drawing a box" class="fullimg">
</figure>

<p>Then you’d fill that box with the page’s elements.</p>

<figure>
    <img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/box2.gif" alt="Drawing the elements" class="fullimg">
</figure>

<h1>Whoops.</h1>

<p>Remember the Hockney photos? The size of what we’re making is unknown until we know what we’re putting there. So, it’s better to come up with an arrangement of elements and assign them to a size, rather than the other way around. We need to start drawing, <em>then</em> put the box around it. Let me show you an example.</p>

<p>This set of images comes from the portfolio of Danish designer <a href="http://kasperlaigaard.com/?page_id=1078">Kasper Laigaard</a>. It’s the perfect example of not drawing the box until you know what goes in it. Here, he’s sketching out different content lockups for a redesign of <a href="http://hellomonday.com/">Hello Monday</a>, a digital agency in Denmark and New York. The sketches explain the idea more clearly than my words ever could.</p>

<figure>
    <a href="http://kasperlaigaard.com/?page_id=1078"><img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/laigaard.jpg" alt="Content lock-ups" class="fullimg"></a>
    <figcaption>Content lock-ups for Hello Monday by <a href="http://kasperlaigaard.com/?page_id=1078">Kasper Laigaard</a></figcaption>
</figure>

<p>So just like Hockney’s joiners, we’re creating assembleges of elements, then associating them with the appropriate space.</p>

<p class="sep">***</p>

<p>The practice of assembling conflicts with most of the terminology we have in place for responsive design. Our words make it seem that we’re designing how elements break down, but really, we should be focusing on how they <em>build up</em>.</p>

<h1><strike>breakpoint</strike><br>point of reassembly</h1>

<p>So, those media queries we write? It might be time to stop calling them breakpoints, and instead consider them points of <em>reassembly</em>.</p>

<p>And this concept, just like the layouts we create, can reach out a bit further.</p>
</section>

<section class="rainbowbreak">
<h1>Expand<br>Until<br>Collapse</h1>
</section>

<section class="realblack">
<img src="http://frankchimero.com/talks/the-webs-grain/transcript/blank.gif" data-src="http://frankchimero.com/talks/the-webs-grain/transcript/dots.gif" alt="Animated dots" class="fullimg">

<p>We often think making things for the web is a process of simplifying&mdash;the hub, the dashboard, the control panel are all dreams of technology that coalesces&mdash;but things have a tendency to diverge into a multiplicity of options. We pile on more tools and technology, each one increasingly nuanced and minor in its critical differences. Clearly, convergence and simplicity make for poor goals. Instead, we must aim for clarity. You can’t contain or reduce the torrent of technology, but you can channel it in a positive direction through proper framing and clear articulation.</p>

<h1>Technology only adds more—it is never this <em>or</em> that; it is always this <em>and</em> that.</h1>

<p>A quick example from my life: Twitter didn’t replace Facebook. The iPad didn’t replace my phone. My phone didn’t replace my TV. Now, I watch YouTube on my iPad, toss the video up to my TV, while checking Twitter and Facebook on my phone. It’s a little constellation of technology. But I keep asking myself: how many more things can I juggle? And for how long?</p>

<p>The answers offered are typically technological solutions. Algorithms. Automation. Tiny programs and sets of rules to filter out what bursts from the internet’s flue hole. While well intentioned (maybe), these answers only become extra points of control and influence.</p>

<h1>Using technology to solve the problems it causes is as futile as cleaning a grass stain by rubbing grass on it.</h1>

<p>More technology only amplifies the problems created by an abundance of it. This leads to the most pressing question: How far out will technology grow? And when does it cross the line of comfort?</p>

<p class="sep">***</p>

<p>We’re building edgeless environments of divergency. Things are added in chaos, then if successful, they expanded further and further out until they collapse and rearrange. This is probably why responsive design feels so relevant, maddening, and divisive: its patterns mimic the larger patterns of technology itself.</p>

<p>What we build is defined and controlled by its unresolvable conflicts. In responsive design, it’s the text and image conundrum I showed earlier. In other, more grand arenas, there is capital versus labor, or collective control versus anarchic individualism. In technology, I believe it comes down to the power dynamics of convenience. To create convenience&mdash;particularly the automated convenience technology trades in&mdash;someone else must make our choices for us.</p>

<h1>In other words: the less you have to do, the less say you have.</h1>

<p>Up to a point, swapping autonomy for ease is a pretty good trade: who wants to run the math on their accounting books or call the restaurant to place a delivery order? But if taken too far, convenience becomes a Trojan Horse. We cede too much control and become dependent on something we can no longer steer. Platforms that promised to bring convenience to a process or intimacy to a relationship now wedge themselves into the transaction as new middlemen. Then, we’re left to trust in the benevolence of those who have the power to mold our dependencies. Citing a lot of the concerns I mentioned earlier, those people are less responsible and compassionate than we had hoped. In pursuit of convenience, we have opened the door to unscrupulous influence.</p>
</section>

<section class="white">
<p>You could say that our current technological arrangement has spread out too far, and it is starting to look and feel wrong. Fortunately, we can treat this over-expansion just like everything else I’ve mentioned. We can draw a line, and create a point of reassembly for what we’ve made. We can think about how to shift, move, and resize the pieces so that they fall back in line with our intentions. This power is compounded for those of us who make this technology.</p>

<p>But this is not a technological response. It is an explicit act of will&mdash;an individual’s choice to change their behaviors about what to use, where to work, what to adopt, what to pay attention to. It is simple mindfulness, that thing which needy technology makes so hard to practice. And it starts with a question: what is technology’s role in your life? And what, really, do you want from it?</p>

<p>As for me? I won’t ask for peace, quiet, ease, magic or any other token that technology can’t provide&mdash;I’ve abandoned those empty promises. My wish is simple: I desire a technology of grace, one that lives well within its role.</p>

<p>How will we know that we’re there? I suppose we’ll look at what we’ve built, notice how the edges have dropped away, and actually be pleased it looks like it could go on forever. •</p>
</section>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://frankchimero.com/talks/the-webs-grain/transcript/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>