summaryrefslogtreecommitdiff
path: root/posts/2021-05-23-web-designers-please-don-t-animate-page-titles.html
diff options
context:
space:
mode:
Diffstat (limited to 'posts/2021-05-23-web-designers-please-don-t-animate-page-titles.html')
-rw-r--r--posts/2021-05-23-web-designers-please-don-t-animate-page-titles.html125
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>