summaryrefslogblamecommitdiff
path: root/posts/2021-05-23-web-designers-please-don-t-animate-page-titles.html
blob: 8473b7bd04ce1cf99f67e5fc236a380c4d8e2cc7 (plain) (tree)




























































































































                                                                                 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/includes/stylesheet.css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      property="og:description"
      content="The World Wide Web pages of Adam Carpenter"
    />
    <meta
      property="og:image"
      content="https://nextcloud.53hor.net/index.php/s/Nx9e7iHbw4t99wo/preview"
    />
    <meta property="og:site_name" content="53hor.net" />
    <meta property="og:title" content="Web Designers, Please Don't "Animate"
    Page Titles" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.53hor.net" />
    <title>53hornet ➙ Web Designers, Please Don't "Animate" Page Titles</title>
  </head>

  <body>
    <nav>
      <ul>
        <li>
          <a href="/">
            <img src="/includes/icons/home-roof.svg" />
            Home
          </a>
        </li>
        <li>
          <a href="/info.html">
            <img src="/includes/icons/information-variant.svg" />
            Info
          </a>
        </li>
        <li>
          <a href="https://git.53hor.net">
            <img src="/includes/icons/git.svg" />
            Repos
          </a>
        </li>
        <li>
          <a href="/software.html">
            <img src="/includes/icons/floppy-variant.svg" />
            Software
          </a>
        </li>
        <li>
          <a type="application/rss+xml" href="/rss.xml">
            <img src="/includes/icons/rss.svg" />
            RSS
          </a>
        </li>
      </ul>
    </nav>

    <article>
      <h1>Web Designers, Please Don't "Animate" Page Titles</h1>

      <p>
        If you visit
        <a href="https://www.expressoil.com">Express Oil Change's web site</a>,
        everything seems completely ordinary until you leave the tab. That's
        when the most distracting, broken, annoying example of over-the-top web
        "design" rears its ugly head.
      </p>

      <p>
        I'm talking about this scrolling page title. In my tab. Constantly
        moving from right to left to show me all of the text. It's the only tab
        that's "moving" or "animated" and it doesn't stop until you return to
        the tab. It's cheesy and gaudy.
      </p>

      <img
        src="https://nextcloud.53hor.net/index.php/s/TWDbzjiSwzHbMcz/preview"
      />

      <p>
        And it's also broken because there are emojis in the page title and the
        title is obviously being "scrolled" by some script that's moving
        byte-by-byte, so it scrolls halfway through a multi-byte UTF-8 emoji and
        for a brief moment there's a glyph error character where a little red
        car should have been. Bad judgment and bad programming. Worse than that,
        even if it worked perfectly, it's incredibly annoying.
      </p>

      <img
        src="https://nextcloud.53hor.net/index.php/s/TbbDnnL3jnZMT3g/preview"
      />

      <p>
        If you bookmark the tab when it's in the middle of scrolling, you'll
        bookmark this weird slice of the text that starts or ends in the middle
        of a word or with a random emoji.
      </p>

      <img
        src="https://nextcloud.53hor.net/index.php/s/ocQofL2Goxd3AsQ/preview"
      />

      <p>
        Page titles changing is typically used to notify the user that their
        action is needed, such as when a file is finished uploading. In this
        case, since the text is <em>constantly changing</em>, the tab is always
        in a state of "urgency." Most annoyingly, this causes the browser to
        highlight the tab when it's pinned. Even if you click the tab and leave
        it, this notification reappears.
      </p>

      <img
        src="https://nextcloud.53hor.net/index.php/s/AcNgR4cDxGDsWCB/preview"
      />

      <p>
        Don't do this. Stop. Get some help. It's distracting. It's the cheesy
        "web dev" equivalent of retina scan advertising in Minority Report. Just
        make a site that works and looks half decent without slowing to a halt
        and stop there please.
      </p>
    </article>
  </body>
</html>