path: root/posts/2021-05-23-web-designers-please-don-t-animate-page-titles.php

<?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>