diff options
| author | Adam T. Carpenter <atc@53hor.net> | 2021-05-23 21:52:56 -0400 |
|---|---|---|
| committer | Adam T. Carpenter <atc@53hor.net> | 2021-05-23 21:52:56 -0400 |
| commit | a1eda32d9856e3ed5e06de73c9bc194f81891697 (patch) | |
| tree | 6897d61cf138491b03fc2aef8adc3772e813a04a /posts | |
| parent | 5a3fcb09a6a139a508b077b4c4e5a546b8f0aabd (diff) | |
| download | 53hor-a1eda32d9856e3ed5e06de73c9bc194f81891697.tar.xz 53hor-a1eda32d9856e3ed5e06de73c9bc194f81891697.zip | |
added a bunch and published bad animated page titles
Diffstat (limited to 'posts')
| -rw-r--r-- | posts/2020-12-29-antivirus-software-is-a-hack.html | 6 | ||||
| -rw-r--r-- | posts/2021-05-23-web-designers-please-don-t-animate-page-titles.html | 125 |
2 files changed, 128 insertions, 3 deletions
diff --git a/posts/2020-12-29-antivirus-software-is-a-hack.html b/posts/2020-12-29-antivirus-software-is-a-hack.html index a146953..670bcb6 100644 --- a/posts/2020-12-29-antivirus-software-is-a-hack.html +++ b/posts/2020-12-29-antivirus-software-is-a-hack.html @@ -79,12 +79,12 @@ hack and is virtually useless. </p> - <blockquote - cite="From The Jargon File (version 4.4.7, 29 Dec 2003) [jargon]" - > + <blockquote> hack<br /> 1. n. Originally, a quick job that produces what is needed, but not well. + <br /> + <cite>-- The Jargon File (version 4.4.7, 29 Dec 2003) [jargon]</cite> </blockquote> <p> 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> |