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