davidbgk
/
larlet-fr-david-cache
Наблюдаван 1
Харесван 0
Разклонения 0
Код Версии 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 Ревизии
1 Клон
ИН на ревизия: 65a51d1b3d
Клонове Маркери
${ item.name }
Create branch ${ searchTerm }
от '65a51d1b3d'
${ noResults }
larlet-fr-david-cache/cache/3ecaa08e8a128885840fe94ed86.../index.html

index.html 43KB
Директен файл Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>The Road to Mediocrity Is Paved with Best Practices (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://austinknight.com/writing/the-road-to-mediocrity-is-paved-with-best-practices/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   The Road to Mediocrity Is Paved with Best Practices (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://austinknight.com/writing/the-road-to-mediocrity-is-paved-with-best-practices/">Source originale du contenu</a></h3>

  463.     <article id="post-6864" class="regular post-6864 post type-post status-publish format-standard has-post-thumbnail hentry category-general">

  464. 

  465.     <div class="inner-wrap animated">

  466. 

  467.         <div class="post-content">

  468. 

  469. 

  470. 

  471.             <div class="content-inner">

  472. 

  473. 

  474. 

  475. 

  476. 

  477.     <div id="fws_571229762c8c2" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section   "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div> </div><div class="col span_12 dark left">

  478.     <div style="" class="vc_col-sm-12 wpb_column column_container col padding-5-percent" data-using-bg="true" data-bg-cover="" data-padding-pos="all" data-has-bg-color="true" data-bg-color="#eeeeee" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  479.             <div class="wpb_wrapper">

  480. 

  481.     <div class="wpb_text_column wpb_content_element  vc_custom_1458793706446">

  482.         <div class="wpb_wrapper">

  483.             <p><strong>Summary:</strong> Best practices, while useful in some respects, are generally “one size fits all” solutions that do not account for the context of unique audiences, products, and businesses. This kills innovation and propels businesses toward a state of mediocrity. To encourage true organic solutions that generate measurable results, businesses should break away from best practices by questioning the status quo and running quantitative tests, talking to users and running qualitative tests, developing multidisciplinary teams, and promoting a culture that embraces risk.</p>

  484. 

  485.         </div>

  486.     </div>

  487. 

  488.             </div>

  489.     </div>

  490. </div></div>

  491.     <div id="fws_571229762e82e" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section   "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div> </div><div class="col span_12 dark left">

  492.     <div  class="vc_col-sm-12 wpb_column column_container col no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  493.             <div class="wpb_wrapper">

  494. 

  495.     <div class="wpb_text_column wpb_content_element ">

  496.         <div class="wpb_wrapper">

  497.             <p>We&#8217;ve all encountered &#8220;best practices&#8221; at one time or another. Be it through a list-style blog post of prescribed industry-standard advice, a how-to speech given to thousands of attendees at conferences across the world, an unsolicited redesign of a popular site, or my personal favorite, a live landing page critique with a panel of industry experts. And yet, while we sit there scribbling down all of this advice, eager to take it back to the workplace, do we ever stop to think about the validity of the advice that we&#8217;re being given in the first place?</p>

  498. 

  499.         </div>

  500.     </div>

  501. 

  502.             </div>

  503.     </div>

  504. </div></div>

  505.     <div id="fws_571229763076c" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section   "  style="padding-top: 30px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div> </div><div class="col span_12 dark left">

  506.     <div  class="vc_col-sm-12 wpb_column column_container col no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  507.             <div class="wpb_wrapper">

  508. 

  509.     <div class="wpb_gallery wpb_content_element clearfix">

  510.         <div class="wpb_wrapper"><div class="wpb_gallery_slidesimage_grid" data-interval="5">

  511. 

  512.     <div class="portfolio-wrap ">

  513. 

  514.             <span class="portfolio-loading"></span>

  515. 

  516.             <div id="portfolio" class="row portfolio-items no-masonry " data-starting-filter="" data-categories-to-show="" data-col-num="cols-3">

  517. 

  518. 

  519. 

  520. 

  521.     <div class="col span_4 element" data-project-cat="" data-default-color="true" data-title-color="" data-subtitle-color="">

  522. 

  523. 

  524. 

  525. 

  526.                             <div class="work-item">

  527. 

  528.                                 <img class="" src="https://austinknight.com/wp-content/uploads/2015/09/3.png" width="503" height="396" alt="3" title="3" />

  529.                                 <div class="work-info-bg"></div>

  530.                                 <div class="work-info">

  531. 

  532.                                     <div class="vert-center"><a href="https://austinknight.com/wp-content/uploads/2015/09/3.png" rel="prettyPhoto[rel-503442712]" class="default-link">View Larger</a>

  533.                                     </div><!--/vert-center-->

  534.                                 </div>

  535.                             </div><!--work-item-->

  536. 

  537. 

  538.                         </div>

  539.     <div class="col span_4 element" data-project-cat="" data-default-color="true" data-title-color="" data-subtitle-color="">

  540. 

  541. 

  542. 

  543. 

  544.                             <div class="work-item">

  545. 

  546.                                 <img class="" src="https://austinknight.com/wp-content/uploads/2015/09/2.png" width="503" height="396" alt="2" title="2" />

  547.                                 <div class="work-info-bg"></div>

  548.                                 <div class="work-info">

  549. 

  550.                                     <div class="vert-center"><a href="https://austinknight.com/wp-content/uploads/2015/09/2.png" rel="prettyPhoto[rel-503442712]" class="default-link">View Larger</a>

  551.                                     </div><!--/vert-center-->

  552.                                 </div>

  553.                             </div><!--work-item-->

  554. 

  555. 

  556.                         </div>

  557.     <div class="col span_4 element" data-project-cat="" data-default-color="true" data-title-color="" data-subtitle-color="">

  558. 

  559. 

  560. 

  561. 

  562.                             <div class="work-item">

  563. 

  564.                                 <img class="" src="https://austinknight.com/wp-content/uploads/2015/09/1.png" width="503" height="396" alt="1" title="1" />

  565.                                 <div class="work-info-bg"></div>

  566.                                 <div class="work-info">

  567. 

  568.                                     <div class="vert-center"><a href="https://austinknight.com/wp-content/uploads/2015/09/1.png" rel="prettyPhoto[rel-503442712]" class="default-link">View Larger</a>

  569.                                     </div><!--/vert-center-->

  570.                                 </div>

  571.                             </div><!--work-item-->

  572. 

  573. 

  574.                         </div></div></div></div>

  575.         </div>

  576.     </div>

  577.             </div>

  578.     </div>

  579. </div></div>

  580.     <div id="fws_57122976374bc" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section   "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div> </div><div class="col span_12 dark left">

  581.     <div  class="vc_col-sm-12 wpb_column column_container col no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  582.             <div class="wpb_wrapper">

  583. 

  584.     <div class="wpb_text_column wpb_content_element ">

  585.         <div class="wpb_wrapper">

  586.             <p>One of the more abstract and fascinating manifestations of best practices can be found in what I like to call <em>consultant instruction loops</em>. This is essentially where consultants will repackage and resell old advice or flip-flop on conflicting recommendations, where one month they&#8217;ll have you doing X, the next month they&#8217;ll have you abandon X and do Y, and the next month again, they&#8217;ll have you abandon Y and go back to X. And so the cycle repeats itself. The consultant cashes their check while you run your business around in circles like a dog chasing it&#8217;s tail. Best practices are not too dissimilar from this. They perpetuate conflicting &#8220;one size fits all&#8221; advice that is rarely rooted in any actual insight (much less insight that is relevant to your product) and propel businesses toward states of mediocrity.</p>

  587. <p>Of course, there are times where what I&#8217;ve just said simply won&#8217;t hold true. There are indeed very legitimate, talented, and respectable consultants that would never use <em>consultant instruction loops</em> &#8211; and there is no shortage of them. In the same way, there are times when following a best practice is actually the ideal course of action. I myself have benefitted from following best practices many times and I&#8217;ve even written about best practices for my readers to follow. In fact, one could argue that what I&#8217;m about to give you in this article is essentially a list of best practices for eliminating best practices. The most meta article I&#8217;ve ever written. So I fully recognize the exceptions and potential implied hypocrisy. That said, I still take a very large issue with best practices. And I think you should too.</p>

  588. <h2>Why Best Practices are a Bad Practice</h2>

  589. <p>Best practices exist in absence of the context given for your unique audience, product, and business. The data that supports them is not contextual, meaning that best practices are essentially &#8220;one size fits all&#8221; guesses that try to solve common business problems. The issue with this is that what may have worked great for a business in a different category or even a direct competitor may not work well for your business. It may not resonate with your audience, it may not integrate well with your product, and it may not adequately solve your business goals. Yet we still adopt best practices without much hesitation. Is that really how we should be approaching these matters?</p>

  590. 

  591.         </div>

  592.     </div>

  593. 

  594.             </div>

  595.     </div>

  596. </div></div>

  597.     <div id="fws_57122976393ff" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section   "  style="padding-top: 30px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div> </div><div class="col span_12 dark left">

  598.     <div  class="vc_col-sm-6 wpb_column column_container col centered-text no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  599.             <div class="wpb_wrapper">

  600.                 <a href="https://austinknight.com/wp-content/uploads/2015/09/BOGO.jpg" class="pp center"><img class="img-with-animation ak-border" data-delay="0" height="100%" width="100%" data-animation="fade-in" src="https://austinknight.com/wp-content/uploads/2015/09/BOGO.jpg" alt="" /></a>

  601.     <div class="wpb_text_column wpb_content_element  vc_custom_1458794983856">

  602.         <div class="wpb_wrapper">

  603.             <p style="text-align: center;"><em>What may work well for one business&#8230;</em></p>

  604. 

  605.         </div>

  606.     </div>

  607. 

  608.             </div>

  609.     </div>

  610. 

  611.     <div  class="vc_col-sm-6 wpb_column column_container col no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  612.             <div class="wpb_wrapper">

  613.                 <a href="https://austinknight.com/wp-content/uploads/2015/09/Cemetary2.jpg" class="pp center"><img class="img-with-animation ak-border" data-delay="0" height="100%" width="100%" data-animation="fade-in" src="https://austinknight.com/wp-content/uploads/2015/09/Cemetary2.jpg" alt="" /></a>

  614.     <div class="wpb_text_column wpb_content_element  vc_custom_1458794991214">

  615.         <div class="wpb_wrapper">

  616.             <p style="text-align: center;"><em>&#8230;may not necessarily be ideal for another</em></p>

  617. 

  618.         </div>

  619.     </div>

  620. 

  621.             </div>

  622.     </div>

  623. </div></div>

  624.     <div id="fws_571229763c2b4" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section   "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div> </div><div class="col span_12 dark left">

  625.     <div  class="vc_col-sm-12 wpb_column column_container col no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  626.             <div class="wpb_wrapper">

  627. 

  628.     <div class="wpb_text_column wpb_content_element ">

  629.         <div class="wpb_wrapper">

  630.             <p>One of the best things about best practices is that they&#8217;re universally accessible and applicable. They&#8217;re commonly available to the public online and can be immediately applied in the workplace. This is also arguably one of the worst things about them. Because best practices are available everywhere and don&#8217;t require much effort to implement, they&#8217;re also being used by everyone. This can make it very difficult for businesses that closely follow best practices to innovate and differentiate themselves from the crowd. With a little extra effort and creativity, any organization can break away from best practices, become an innovator in it&#8217;s space, and generate true measurable returns. All while their competition chats about the next Hamburger Menu or viral social media trick, only to come up with nothing meaningful. We should all strive to kill best practices.</p>

  631. <h2>How to Combat Best Practices</h2>

  632. <p>Being the person that disagrees with and refutes best practices won&#8217;t always make you popular. At least, that is for the first few months that you take on the &#8220;anti-best practices&#8221; role. But with the proper approach, you&#8217;ll eventually be able to demonstrate the imperative for organic innovation within your company and truly put the &#8220;best practices hype&#8221; to it&#8217;s final rest.</p>

  633. <h3>Don&#8217;t Buy the Bullshit</h3>

  634. <p>&#8220;But Apple did it&#8230;&#8221; is not a proper justification for your design decision. Indeed, it can be very tempting to take the easy route and copy a design influencer or even your competitor. Be careful about that. Organizations that truly innovate are the ones that are constantly questioning and challenging the status quo. Just because something appears to have worked for someone else or has always been done a certain way doesn&#8217;t mean that it&#8217;s the best solution for your company.</p>

  635. 

  636.         </div>

  637.     </div>

  638. 

  639.             </div>

  640.     </div>

  641. </div></div>

  642.     <div id="fws_571229763e233" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section   "  style="padding-top: 30px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div> </div><div class="col span_12 dark left">

  643.     <div  class="vc_col-sm-12 wpb_column column_container col centered-text no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  644.             <div class="wpb_wrapper">

  645.                 <a href="https://austinknight.com/wp-content/uploads/2015/12/Competitors.jpg" class="pp center"><img class="img-with-animation ak-border" data-delay="0" height="100%" width="100%" data-animation="fade-in" src="https://austinknight.com/wp-content/uploads/2015/12/Competitors.jpg" alt="" /></a>

  646.     <div class="wpb_text_column wpb_content_element  vc_custom_1458795166550">

  647.         <div class="wpb_wrapper">

  648.             <p style="text-align: center;"><em>Is this just a bizarre coincidence or did one of these direct competitors actually copy the other’s text-based design?</em></p>

  649. 

  650.         </div>

  651.     </div>

  652. 

  653.             </div>

  654.     </div>

  655. </div></div>

  656.     <div id="fws_57122976410d4" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section   "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div> </div><div class="col span_12 dark left">

  657.     <div  class="vc_col-sm-12 wpb_column column_container col no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  658.             <div class="wpb_wrapper">

  659. 

  660.     <div class="wpb_text_column wpb_content_element ">

  661.         <div class="wpb_wrapper">

  662.             <p>I found this out the hard way when I consulted for an eCommerce client that was redesigning their checkout flow. The design that they had was completely outdated; it looked like something from the Windows &#8217;95 era. So, naturally, the designers wanted to bring it into the 21st century and apply Bootstrap styling to everything. Their competition had recently redesigned their checkout flow, so the client took massive inspiration from that and created a new checkout that they were finally proud of. They brought me in to do some final checking on the design, help bring it live, and measure performance afterward.</p>

  663. <p>When I got a first look at the new design, I liked it, but I suggested to the team that we test it against the old design before launching it to the full audience. Unsurprisingly, they didn&#8217;t like this idea. It was a shock to them that I had suggested it in the first place. Anyone could see that the new design was clearly superior. But we tested it anyway&#8230;and the new design lost. Over time, we were able to iterate on the design and bring it to a point where it was performing better than the original. But that&#8217;s not the point here. The point is that our assumptions were wrong. Just because the design was newer, better looking, full of best practices, and a replica of a competitor&#8217;s design didn&#8217;t mean that it would work for our company. We needed to extrapolate a solution that was unique to our audience, product, and business.</p>

  664. <h3>Talk to Your Users</h3>

  665. <p>Good designs don&#8217;t occur in a vacuum. Or in a boardroom. Or in a best practices post. Good designs have to be cultivated organically. In order to do that, you need to branch out and talk to the individuals that will be using your product. Observe their actions, note their pain points, and identify areas of opportunity. Use this information to extrapolate the optimal solution.</p>

  666. <p>I was recently mentoring a couple startup founders that had put together a new software concept for digitizing certain legal paperwork. As they started to interview potential users and present them with early prototypes, they were able to identify 3 personas for their product. The founders themselves actually fit one of those personas almost perfectly; they were able to conceive the product because they themselves would have benefitted from it. Unsurprisingly, they were also optimizing almost exclusively for their persona because it was the one that they identified with the most. At the same time, however, the other two personas had different sets of pain points and use cases for the product. By focusing on their single persona, they were excluding two thirds of their audience. They needed to remove themselves from the product and gather insight from their full audience (all 3 personas).</p>

  667. <h3>Talk to Your Janitor</h3>

  668. <p>Good ideas originate from everywhere. Richard Montañez, Executive Vice President at PepsiCo, was a janitor when he revolutionized the Frito-Lay company and invented their highest selling product, Flamin&#8217; Hot Cheetos. There was nothing in his job description to indicate that it was his responsibility to create a product, manufacture it, market it, and sell it. But he took on that role anyway.</p>

  669. <p>This happens regularly in multidisciplinary teams. Developers will provide input on design, Designers will provide input on code, Salespeople will provide input on marketing, etc. For this reason, it&#8217;s important to ensure that you&#8217;re working with people that are outside of your job role. Designers should work with Developers, Marketers should work with Salespeople, and so on. When someone has little to no idea of what the industry standard is, they&#8217;ll help steer you away from it by introducing their own view of the problem that has nothing to do with <em>how things are always done</em> and everything to do with <em>the best solution for this unique problem</em>.</p>

  670. <h3>Be the First Penguin</h3>

  671. <p>Matt Rheault, one of my co-hosts on the <a href="http://austinknight.dreamhosters.com/podcast/">UX and Growth</a> podcast, <a href="https://soundcloud.com/ux-and-growth/importance-of-education-other-ux-myths" target="_blank">recently discussed</a> the concept of Randy Pausch’s &#8220;First Penguin Award&#8221; and how it can be used to promote a culture that embraces risk. Pausch, a former professor at Carnegie Mellon, developed the First Penguin Award to reward students who took great risks in pursuing their goals, even though they were met with failure. The title of the award comes from the notion that when penguins are about to jump into water that might contain predators, well, somebody’s got to be the first to jump. The First Penguin award is, in essence, a celebration of risk taking.</p>

  672. 

  673.         </div>

  674.     </div>

  675. 

  676.             </div>

  677.     </div>

  678. </div></div>

  679.     <div id="fws_5712297643014" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section   "  style="padding-top: 30px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div> </div><div class="col span_12 dark left">

  680.     <div  class="vc_col-sm-6 wpb_column column_container col centered-text no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  681.             <div class="wpb_wrapper">

  682.                 <a href="https://austinknight.com/wp-content/uploads/2015/12/First-Penguin.jpg" class="pp center"><img class="img-with-animation ak-border" data-delay="0" height="100%" width="100%" data-animation="fade-in" src="https://austinknight.com/wp-content/uploads/2015/12/First-Penguin.jpg" alt="" /></a>

  683.     <div class="wpb_text_column wpb_content_element  vc_custom_1458851626082">

  684.         <div class="wpb_wrapper">

  685.             <p style="text-align: center;"><em>Be the first penguin&#8230;</em></p>

  686. 

  687.         </div>

  688.     </div>

  689. 

  690.             </div>

  691.     </div>

  692. 

  693.     <div  class="vc_col-sm-6 wpb_column column_container col no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  694.             <div class="wpb_wrapper">

  695.                 <a href="https://austinknight.com/wp-content/uploads/2015/12/First-Penguin2.jpg" class="pp center"><img class="img-with-animation ak-border" data-delay="0" height="100%" width="100%" data-animation="fade-in" src="https://austinknight.com/wp-content/uploads/2015/12/First-Penguin2.jpg" alt="" /></a>

  696.     <div class="wpb_text_column wpb_content_element  vc_custom_1458851634385">

  697.         <div class="wpb_wrapper">

  698.             <p style="text-align: center;"><em>…even if it doesn’t always pan out</em></p>

  699. 

  700.         </div>

  701.     </div>

  702. 

  703.             </div>

  704.     </div>

  705. </div></div>

  706.     <div id="fws_5712297645efe" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section   "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div> </div><div class="col span_12 dark left">

  707.     <div  class="vc_col-sm-12 wpb_column column_container col no-extra-padding"  data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">

  708.             <div class="wpb_wrapper">

  709. 

  710.     <div class="wpb_text_column wpb_content_element ">

  711.         <div class="wpb_wrapper">

  712.             <p>It is no surprise that companies like Google are adopting First Penguin Awards in the workplace. While not every risk-taking project pans out well, a few that did in the past were responsible for bringing us products like Gmail and AdSense. Rather than focus on sure bets and small wins that force us to resort to best practices, we should embrace risk as a measure of opportunity. While risk may discourage us from taking bold leaps, it should also encourage us to harness opportunities.</p>

  713. <h2>Know When to Use Them</h2>

  714. <p>While best practices generally aren&#8217;t the most optimal solutions, there are times when it makes sense to use them. Certain industry standards and procedures exist for good reasons; they&#8217;ve been tested and proven time and time again. Others are simply fads or one-time wins that could never be replicated again, but make for great clickbait headlines. The key is to understand how to separate the former from the latter. By adopting the methodology that I presented above, I would argue that you can do exactly that.</p>

  715. <p>Start by questioning the status quo and running quantitative tests to verify the design changes that you&#8217;re making, regardless of whether or not they&#8217;ve worked for a competitor. Ensure that you&#8217;re talking to users and running qualitative tests that provide insightful feedback, rather than allowing internal stakeholders to dictate the product direction based on opinion or anecdotal experience. When building your team, thrive to hire multidisciplinary individuals from varying backgrounds and pair them with each other so that they can challenge common ideas. Finally, promote a culture that embraces risk and encourages big, new ideas. If you do all of this and still arrive at the conclusion that a best practice is indeed the optimal solution, then it probably is. But you may also discover an entirely new solution that otherwise would have never seen the light of day. Therein lies the true best practice.</p>

  716. 

  717.         </div>

  718.     </div>

  719. 

  720.             </div>

  721.     </div>

  722. </div></div>

  723. 

  724. 

  725.             </div><!--/content-inner-->

  726. 

  727.         </div><!--/post-content-->

  728. 

  729.     </div><!--/inner-wrap-->

  730. 

  731. </article>

  732. 

  733. <!--/article-->

  734.   </article>

  735. </section>

  736. 

  737. 

  738. <nav id="jumpto">

  739.   <p>

  740.     <a href="/david/blog/">Accueil du blog</a> |

  741.     <a href="https://austinknight.com/writing/the-road-to-mediocrity-is-paved-with-best-practices/">Source originale</a> |

  742.     <a href="/david/stream/2019/">Accueil du flux</a>

  743.   </p>

  744. </nav>

  745. 

  746. <footer>

  747.   <div>

  748.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  749.     <p>

  750.       Bonjour/Hi!

  751.       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>

  752.       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>).

  753.     </p>

  754.     <p>

  755.       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>.

  756.     </p>

  757.     

  758.     <p>

  759.       Voici quelques articles choisis :

  760.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  761.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  762.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  763.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  764.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  765.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  766.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  767.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  768.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  769.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  770.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  771.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  772.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  773.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  774.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  775.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  776.     </p>

  777.     <p>

  778.       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>.

  779.     </p>

  780.     <p>

  781.       Je ne traque pas ta navigation mais mon

  782.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  783.       conserve des logs d’accès.

  784.     </p>

  785.   </div>

  786. </footer>

  787. <script type="text/javascript">

  788.   ;(_ => {

  789.     const jumper = document.getElementById('jumper')

  790.     jumper.addEventListener('click', e => {

  791.       e.preventDefault()

  792.       const anchor = e.target.getAttribute('href')

  793.       const targetEl = document.getElementById(anchor.substring(1))

  794.       targetEl.scrollIntoView({behavior: 'smooth'})

  795.     })

  796.   })()

  797. </script>