diff options
| author | 53hornet <atc@53hor.net> | 2021-07-28 10:58:58 -0400 |
|---|---|---|
| committer | 53hornet <atc@53hor.net> | 2021-07-28 10:58:58 -0400 |
| commit | bfaccc32571df8a02f69518d8864244efba3b5b5 (patch) | |
| tree | cc71a44054af00e73d0db2a1c79c347db3f31327 /posts/2021-05-23-web-designers-please-don-t-animate-page-titles.html | |
| parent | dd75b4a341925e4ba3408b018941241d4317dd9f (diff) | |
| download | 53hor-bfaccc32571df8a02f69518d8864244efba3b5b5.tar.xz 53hor-bfaccc32571df8a02f69518d8864244efba3b5b5.zip | |
php site, templating and partials, faster index generation
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.html | 133 |
1 files changed, 0 insertions, 133 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 deleted file mode 100644 index 65eea7a..0000000 --- a/posts/2021-05-23-web-designers-please-don-t-animate-page-titles.html +++ /dev/null @@ -1,133 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <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 alt="home" src="/includes/icons/home-roof.svg" /> - Home - </a> - </li> - <li> - <a href="/info.html"> - <img alt="information" src="/includes/icons/information-variant.svg" /> - Info - </a> - </li> - <li> - <a href="https://git.53hor.net"> - <img alt="git" src="/includes/icons/git.svg" /> - Repos - </a> - </li> - <li> - <a href="/software.html"> - <img alt="software" src="/includes/icons/floppy-variant.svg" /> - Software - </a> - </li> - <li> - <a type="application/rss+xml" href="/rss.xml"> - <img alt="rss" 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> - - <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> - </article> - </body> -</html> |