Websites have a tendency to decay all by themselves. Link rot, they call it. Unpaid domain name registrations. Companies that have gone out of business. Site owners that have lost interest. What’s sadder than a 404? Landing on a holding page of a URL that used to exist, but now has fallen into the hands of some domain hoarder after it expired, hoping someone will pay a premium to get it back.
That stuff is no fun. But what about sites that are totally still around, just old? What kind of fun things could we do to indicate oldness that’s, like, on purpose?
On the CodePen blog, we call out blog posts that haven’t been updated in at least a couple of years. We update documentation, sure, but we tend to leave blog posts alone as a historical record. So, we’re pretty clear about that:
<?php if (get_the_modified_date("Y") < 2017) { ?>
<p class="callout"><strong>Heads up!</strong> This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the <a href="/documentation/">docs</a>. Get in touch with <a href="https://codepen.io/support/">support</a> if you have further questions.</p>
<?php } ?>
We style it up like a little warning:

But what if it was less obvious? What if the text just kinda started going all to crap? Words falling off their lines and going out of focus? The older the content, the more decay:
See the Pen
Decayed Text by Chris Coyier (@chriscoyier)
on CodePen.
What if you let a site decaye on purpose? Say, perhaps, you’re holding oto client work and the client hasn’t paid their bill. Dragoi Ciprian has a little idea (repo) for that. You set the due date and deadline:
var due_date = new Date('2017-02-27');
var days_deadline = 60;
Here’s a demo of that. As I write, I’m 30 days into a 90-day deadline. If the demo looks blank to you, well, I guess I should have paid my bill so this code could have been removed 😉
See the Pen
not-paid Demo by Chris Coyier (@chriscoyier)
on CodePen.
Or maybe the screen could kinda flash red, like you’re getting hit in a video game.

Or you could get all glitchy! (This demo is click-to-load, fast colors and motion warning.)
See the Pen
Glitchy loader by Nathaniel Inman (@NathanielInman)
on CodePen.
See the Pen
CSS Glitched Text by Lucas Bebber (@lbebber)
on CodePen.
Perhaps rather than basing things off a payment due date or the age of the content, these effects come into play based on how long it’s been since the site’s dependencies have been updated. Or at least had some kind of deployment push.
This is only sorta tangentially related, but it reminds me of the very, very scary game Lose/Lose:
Lose/Lose is a video-game with real life consequences. Each alien in the game is created based on a random file on the players [sic] computer. If the player kills the alien, the file it is based on is deleted. If the players [sic] ship is destroyed, the application itself is deleted.
Although touching aliens will cause the player to lose the game, and killing aliens awards points, the aliens will never actually fire at the player. This calls into question the player’s mission, which is never explicitly stated, only hinted at through classic game mechanics. Is the player supposed to be an aggressor? Or merely an observer, traversing through a dangerous land?
I wanted to do the fading website that was linked into a social API feed so that every time the URL of the site was shared (via twitter for example) it would buy another 5 minutes of view time. The more shares, the long it lasts, and if you arrived on the site and it was blank you had to share it to get to see the content.
^ Totally nothing to do you the article, but I still like the idea :D
Hah, I think advertisers would love this idea :)
Reminds me of a concept piece that functioned in the opposite way: as soon as a user visited the page, it would move to a new page and be replaced with a link to it. It continuously became harder and harder to view the more people viewed it.
One of the essays in ‘The Art of Human-Computer Interface Design’ by Brenda Laurel includes the idea (and an illustration) that document icons in a desktop file manager’s window could change colour based on the creation date. Specifically, they become more yellowed and eventually brown depending on the age of the file. I’d love to see a page in a web site get more yellowed and perhaps frayed on the edges as the post was older, because it is easily understandable, and helps you take in the context at a glance, just the way you can in the ‘real world’.
Reminds me of the Walking Dead credits logo. Every season that goes on and further into the zombie apocalypse we go, the more decayed and worn out it becomes.
Chris, I think one of the most confusing and, sometimes, dangerous issues on the internet are all those articles that mislead people simply because they are out of date – but they have no date over them so people take them at face value without realising they may be ten years out of date or more! Blog posts have the date over them or at the foot, but articles usually don’t. In today’s fast moving world, all authors and publishers should display the date of an article, unless there is something near the top of the article that clearly dates it (for instance a reference to some event that has just happened).
Trello has an add-on that causes cards to fade and decay like old paper as they age.
https://foundation.mozilla.org/en/campaigns/eu-misinformation/publisher-campaign/
How about this instead:
That makes the code infinitely more dynamic :-)
Sorry, but I loved this concept so much, I made a small
add_filter
function that add adecay
class to the<body>
element ifget_the_modified_date("Y")
is more than two years old:// Add \`decay\` class to \`<body>\` if article is old
function decay_class($classes) {
$output = "fresh";
if ( date("Y") - get_the_modified_date("Y") >= 2 ) {
$output = "decay";
}
return array_merge( $classes, array($output) );
}
add_filter( 'body_class', 'decay_class' );
Place it in
functions.php
or in a separate plugin, and hey-presto! :-)I’m currently testing it on my blog although I have not yet added any CSS (
view-source
><body>
):Decayed page
Fresh page
Love the idea, but I’m not sure the example treatments here communicate the idea well enough. Great food for thought though.