1 files changed, 125 insertions, 0 deletions
diff --git a/posts/2021-05-23-web-designers-please-don-t-animate-page-titles.html b/posts/2021-05-23-web-designers-please-don-t-animate-page-titles.html
new file mode 100644
index 0000000..8473b7b
--- /dev/null
+++ b/posts/2021-05-23-web-designers-please-don-t-animate-page-titles.html
@@ -0,0 +1,125 @@
+<!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>