davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567
							<!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>Links are broken. These three alternatives have improved our readers’ reading experience. (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="https://medium.com/de-correspondent/links-are-broken-these-three-alternatives-have-improved-our-readers-reading-experience-796c302c8930">

<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>
  Links are broken. These three alternatives have improved our readers’ reading experience. (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://medium.com/de-correspondent/links-are-broken-these-three-alternatives-have-improved-our-readers-reading-experience-796c302c8930">Source originale du contenu</a></h3>
    <h4 name="subtitle" id="subtitle" class="graf--h4">It’s all about focus, relevance and context</h4>

<p name="7e5c" id="7e5c" class="graf--p graf--empty"><br/></p>

<p name="91fb" id="91fb" class="graf--p">At <em class="markup--em markup--p-em">De Correspondent</em>, a Dutch journalism platform with 30,000 paying subscribers (60 p/y), we’re all about providing context to the world in a thoughtful and in-depth way. This takes an effort, both from our writers as our readers. Because, after years and years of being bombarded with ever easier content, how do you get readers to take the time again to start reading longer publications online?</p>

<p name="9615" id="9615" class="graf--p">One of the most distracting phenomenons during reading are links. They keep pointing us to directions that are probably valuable, but at the same time force us to make a decision: <strong class="markup--strong markup--p-strong">to click or not to click</strong>.</p>

<p name="8157" id="8157" class="graf--p">These links are the backbone of the internet. And yet, no improvements have made to this quintessential part of the web for decades. We took up the challenge. Here’s how.</p>

<h3 name="d93d" id="d93d" class="graf--h3">Here are three things we tried to improve the link-experience at De Correspondent</h3>

<p name="afaa" id="afaa" class="graf--p">Being a very unfocused and highly distractible reader myself when it comes to online content, I find many good and interesting publications escaping my attention when they really shouldn’t. My thinking about why this happens soon boiled down to a rather simple conclusion: nearly everything on the internet is architected around distraction. Everything is carefully thought out to grab your attention at any moment, no matter if you are just looking around, or worse case, if you are actually consuming the content offered to you.</p>

<p name="6bbd" id="6bbd" class="graf--p">Menu items want to show you other interesting sections, related items are there to make you aware of more content you might like and ads try to lure you into buying something (we solved this by being a deliberately ad-free publication, but that’s another story), in many cases on some other website than yours.</p>

<p name="03f8" id="03f8" class="graf--p">And then there is links.</p>

<h3 name="7c3c" id="7c3c" class="graf--h3">Flawed by design</h3>

<p name="b839" id="b839" class="graf--p">Links are great. They connect content, topics and views and all you have to do as a user is click on one of them to start another endless journey into a world of knowledge, entertainment, or utter nonsense. That said, they do have a few fatal drawbacks. They provide little or no context, they are distracting and they litter articles with small blind spots asking you to trust that your click will be rewarded with something useful.</p>

<p name="1876" id="1876" class="graf--p">For a publication that wants to provide you with insightful longreads, this is a huge problem.</p>

<p name="9a87" id="9a87" class="graf--p">Links offer your readers reasons to leave. For example: if you put a link in the first sentence of your piece, you're basically saying “Eh whatever, the rest of this text isn't worth your time anyway. Just click here. It will explain everything!”. And of course, often I don’t return. After a short clicking frenzy I have lost track of where I started in the first place. And how could I remember? I didn't even get the chance to properly read anything of the original article yet.</p>

<p name="e006" id="e006" class="graf--p">Also, reading is passive. A click is active. Instant gratification. “I did something. Yay!”. It’s effortless and quick, whereas reading the whole article is, well, from time to time sooo much more work. The fact that every now and then I plan a whole day free to catch up on reading all my open browser tabs goes to show the consequences of this behaviour.</p>

<h3 name="3f5b" id="3f5b" class="graf--h3">A new kind of linking</h3>

<p name="5fd4" id="5fd4" class="graf--p">At De Correspondent, a Dutch journalism startup we founded at the end of 2013 and which currently has over 30.000 paying members, we wanted to face these issues full on. Our publications don’t contain any traditional in-text links. This prevents a lot of the possible clutter and reasons to leave, usually found in many articles. When we want to tell a story, we'd like you to take it in from start to end. There is a flow we would like you to follow. We introduce you into a topic, investigate our findings and come to some kind of conclusion. If we gave our readers too many options to leave the article before finishing it, we wouldn’t get to convey whatever it is we want to convey.</p>

<p name="7155" id="7155" class="graf--p graf--last">To enforce this principle, our editor, called Respondens, doesn't allow our authors to add common links to their stories. However, we offer them three alternatives: an <em class="markup--em markup--p-em">info card</em>, a <em class="markup--em markup--p-em">side note</em> and a <em class="markup--em markup--p-em">featured link</em>. I will explain each’s purpose and the reasoning behind their approach.</p>

<section name="e45b"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><h4 name="6e99" id="6e99" class="graf--h4 graf--first"><strong class="markup--strong markup--h4-strong">1. Info cards</strong></h4><p name="6096" id="6096" class="graf--p">One of the issues we wanted to address is the reader’s knowledge gap. If you don&#39;t know enough about a person, company or topic mentioned in a story, an article becomes unreadable. Chances are you will stop reading or at best pause while you search for the necessary information to understand about the importance of this specific part in relation to the full story. For this reason the author needs to add the required background to make sure everybody is sufficiently able to read the story. For readers who do actually have enough background knowledge, these superfluous additions are an annoyance. It’s even a slight insult to their intelligence. ‘Yeah, yeah, I know this. Why do you waste my time with the obvious.’</p><p name="7d90" id="7d90" class="graf--p">We solved this by introducing something we call the ‘<em class="markup--em markup--p-em">info card</em>’. This piece of additional content is only presented when you have a need for it by clicking on the indicator behind the name or term mentioned in the story. Because, by default, it is in a closed state, you are able to easily skip over it when you do have the required background knowledge. Opening it however adds the additional information inline in the text so you don&#39;t have to wander your eyes to another part of the page. Your eyes will never have to leave the main story and you can keep continue reading the story as if this addition was part of it in the first place.</p><figure name="c3f3" id="c3f3" class="graf--figure graf--last"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 358px;"><div class="aspect-ratio-fill" style="padding-bottom: 51.1%;"></div><img class="graf-image" data-image-id="1*WD3WbzVceV6bqxsIGqh59A.gif" data-width="700" data-height="358" src="https://d262ilb51hltx0.cloudfront.net/max/960/1*WD3WbzVceV6bqxsIGqh59A.gif"></div><figcaption class="imageCaption">An ‘info card’ marker indicating additional information</figcaption></figure></div></div></section>

<section name="7bc8"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><h4 name="5ad3" id="5ad3" class="graf--h4 graf--first">2. Side notes</h4><p name="af4c" id="af4c" class="graf--p">At De Correspondent we are all about providing context. We don&#39;t report the news. We want to explain why something is news, or why it should be news. We try to give context to the world around us. With this in mind, we felt that the way we present our stories should reflect this same philosophy.</p><p name="4e0e" id="4e0e" class="graf--p">The main purpose of most links is to provide an additional layer of information, a more in-depth view or simply to share your sources. Links however usually offer little information about what the user is going to see once clicked on them. As a reader you will have to extract this from the context of the link. Sometimes the linked word or part of the sentence will provide you with some idea what the link will link to, other times the surrounding paragraph could be used as an indicator.</p><p name="ed26" id="ed26" class="graf--p">We wanted to do more with this. An external link is a valuable addition to an article, especially if it provides additional background information for the interested user. It would however be very useful if it wasn&#39;t up to the user to find out why the author added the link in the first place. To achieve this we introduced something we call a <em class="markup--em markup--p-em">‘side note’</em>. It functions as a regular link, but is placed next to the related paragraph and has a label that describes the content that was linked to. Next to this, every side note has an icon indicating the type of content you are about to see, like a video, audio fragment or report.</p><p name="5bc7" id="5bc7" class="graf--p">The added benefit, of presenting our links in the bar next to the article, besides clearing the text of links, is that it functions as sort of a checklist. No need to remember the exact location of an interesting link for later consumption. Just quickly scroll past the article to get an overview of all the relevant additional information that might interest you.</p><figure name="adf9" id="adf9" class="graf--figure graf--last"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 268px;"><div class="aspect-ratio-fill" style="padding-bottom: 38.3%;"></div><img class="graf-image" data-image-id="1*AsZMRIkihtsNk9t3w4whRQ.gif" data-width="700" data-height="268" src="https://d262ilb51hltx0.cloudfront.net/max/960/1*AsZMRIkihtsNk9t3w4whRQ.gif"></div><figcaption class="imageCaption">A ‘side note’ allowing to give context to a related or relevant page</figcaption></figure></div></div></section>

<section name="5933"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><h4 name="336a" id="336a" class="graf--h4 graf--first">3. Featured links</h4><p name="443c" id="443c" class="graf--p">And then there is a third distraction we wanted to get rid of: the premature link. I’ve always found it quite strange when authors link to a page, tool or whatever, the first time they mention it while you as a reader didn&#39;t even get a chance yet to read why the author has added that link.</p><p name="9986" id="9986" class="graf--p">Think about an article that recommends, for instance, a music festival. In many cases the first part of such an article contains a link to the festival’s website. It’s not so much a problem that the link is there. It’s just that the author didn&#39;t get to the point yet of explaining why it is such a great festival to go to. A reader who clicks on that link as soon as it appears will go to that website underinformed (or at least in the eyes of the author who wanted to tell you something about it). Why would you want to send the user off to another place in order to do the exact same investigation that you’ve already done.</p><p name="8c3c" id="8c3c" class="graf--p">On our platform such important links, which we refer to as <em class="markup--em markup--p-em">‘featured links’,</em> are placed underneath the article. Placing them down there ensures enough attention and focus on the reader’s side for the story covering it and as an added bonus, it consistently places important links in a manner everybody knows where to find them.</p><figure name="884b" id="884b" class="graf--figure graf--last"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 380px;"><div class="aspect-ratio-fill" style="padding-bottom: 54.300000000000004%;"></div><img class="graf-image" data-image-id="1*JVB2A7KtDbGbXVN7NWnwaA.gif" data-width="700" data-height="380" src="https://d262ilb51hltx0.cloudfront.net/max/960/1*JVB2A7KtDbGbXVN7NWnwaA.gif"></div><figcaption class="imageCaption">A ‘featured link’ gets the attention it deserves</figcaption></figure></div></div></section>

<section name="c90d"><div class="section-divider layoutSingleColumn"><hr class="section-divider"></div><div class="section-content"><div class="section-inner layoutSingleColumn"><h3 name="7ac2" id="7ac2" class="graf--h3 graf--first">Read more about our world-record in journalism crowdfunding</h3><p name="0033" id="0033" class="graf--p">True to our philosophy of the presentation of links, here are a few related to things mentioned in this article:</p><p name="6a91" id="6a91" class="graf--p"><strong class="markup--strong markup--p-strong">Example publications</strong><em class="markup--em markup--p-em"> — </em><a target="_blank" href="https://decorrespondent.nl/541/why-we-should-give-free-money-to-everyone/4159749-0422c84e" data-href="https://decorrespondent.nl/541/why-we-should-give-free-money-to-everyone/4159749-0422c84e" class="markup--anchor markup--p-anchor" rel="nofollow">Why we should give free money to everyone</a> — 6 <a target="_blank" href="https://decorrespondent.nl/1418/6-secret-traits-that-make-Louis-van-Gaal-the-humble-genius-he-is-and-mainstream-media-fail-to-see/10903002-fa96dc00" data-href="https://decorrespondent.nl/1418/6-secret-traits-that-make-Louis-van-Gaal-the-humble-genius-he-is-and-mainstream-media-fail-to-see/10903002-fa96dc00" class="markup--anchor markup--p-anchor" rel="nofollow">secret traits that make Louis van Gaal the humble genius he is and mainstream media fail to see</a> — <a target="_blank" href="https://decorrespondent.nl/1395/The-critics-of-Alain-de-Botton-have-got-it-all-wrong-heres-why/39329235-4a48015e" data-href="https://decorrespondent.nl/1395/The-critics-of-Alain-de-Botton-have-got-it-all-wrong-heres-why/39329235-4a48015e" class="markup--anchor markup--p-anchor" rel="nofollow">The Critics of Alain de Botton got it all wrong. Here’s why</a></p></div></div></section>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/de-correspondent/links-are-broken-these-three-alternatives-have-improved-our-readers-reading-experience-796c302c8930">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>