1 files changed, 69 insertions, 0 deletions
diff --git a/posts/2021-05-23-web-designers-please-don-t-animate-page-titles.php b/posts/2021-05-23-web-designers-please-don-t-animate-page-titles.php
new file mode 100644
index 0000000..1c28487
--- /dev/null
+++ b/posts/2021-05-23-web-designers-please-don-t-animate-page-titles.php
@@ -0,0 +1,69 @@
+<?php
+$title = "Web Designers, Please Don't Animate Page Titles";
+if (isset($early) && $early) {
+	return;
+}
+include($_SERVER['DOCUMENT_ROOT'] . '/includes/head.php');
+?>
+
+<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>
+
+<p>
+	<img src="https://nextcloud.53hor.net/index.php/s/TWDbzjiSwzHbMcz/preview" />
+</p>
+
+<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>
+
+<p>
+	<img src="https://nextcloud.53hor.net/index.php/s/TbbDnnL3jnZMT3g/preview" />
+</p>
+
+<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>
+
+<p>
+	<img src="https://nextcloud.53hor.net/index.php/s/ocQofL2Goxd3AsQ/preview" />
+</p>
+
+<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>
+
+<p>
+	<img src="https://nextcloud.53hor.net/index.php/s/AcNgR4cDxGDsWCB/preview" />
+</p>
+
+<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>