davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
							<!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>Be Kind, Design - Nat Dudley (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/@natdudley/be-kind-design-d28324b7c348">

<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>
  Be Kind, Design - Nat Dudley (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/@natdudley/be-kind-design-d28324b7c348">Source originale du contenu</a></h3>
    <div class="section-inner sectionLayout--insetColumn"><p name="c8f7" id="c8f7" class="graf graf--p graf-after--figure">When you walk down the traffic-clogged streets of New York City, often considered to be one of the most liveable cities in the world, you might notice something about the cyclists. About 80% of them are men. But if you wander down to the banks of the Hudson River, where there is a protected cycle-way, something very different happens. There are women. There are children. There are elderly people. In fact, over half of the cyclists using these spaces are not adult men.</p><figure name="a37f" id="a37f" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 350px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.7%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*Jm7V10SIzsgoF7lKIpDERw.jpeg" data-width="5472" data-height="3648" data-action="zoom" data-action-value="1*Jm7V10SIzsgoF7lKIpDERw.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*Jm7V10SIzsgoF7lKIpDERw.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*Jm7V10SIzsgoF7lKIpDERw.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*Jm7V10SIzsgoF7lKIpDERw.jpeg"></noscript></div></div></figure><p name="b7cf" id="b7cf" class="graf graf--p graf-after--figure">Uptake of cycling is considered to be one of the signs of a liveable urban environment by almost everyone who rates and measures such things. But who is cycling is just as, if not more, important than sheer numbers. You see, women and children will only start to cycle when the perceived risk to their safety and wellbeing decreases. And as it turns out, that’s something you have to design for.</p><p name="780d" id="780d" class="graf graf--p graf-after--p">Here in Wellington, we’re currently discussing locations of cycleway paths. Some people have suggested that the cycleway to go through the tree-filled town belt. At a first glance, it seems the the perfect solution. It would be beautiful and peaceful and there’d be less risk of cars harming cyclists and of course, all the motorists would be happy that their precious roads and parking weren’t affected. But the town belt has regulations, including no lighting. A cycle path with no lighting, going through tree-filled areas in the Wellington winter is not a cycle path that women, children, and elderly people will use, and thus, if you care about these people, you realise immediately this isn’t an option.</p>
<p name="0c37" id="0c37" class="graf graf--p graf-after--p">Gil Peñalosa calls urban design like this <a href="https://www.880cities.org/" data-href="https://www.880cities.org/" class="markup--anchor markup--p-anchor" rel="noopener nofollow" target="_blank">8–80 cities</a>. He believes that if everything we do in our cities is great for an 8 year old and an 80 year old, then it will be great for all people. And so he advocates for a design approach where you prioritise the needs of those people and measure their usage of the things you design and build. The 8 year old and the 80 year old, and other marginalised groups in our society like women, people with disabilities, queer people, and people of colour are considered to be indicator species who help us understand what is working in our cities and what is not. Instead of considering them edge cases, and designing for the majority of car-using urban dwellers, we design for them first.</p><p name="81a8" id="81a8" class="graf graf--p graf-after--p">Peñalosa talks about needing a sense of urgency when we address urban design because the number of people growing up, living, and retiring in cities is exploding. Every time we build things that don’t centre the needs of the 8 year old and 80 year old, we’re creating a world that systemically excludes and harms hundred of thousands of people.</p><p name="171c" id="171c" class="graf graf--p graf-after--p">When I hear Peñalosa speak about designing for cities this way, I can’t help but think about the web and the things that we build. We talk loftily about disruption and changing the world, but in reality, we design and build tools and products that cater to the needs and risks of smaller subset of people, and we exist in a system that drives us towards this mode of thinking. We build MVPs that are delivered via sprints and story points and personas, and in doing so, we average out people, blurring their corners, and relegating the needs of the 8 year old and the 80 year old to that worst of worst term: edge cases. But people are not averages, and when we deny the reality of people’s existence, we make the web a hostile and unsafe place.</p><p name="4a3f" id="4a3f" class="graf graf--p graf-after--p">The result is an Internet where <a href="https://qz.com/1042852/using-a-fitness-app-taught-me-the-scary-truth-about-why-privacy-settings-are-a-feminist-issue/" data-href="https://qz.com/1042852/using-a-fitness-app-taught-me-the-scary-truth-about-why-privacy-settings-are-a-feminist-issue/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">location details are unwittingly leaked</a>.</p><p name="15bb" id="15bb" class="graf graf--p graf-after--p">One <a href="https://www.theguardian.com/technology/2017/dec/05/facebook-bans-women-posting-men-are-scum-harassment-scandals-comedian-marcia-belsky-abuse" data-href="https://www.theguardian.com/technology/2017/dec/05/facebook-bans-women-posting-men-are-scum-harassment-scandals-comedian-marcia-belsky-abuse" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">where women are banned from Facebook</a> for saying ‘Men are scum’ after months of harassment, but where the harassers are not banned.</p><p name="f6df" id="f6df" class="graf graf--p graf-after--p">One where <a href="http://www.madamasr.com/en/2017/11/22/news/u/eipr-authorities-have-systematically-entrapped-lgbtq-individuals-online-since-2015/" data-href="http://www.madamasr.com/en/2017/11/22/news/u/eipr-authorities-have-systematically-entrapped-lgbtq-individuals-online-since-2015/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">the dating profiles of queer people are used by oppressive governments to track them down and persecute them</a>.</p><p name="a5f1" id="a5f1" class="graf graf--p graf-after--p">And one where even the <a href="https://facebook.com" data-href="https://facebook.com" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">most ubiquitous parts of our web experience</a> still tells people who aren’t cis or western that this isn’t really made for them.</p><figure name="3849" id="3849" class="graf graf--figure graf-after--p">
<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*hI1JC5QeBM0VP-NLSkzsTw.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*hI1JC5QeBM0VP-NLSkzsTw.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*hI1JC5QeBM0VP-NLSkzsTw.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*hI1JC5QeBM0VP-NLSkzsTw.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*hI1JC5QeBM0VP-NLSkzsTw.jpeg"></noscript></div></div></figure><p name="0db0" id="0db0" class="graf graf--p graf-after--figure">We need to design an 880 web. A web where our indicators for success are 8 year olds and 80 year olds and women and queer people and Māori people and people of colour.</p><p name="5261" id="5261" class="graf graf--p graf-after--p">We need to start thinking about inclusivity the same way as we think about mobile design. We realised with mobile, that we have to put that experience at the centre of what we do, otherwise it won’t be successful and we’ll fail mobile users. We realised we have to design mobile-first.</p><figure name="8d50" id="8d50" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*kAUBRerwx5-frgAshKVigg.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*kAUBRerwx5-frgAshKVigg.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*kAUBRerwx5-frgAshKVigg.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*kAUBRerwx5-frgAshKVigg.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*kAUBRerwx5-frgAshKVigg.jpeg"></noscript></div></div></figure><p name="beef" id="beef" class="graf graf--p graf-after--figure">The same is true for inclusivity. Instead of it being an afterthought if it’s thought about at all, it needs to be our first thought. It needs to be central to our strategy, embedded in how we analyse and solve the problems we encounter. Designing inclusive-first is the only way we’ll manage to serve and protect all of the people who use what we build.</p><p name="7c66" id="7c66" class="graf graf--p graf-after--p">So, what does it mean to actually be inclusive in our design?</p><p name="7083" id="7083" class="graf graf--p graf-after--p">Inclusive design is more than just making sure your stock photos and illustrations include more than just straight white men. Although you should absolutely do that because representation and seeing yourself in the products you use matters, but you also need to make sure you’re addressing the deeper issues.</p><p name="c1af" id="c1af" class="graf graf--p graf-after--p">Inclusive-first design is design that:</p><ul class="postList"><li name="262f" id="262f" class="graf graf--li graf-after--p">Enables equivalent access for everyone</li><li name="50ef" id="50ef" class="graf graf--li graf-after--li">Enables equivalent experience for everyone</li><li name="defe" id="defe" class="graf graf--li graf-after--li">Is safe for everyone</li></ul><p name="f13f" id="f13f" class="graf graf--p graf-after--li">And it does it as a priority, not an after-thought.</p><figure name="93ba" id="93ba" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 295px;">
<div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*LGpImPD9aj37kgd_WdCU-Q.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*LGpImPD9aj37kgd_WdCU-Q.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*LGpImPD9aj37kgd_WdCU-Q.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*LGpImPD9aj37kgd_WdCU-Q.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*LGpImPD9aj37kgd_WdCU-Q.jpeg"></noscript></div></div></figure><p name="fd50" id="fd50" class="graf graf--p graf-after--figure">And it needs to be equivalent, not equal. You need to ensure that you’re providing everyone with the same outcomes, which means you need to understand the barriers they face.</p><p name="8f69" id="8f69" class="graf graf--p graf-after--p">I’m not going to go into the access part today, it’s vitally important, but the excellent Laura is covering that tomorrow. But it’s worth noting that access also includes performance. You can’t have equivalent access if your pages are so heavy it costs someone in the developing world or on a prepaid data plan in NZ far too much to access it.</p><p name="43f7" id="43f7" class="graf graf--p graf-after--p">But we’re going to look at some examples of the other two points. They tend to be more subtle and may not be things you notice because they don’t impact you personally.</p><p name="b235" id="b235" class="graf graf--p graf-after--p">An equivalent experience means that nobody who uses your product is made to feel less welcome or included, and where everyone who uses it has the same opportunity for success. This can cover everything from your form design to predictive algorithms based on biased datasets.</p><p name="f4e3" id="f4e3" class="graf graf--p graf-after--p">Safety for everyone means that your product or service doesn’t put people, and especially marginalised people, in a position of additional risk because of the way you handle their privacy and data. This means you need to think about people for whom information like location, name, gender, sexuality, marital status leaking could put them at serious risk.</p><p name="3874" id="3874" class="graf graf--p graf-after--p">A lot of the most important parts of this boil down to how we collect, use, and retain data about and for our customers.</p><h4 name="1563" id="1563" class="graf graf--h4 graf-after--p">Data Collection</h4><p name="8e0b" id="8e0b" class="graf graf--p graf-after--h4">When we collect data, especially data about identity, we have a tendency to simplify reality into something easy for a computer to understand. But identities are complex, and we often erase the reality of people’s lived experiences, making them feel unwelcome in the systems we create.</p><p name="74f1" id="74f1" class="graf graf--p graf-after--p">You might not think it’s a big deal. It’s just an abstraction, right? Surely they’ll understand? Well, micro-aggressions are small, often repeated instances of discrimination or harm, especially towards marginalized people.</p><p name="84cd" id="84cd" class="graf graf--p graf-after--p">You need to care about these in your designs because cumulatively, they take an emotional and cognitive toll on your marginalised customers. They impact the sense of belonging for people encountering your designs and can evoke past traumas.</p><p name="38c9" id="38c9" class="graf graf--p graf-after--p">2005 research from McDonald and Leary on social exclusion observed that</p><blockquote name="d788" id="d788" class="graf graf--blockquote graf--startsWithDoubleQuote graf-after--p">“When individuals are accepted, welcomed, or included it leads them to feel positive emotions such as happiness, elation, calm, and satisfaction. However, when individuals are rejected or excluded, they feel strong negative emotions such as anxiety, jealousy, depression, and grief, and even physical pain.</blockquote><p name="ab46" id="ab46" class="graf graf--p graf-after--blockquote"><em class="markup--em markup--p-em">MacDonald, G., &amp; Leary, M. R. (2005). Why does social exclusion hurt? The relationship between social and physical pain. Psychological Bulletin, 131, 202–223. doi:10.1037/0033–2909.131.2.202</em></p><p name="541c" id="541c" class="graf graf--p graf-after--p">Micro-aggressions are by their nature hard to spot if they don’t impact you personally. And they are everywhere in our designs, but it’s important to remember that just because it’s the norm doesn’t mean it’s right. We can apply critical analysis and do better.</p><p name="7d1c" id="7d1c" class="graf graf--p graf-after--p">So, let’s look at a couple of examples of data we routinely collect and routinely cause harm with: Name and gender.</p><h4 name="ac13" id="ac13" class="graf graf--h4 graf-after--p">Names</h4><p name="4b52" id="4b52" class="graf graf--p graf-after--h4">How hard can names really be, right? Well, we could ask Su Yin.</p><figure name="feb1" id="feb1" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37%;"></div><div class="progressiveMedia js-progressiveMedia"><img src="https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCsyItSFXYAAEbjo.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;width=40" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" data-src="/media/69058e0ebe725057a82132d47d0b48e5?postId=d28324b7c348" data-media-id="69058e0ebe725057a82132d47d0b48e5" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCsyItSFXYAAEbjo.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen frameborder="0"></IFRAME></div><noscript class="js-progressiveMedia-inner"><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" src="/media/69058e0ebe725057a82132d47d0b48e5?postId=d28324b7c348" data-media-id="69058e0ebe725057a82132d47d0b48e5" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCsyItSFXYAAEbjo.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></IFRAME></div></noscript></div></div></figure><figure name="a7ab" id="a7ab" class="graf graf--figure graf--iframe graf-after--figure"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37%;"></div><div class="progressiveMedia js-progressiveMedia"><img src="https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FBWFn1v9IAAEfEMC.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;width=40" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" data-src="/media/3ba7a91e0d1cf097b130d3e554d8585e?postId=d28324b7c348" data-media-id="3ba7a91e0d1cf097b130d3e554d8585e" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FBWFn1v9IAAEfEMC.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen frameborder="0"></IFRAME></div><noscript class="js-progressiveMedia-inner"><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" src="/media/3ba7a91e0d1cf097b130d3e554d8585e?postId=d28324b7c348" data-media-id="3ba7a91e0d1cf097b130d3e554d8585e" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FBWFn1v9IAAEfEMC.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></IFRAME></div></noscript></div></div></figure><figure name="641d" id="641d" class="graf graf--figure graf--iframe graf-after--figure"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37%;"></div><div class="progressiveMedia js-progressiveMedia"><img src="https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FBYQQUG_CIAAEYWf.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;width=40" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" data-src="/media/e3e9e09d7ee997a13bd0f8eccbbb2104?postId=d28324b7c348" data-media-id="e3e9e09d7ee997a13bd0f8eccbbb2104" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FBYQQUG_CIAAEYWf.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen frameborder="0"></IFRAME></div><noscript class="js-progressiveMedia-inner"><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" src="/media/e3e9e09d7ee997a13bd0f8eccbbb2104?postId=d28324b7c348" data-media-id="e3e9e09d7ee997a13bd0f8eccbbb2104" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FBYQQUG_CIAAEYWf.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></IFRAME></div></noscript></div></div></figure><figure name="1093" id="1093" class="graf graf--figure graf--iframe graf-after--figure"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37%;"></div><div class="progressiveMedia js-progressiveMedia"><img src="https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCMKZiMwUcAA0j83.png%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;width=40" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" data-src="/media/1fab4ccee6d51b4e11f5dd0e615d1ea1?postId=d28324b7c348" data-media-id="1fab4ccee6d51b4e11f5dd0e615d1ea1" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCMKZiMwUcAA0j83.png%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen frameborder="0"></IFRAME></div><noscript class="js-progressiveMedia-inner"><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" src="/media/1fab4ccee6d51b4e11f5dd0e615d1ea1?postId=d28324b7c348" data-media-id="1fab4ccee6d51b4e11f5dd0e615d1ea1" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCMKZiMwUcAA0j83.png%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></IFRAME></div></noscript></div></div></figure>
<p name="d1c5" id="d1c5" class="graf graf--p graf-after--figure">Our name is a cornerstone of our identity, so handling names with care and respect is super important. When someone’s name is not accepted or mishandled by our systems, it sends a message they aren’t welcome.</p><h4 name="2ecd" id="2ecd" class="graf graf--h4 graf-after--p">Decolonise name collection</h4><p name="2ce8" id="2ce8" class="graf graf--p graf-after--h4">We need to decolonise name collection. Much of the way we think about an approach names on the web is based on a western-centric view: that someone will have a one-word first name, maybe a middle name, and a surname.</p><figure name="a8fa" id="a8fa" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*p6Hk4O_Qh69RtcBpSO5Akg.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*p6Hk4O_Qh69RtcBpSO5Akg.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*p6Hk4O_Qh69RtcBpSO5Akg.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*p6Hk4O_Qh69RtcBpSO5Akg.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*p6Hk4O_Qh69RtcBpSO5Akg.jpeg"></noscript></div></div></figure><p name="fc4b" id="fc4b" class="graf graf--p graf-after--figure">That model doesn’t hold up when we want to include everyone. Like Su Yin, many people have two first names, and putting one into the middle name field isn’t going to cut it.</p><p name="211a" id="211a" class="graf graf--p graf-after--p">But it’s more than that. Mononyms, or single names, are common in parts of India, Indonesia, Tibet, Mongolia, Afghanistan, and Hollywood.</p><p name="4399" id="4399" class="graf graf--p graf-after--p">Building forms and database models this way means people either can’t sign up to your services, or have to kludge their name into your form fields, resulting in unexpected errors like Su Yin saw.</p><figure name="93ae" id="93ae" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*HwO8aC2n1jaF6XqxA0fepw.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*HwO8aC2n1jaF6XqxA0fepw.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*HwO8aC2n1jaF6XqxA0fepw.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*HwO8aC2n1jaF6XqxA0fepw.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*HwO8aC2n1jaF6XqxA0fepw.jpeg"></noscript></div></div></figure><p name="f23b" id="f23b" class="graf graf--p graf-after--figure">We also often make the assumption we can address people by whatever they put into the first name field. That’s based on Western name order. In Eastern name order, family name comes first, and whilst most people have become somewhat used to us forcing them into our patterns, it’s another example of colonisation. It also means we get mixed datasets where some people do it one way, and some do it the other way, which is a problem when we make assumptions about what we can do with the information we find in that field.</p><p name="e46c" id="e46c" class="graf graf--p graf-after--p">Not only that, in some cultures it is considered extremely impolite to address someone you don’t know by their given name.</p><p name="7770" id="7770" class="graf graf--p graf-after--p">So, what’s the alternative?</p><figure name="39fb" id="39fb" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*vXG5qUUp1GNHs5wa6eoENQ.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*vXG5qUUp1GNHs5wa6eoENQ.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*vXG5qUUp1GNHs5wa6eoENQ.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*vXG5qUUp1GNHs5wa6eoENQ.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*vXG5qUUp1GNHs5wa6eoENQ.jpeg"></noscript></div></div></figure><p name="a0f7" id="a0f7" class="graf graf--p graf-after--figure">Just put one field. One single, unbounded field. No length restrictions. No restriction to alpha. Unless you have a compelling reason like compliance or horrific legacy systems integrations, enough with the multiple name fields already.</p><p name="c9e2" id="c9e2" class="graf graf--p graf-after--p">Then, if you need to address them directly anywhere in your app whether that’s on screen or when you email them, ask them how you should address them.</p><p name="ce09" id="ce09" class="graf graf--p graf-after--p">But non-western folks aren’t the only people impacted by our poor name design decisions.</p><h4 name="0c9e" id="0c9e" class="graf graf--h4 graf-after--p">Think about non-binary people and women’s needs.</h4><p name="aca2" id="aca2" class="graf graf--p graf-after--h4">People who are non-binary or trans may have a name they were given at birth that is not the name they use, and it can cause great distress to have to provide that or be identified using that name. It’s called deadnaming, and it’s tremendously offensive because it denies the reality of their identity. This can contribute to gender dysphoria, depression, and anxiety, which is a very real and significant problem given trans people, especially trans youth, face far higher rates of mental illness and suicidality.</p><p name="7f1c" id="7f1c" class="graf graf--p graf-after--p">The Trans Pathways study released in 2017 in Australia showed young trans people are ten times more likely to experience serious depression and anxiety relative to other young Australians. They also found that one in every two gender-diverse young people they heard from has attempted to end their life. Again, you may think that your name field isn’t that big a deal. But that’s not how microaggressions work. This stuff is cumulative.</p><figure name="85bf" id="85bf" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*Gj9fdGw-Ht_tmOvvZwTJRg.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*Gj9fdGw-Ht_tmOvvZwTJRg.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*Gj9fdGw-Ht_tmOvvZwTJRg.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*Gj9fdGw-Ht_tmOvvZwTJRg.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*Gj9fdGw-Ht_tmOvvZwTJRg.jpeg"></noscript></div></div></figure><p name="a4d8" id="a4d8" class="graf graf--p graf-after--figure">So what does this mean for our name design? It means we need to be very, very careful when asking for a _legal_ name. We should only ask for a legal name if we have a legitimate reason to do so. Things like government sites, banking, airlines etc fall into this category. If we’re asking for a legal name, we should tell customers why we need this. If we don’t have a compelling reason that will benefit our customer, then we shouldn’t be collecting it.</p><p name="1274" id="1274" class="graf graf--p graf-after--p">We also need to ensure that it’s as painless as possible to update names we hold. If we didn’t verify someone’s photo ID when they started their account, we probably don’t need to view their name change documentation, for example. We also need to make sure that any updates are immediately promulgated to all other systems — cards, ticketing, invoicing, emails, support systems.</p><p name="d7b3" id="d7b3" class="graf graf--p graf-after--p">As an added benefit, you’ll make life a lot happier for the other large group of people who often change their name — people getting married.</p><p name="310e" id="310e" class="graf graf--p graf-after--p">Turns out collecting people’s names _is_ a bit harder than you think when you care about making sure everyone is included and you’re not causing harm. So, you could just not. If you don’t actually need someone’s name, consider just collecting a username. For anything other than legal or compliance requirements, a consistent pseudonymous identity will almost always suffice just as well.</p><h4 name="7a81" id="7a81" class="graf graf--h4 graf-after--p">Gender</h4><p name="b039" id="b039" class="graf graf--p graf-after--h4">And then there’s gender and sexuality. Like name, the way we collect and enforce our rigid ideas of gender and sexuality on people who use our sites is often hugely harmful to trans, non-binary, and queer people.</p><p name="253c" id="253c" class="graf graf--p graf-after--p">Almost everywhere, we enforce a cis-hetero-normative view of gender and sexuality.</p><figure name="2d79" id="2d79" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*X3v4iq59jJL8EaVhGqsN0w.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*X3v4iq59jJL8EaVhGqsN0w.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*X3v4iq59jJL8EaVhGqsN0w.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*X3v4iq59jJL8EaVhGqsN0w.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*X3v4iq59jJL8EaVhGqsN0w.jpeg"></noscript></div></div></figure><p name="ae87" id="ae87" class="graf graf--p graf-after--figure">In case you’re not up with the play, it’s widely acknowledged that gender is not a binary state or even a continuum. So, it’s not OK for us to design and collect data that reinforces the outdated notion that it is. This means no more forms that collect ‘female’ and ‘male’ which, by the way, aren’t genders anyway.</p><p name="227c" id="227c" class="graf graf--p graf-after--p">But Nat, I can hear you think, we need that information for marketing and reporting and feeding our sweet, sweet, machine learning algorithms.</p><p name="b815" id="b815" class="graf graf--p graf-after--p">Just say no. Aside from anything else, it’s plain lazy to fall back on the assumption that somebody’s gender tells you what you can sell to them. From technology to tampons, it is not a safe assumption that if someone ticks male or female, they want to know or care about a particular subset of products.</p><p name="d938" id="d938" class="graf graf--p graf-after--p">The best advice I can give you when it comes to collecting gender information is to not do it. Most of the time when you think you need it, you really don’t. But like anything else, there are some exceptions.</p><figure name="935f" id="935f" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*YgexGIWxOLp3tuBDpycJLg.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*YgexGIWxOLp3tuBDpycJLg.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*YgexGIWxOLp3tuBDpycJLg.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*YgexGIWxOLp3tuBDpycJLg.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*YgexGIWxOLp3tuBDpycJLg.jpeg"></noscript></div></div></figure><p name="8a5c" id="8a5c" class="graf graf--p graf-after--figure">If you’re designing a product where it’s important for your customers to be able to share and communicate their identity, then use a freeform field and let them define it however they want. This also applies to surveys you might conduct to establish the demographics of your customers, with one huge difference — if you need demographics on your customers, conduct a survey, but don’t keep the individual results. You don’t need to retain this data, and storing it creates additional risk.</p>
<figure name="3dab" id="3dab" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*rA_qsJcgSmW6G-co6X0y3g.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*rA_qsJcgSmW6G-co6X0y3g.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*rA_qsJcgSmW6G-co6X0y3g.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*rA_qsJcgSmW6G-co6X0y3g.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*rA_qsJcgSmW6G-co6X0y3g.jpeg"></noscript></div></div></figure><p name="7059" id="7059" class="graf graf--p graf-after--figure">There are some products and services where you may legitimately need to ask a more restrictive question. If you’re designing a medical product, for example, you may legitimately need to know someone’s sex assigned at birth and their actual gender. A great example of this is passports, where their interest is making sure they’ve correctly identified a person entering the country. So, passports in NZ have an ‘X’ determination of gender which indicates to border control that the passport holder’s gender presentation may be unconventional.</p><p name="c395" id="c395" class="graf graf--p graf-after--p">If your product or service is like this, communicate <em class="markup--em markup--p-em">why</em> you need this information and what you’re planning to use it for. This means you need to understand why as well.</p><p name="9589" id="9589" class="graf graf--p graf-after--p">Queer people will understand if you have system limitations. We’re used to it. But don’t present it as the default with no explanation. If you feel bad or stupid saying you can only collect gender as man and woman because of your system limitations, then consider sitting with that discomfort and maybe trying to fix the system instead. Consider providing an additional non-mandatory text field for people to provide their actual gender to you also.</p><h4 name="4924" id="4924" class="graf graf--h4 graf-after--p">What we collect, and what we do with it.</h4><p name="a0ac" id="a0ac" class="graf graf--p graf-after--h4">So, collecting personal data is fraught with peril. Turns out trying to encode the complexity of humanity into something computers can understand is non-trivial. But there’s a deeper question about data collection when it comes to inclusive-first design, and that’s about how we use, retain, and share data about the people we serve.</p><p name="ae94" id="ae94" class="graf graf--p graf-after--p">At the moment, our industry treats personal data something like this.</p><figure name="6d42" id="6d42" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.7%;"></div><div class="progressiveMedia js-progressiveMedia"><img src="https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FYZGJc1WmUZPi0%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;width=40" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><div class="iframeContainer"><IFRAME data-width="435" data-height="290" width="435" height="290" data-src="/media/addf83cf4a80c45773576aeffbabfb33?postId=d28324b7c348" data-media-id="addf83cf4a80c45773576aeffbabfb33" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FYZGJc1WmUZPi0%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen frameborder="0"></IFRAME></div><noscript class="js-progressiveMedia-inner"><div class="iframeContainer"><IFRAME data-width="435" data-height="290" width="435" height="290" src="/media/addf83cf4a80c45773576aeffbabfb33?postId=d28324b7c348" data-media-id="addf83cf4a80c45773576aeffbabfb33" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FYZGJc1WmUZPi0%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></IFRAME></div></noscript></div></div></figure><p name="f6d1" id="f6d1" class="graf graf--p graf-after--figure">We tend to collect as much as we can, and just store it away in case we need it later. Often it’s not data we actually need. But we collect it anyway, because data has become currency in our industry.</p><p name="c692" id="c692" class="graf graf--p graf-after--p">We’ve tended to be a bit cavalier about the risks this approach is creating. We’ve aggregated it and shared or on-sold it. We’ve used it to create predictive algorithms. And we’ve pretended we can store it, or anything else, securely.</p><figure name="db76" id="db76" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*gSMwOs6XOgOeKXZvyGemgg.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*gSMwOs6XOgOeKXZvyGemgg.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*gSMwOs6XOgOeKXZvyGemgg.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*gSMwOs6XOgOeKXZvyGemgg.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*gSMwOs6XOgOeKXZvyGemgg.jpeg"></noscript></div></div></figure><p name="73f6" id="73f6" class="graf graf--p graf-after--figure">That approach has enabled us to profit handsomely, but of course, it’s also put our customers, and particularly our marginalised customers, at greater risk.</p><p name="31d5" id="31d5" class="graf graf--p graf-after--p">Storing name and gender data, especially historical data or ‘real name’ data, about trans people can put them at huge risk if that data leaks. Storing identifying information for activists working under pseudonyms can put their safety at risk if that leaks. Storing information that can point to the location of people who escaped from or are experiencing domestic violence can put their safety at risk if it leaks. You cannot design an inclusive-first system if you’re not thinking about the threat models of your most vulnerable users.</p><p name="b55a" id="b55a" class="graf graf--p graf-after--p">The baseline is that <strong class="markup--strong markup--p-strong">if you have this stuff in your database and you leak it and someone gets hurt, the cops are going come talk to you</strong>. So, don’t store anything you’re not 100% willing to go to jail for breaching. Make friends with your security team. Talk to them and understand the risks you’re taking.</p><p name="3b3d" id="3b3d" class="graf graf--p graf-after--p">But it gets worse. It’s not just about stuff that obviously identifies them. Our quaint notions of personally identifiable information and safe aggregation of data are almost irrelevant in a world where machine learning means seemingly innocuous data points can be used to identify and locate individuals, and where deaggregation of aggregate data is increasingly possible.</p><p name="7865" id="7865" class="graf graf--p graf-after--p">The time of reckoning for our approach to data collection and management is coming.</p><figure name="b511" id="b511" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 77.9%;"></div><div class="progressiveMedia js-progressiveMedia"><img src="https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FpwyW4XDmtqjG8%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;width=40" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas>
<div class="iframeContainer"><IFRAME data-width="435" data-height="339" width="435" height="339" data-src="/media/f5553eb35f15b8dc27f8b6521c301f82?postId=d28324b7c348" data-media-id="f5553eb35f15b8dc27f8b6521c301f82" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FpwyW4XDmtqjG8%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen frameborder="0"></IFRAME></div><noscript class="js-progressiveMedia-inner"><div class="iframeContainer"><IFRAME data-width="435" data-height="339" width="435" height="339" src="/media/f5553eb35f15b8dc27f8b6521c301f82?postId=d28324b7c348" data-media-id="f5553eb35f15b8dc27f8b6521c301f82" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FpwyW4XDmtqjG8%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></IFRAME></div></noscript></div></div></figure><p name="0ad6" id="0ad6" class="graf graf--p graf-after--figure">It’s entirely likely that at some point soon, we’re going to see legislation around this, but if you care about inclusivity and your customers, I’d like to encourage you to take a different approach right now.</p><ol class="postList"><li name="ad77" id="ad77" class="graf graf--li graf-after--p">Only collect data you immediately need to provide a direct benefit to your customer.</li><li name="5f7f" id="5f7f" class="graf graf--li graf-after--li">Only store that data as long as you need it to provide those benefits</li><li name="42a4" id="42a4" class="graf graf--li graf-after--li">Stop publicly releasing or selling aggregate data. It’s not safe. You don’t know what other data it can be combined with and what that will uncover.</li><li name="f80b" id="f80b" class="graf graf--li graf-after--li">Stop pretending that doing any of this is OK because of a line in your terms and conditions. What we are doing has the potential to harm people. Just ask Strava.</li></ol><h4 name="ea3a" id="ea3a" class="graf graf--h4 graf-after--li">But y tho?</h4><p name="2065" id="2065" class="graf graf--p graf-after--h4">You might be asking yourselves why we’re the ones who have to care about this. After all, everyone else is treating their customers poorly, so why should we be different.</p><p name="dfc3" id="dfc3" class="graf graf--p graf-after--p">It’s a matter of scale. Like Penalosa’s urgency for good urban design in cities, we need to care because our work has reach. The work we do is part of every industry on the planet. We are defining or redefining the interaction models for every part of society, and we’re doing it at a scale we’ve never experienced before. Changes we make can affect millions of people in seconds without their knowledge or consent. Decisions we make can reinforce existing power structures and biases, or they can break them down.</p><p name="539c" id="539c" class="graf graf--p graf-after--p">That puts us in a position of a lot of responsibility, responsibility you may not have thought you were signing up for if you were just someone who liked playing with computers a lot.</p><p name="f6a1" id="f6a1" class="graf graf--p graf-after--p">But it’s also an opportunity for us to choose what kind of people we want to be and what kind of industry we want to be. Do we really want to turn a blind eye to the harm we cause people? Or are we better than that? MLK said that the arc of the moral universe is long and bends towards justice, but it only does so if people are actually doing the work to make it that way.</p><p name="12f4" id="12f4" class="graf graf--p graf-after--p">We’re in the perfect position to do something. We can choose to stop perpetuating systemic inequalities in the products we build. We can choose to build inclusive-first and create that better, kinder 880 web for the rest of the world, and in doing so, focus on the privacy and ethics that are so key to delivering on that promise.</p><p name="7e85" id="7e85" class="graf graf--p graf-after--p">The bad news for you is that there is no quick-fix way for us personally to be able to see all the ways our designs are excluding marginalised people. That doesn’t excuse us from learning — we can read and listen to the things that marginalised people say about their experiences and make sure we interview them as part of our research and testing, but we’ll never naturally spot the risks and issues the same way as someone who has experienced them will. Call it the byproduct of millenia of evolution making us pretty great at protecting our own skins.</p><p name="2a93" id="2a93" class="graf graf--p graf-after--p">Fortunately, we don’t build software in isolation, so what we can do is hire people into our team who have difference experiences to us who are going to be good at spotting the things that impact people who share experiences with them.</p><p name="6a9b" id="6a9b" class="graf graf--p graf-after--p">But hiring them isn’t enough, because when we hire someone into our teams who is going to point out things no-one else sees, it turns out it can be pretty awful for them if the rest of the team don’t want to listen because it doesn’t align with their life experiences. We need to be aware that it’s not their job to teach our teams about diversity and marginalised identities. Their job is to be a designer or developer or QA person or product manager, not a diversity consultant. So when they raise things our teams don’t understand, we need to listen, believe them, and do our own research into why.</p><p name="6c48" id="6c48" class="graf graf--p graf-after--p">The truth is that real work, the real design, is about sacrifice, not glory. This stuff is hard, but it’s the tiny every day things you do in your job to prioritise the needs of marginalized people that make a difference. It’s when you support your coworker when they tell you something is unsafe or that the language isn’t quite right or that you’re leaving people out with your design or engineering decisions. It’s when you advocate for those positions yourself to people in power within your organisation, leveraging your social capital so they don’t have to. It’s when you band together and refuse to implement something unethical because even though it won’t impact you, it will impact other people.</p><p name="5619" id="5619" class="graf graf--p graf-after--p">You’re might be hoping that I’m I’ll to give you a business case that you can take back to work with you to convince your bosses why they should let you do this work. And you could make a business case for this work, like you can make ones for accessibility and diversity in tech in general. That business case would probably centre around increasing your customer base and reducing your risk to your reputation or that someone might sue you for discrimination.</p><figure name="cdbe" id="cdbe" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*GsoZXqz88B81zbW4XukAuw.jpeg" data-width="1920" data-height="1080" data-action="zoom" data-action-value="1*GsoZXqz88B81zbW4XukAuw.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*GsoZXqz88B81zbW4XukAuw.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*GsoZXqz88B81zbW4XukAuw.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*GsoZXqz88B81zbW4XukAuw.jpeg"></noscript></div></div></figure><p name="5297" id="5297" class="graf graf--p graf-after--figure">Fuck your business case, with its perverse incentives and profit-at-all-costs vc investment-driven rush to exploit users. Our business models are broken and we focus on the wrong things.</p><p name="d088" id="d088" class="graf graf--p graf-after--p">So yeah, I’m not going to give you one, because honestly it makes me feel a little bit sick to even say those words — a business case for inclusion. We have to change our entire business models because we shouldn’t need a business case to do the right thing. To be ethical. To use our positions and privilege and power to do the right thing and build a more equitable world. Those shouldn’t be optional things. Those should be required things.</p><p name="e762" id="e762" class="graf graf--p graf-after--p">I believe we are better than this. Let’s prove it.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/@natdudley/be-kind-design-d28324b7c348">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>