davidbgk
/
larlet-fr-david-cache

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

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://robinrendle.com/notes/why-are-websites-embarrassing/">

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


<article>
  <header>
    <h1>Why are websites embarrassing?</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://robinrendle.com/notes/why-are-websites-embarrassing/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>A few years ago I walked into a bookstore and noticed something peculiar: I found that every book was okay. In fact, books had gotten pretty damn good! A random book in a random bookstore is likely to have an interesting cover with good typography inside. They’re not beautiful objects or anything and, sure, the paper is ehhhh and okay yes they’re using the same boring book fonts that you’ve seen ten million times but there’s nothing about these books that get in the way of my reading. So the baseline for modern book design is pretty high.</p>
<p>This made me wonder why the same isn’t true for websites.</p>
<p>The baseline for websites is not great. Okay, fine: most websites are pure, unadulterated, straight-up bad. Bad from top to bottom, bad from left to right. There’s no denying it, as much as I might want to. And I do want to! I want to hold up the field of web design and say that it’s en par with what musicians and painters and everyone else is doing in every other field. I’ve dedicated my life to this thing and so when I find a beautiful website, something that pushes the whole thing forwards, I want to loudly celebrate it.</p>
<p>I truly want every website to be worthy of our browsers.</p>
<p>But modern websites are not worthy. They’re slow, hard to navigate, and plagued with visual crap; pop-ups, bad typography, newsletter modals, and everything else imaginable. And that’s just the baseline. When I use a website on my phone I likely won’t trust it to show me the same information, I won’t trust interactions when I click buttons or fill in forms or even when I try to navigate elsewhere.</p>
<p>I don’t even trust the back button any more.</p>
<p>It’s so bad that visiting a website in 2023 is like falling into a blackhole and being hit by a bunch of random junk on your way to being crushed into an infinite nothing in the center. No, I don’t want to give you permission about cookies, no I don’t want to sign up to your newsletter, no I don’t want to talk with some half-baked chatbot.</p>
<p>No, no, no.</p>
<p>This low bar for web design is what makes me embarrassed to call myself a web designer. If you tell a stranger that you make websites for a living then their first thought is likely “<em>that sounds lame.</em>” Would they think the same of a book designer? Or a graphic designer? They might not be interested, they might yawn, but they wouldn’t be embarrassed for you.</p>
<p>And yet! I do truly believe that a website can be as well designed as any book, just as thoughtful, just as brilliant. Yet in 2023 it feels like we’ve let websites be one of two things: either confused, junky bloatware or simple white posters with black text and a big checkout button. But the web can be so much more!</p>
<p>When I find a website that doesn’t hijack the scroll, or a website with pleasantly sized text, or a website that loads in under 300ms then it makes me bolt upright in my chair. I wonder at what tech they’re using under the hood, what kind of conversations they had in those rooms, I try to imagine what kind of grueling process the team went through to make something so quiet and simple. All the things they had to say no to.</p>
<p>The other day Chris Coyier mentioned that <a href="https://chriscoyier.net/2023/08/01/other-peoples-busted-software-is-an-opportunity/">bad software is an opportunity</a>: if everyone else is making stuff that sucks and you don’t, you’ll have a leg up. And I get that, I think it’s true. If people look at your software as stable and reliable and trustworthy then you’ve already kinda won. But still, I can’t help feel that bad software is also an excuse. Everyone else’s websites don’t load in under 1 second, so why should mine? I don’t use my website on mobile, so who cares for those who do? Fixing this accessibility problem will only help one person, how does that make us money?</p>
<p>It matters because of the baseline! Every decision we make sets expectations of what is acceptable and what ain’t. Every time we say yes to shitty design and inaccessible text inputs we lower the floor for the whole profession, the whole art form of web design. Saying yes to one terrible new analytics script opens the door to ten thousand more.</p>
<p>So why is web design embarrassing? Why is the floor so low? And why do folks not see the web the same way I do, as a place to be treasured and cared for in the same way as a beautiful book?</p>
<p>I have two reasons beyond the obvious answers.</p>
<p>First, I think great web design requires discipline. And that’s really the hardest thing about making a website. In this field there are a thousand yes’s for every no because, and here’s the second reason: it’s impossible to hold a website in your hand. It’s hard and sometimes tedious to see all the variations of your work across the infinitude of devices and circumstances that might touch your site. When making a website it sometimes feel like you’re thinking in four dimensions instead of three.</p>
<p>But really the baseline of web design is so low because there’s a lack of tenderness, care, and empathy. It’s because we don’t see the making of a website as a worthy profession. It’s because we hope to squeeze the last bit of juice from the orange by mulching people in between modals and pop ups and cookie banners.</p>
<p>So how do we do better? How do we take better care of our websites?</p>
</article>


<hr>

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

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

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

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

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