正在衰败的网站

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程每个阶段提供云产品。立即开始使用 200 美元的免费信用额度!

网站倾向于自行衰败。他们称之为链接腐烂。未支付的域名注册。倒闭的公司。失去兴趣的网站所有者。有什么比 404 更令人悲伤?登陆一个曾经存在的 URL 的保留页面,但现在在过期后落入了一些域名囤积者的手中,希望有人会支付溢价才能将其拿回。

这些东西一点也不好玩。但是那些仍然存在,只是旧的网站呢?我们可以做些什么有趣的事情来表明故意变老?

在 CodePen 博客中,我们指出至少两年未更新的博客文章。我们当然会更新文档,但我们倾向于将博客文章保留为历史记录。所以,我们对此非常清楚

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

我们把它设计成一个小小的警告

但是如果它不那么明显呢?如果文本只是有点开始变得糟糕呢?单词从行中掉下来并变得模糊?内容越老,衰败就越多

查看 CodePen 上的示例
衰败的文本
,由 Chris Coyier (@chriscoyier) 创建。
CodePen 上。

如果你故意让一个网站衰败会怎么样?假设,也许你正在为客户工作,而客户还没有支付账单。Dragoi Ciprian 有一个关于此的小想法 (代码库)。你可以设置截止日期和最后期限

var due_date = new Date('2017-02-27');
var days_deadline = 60;

这是一个演示。当我写作的时候,我已经过了 90 天的最后期限的 30 天。如果演示对你来说是空白的,好吧,我想我应该支付我的账单,这样这个代码就可以被删除了 😉

查看 CodePen 上的示例
not-paid 演示
,由 Chris Coyier (@chriscoyier) 创建。
CodePen 上。

或者也许屏幕会有点红色闪烁,就像你在玩电子游戏时被击中一样。

Dave 曾经说过这将是一个很酷的浏览器扩展,比如当发生某些不好的事情时,比如布局卡顿,浏览器窗口会闪烁红色。

或者你可以变得很 故障!(此演示是点击加载,快速颜色和运动警告。)

查看 CodePen 上的示例
故障加载器
,由 Nathaniel Inman (@NathanielInman) 创建。
CodePen 上。

查看 CodePen 上的示例
CSS 故障文本
,由 Lucas Bebber (@lbebber) 创建。
CodePen 上。

也许与其根据付款截止日期或内容的年龄来决定,这些效果会根据网站依赖项更新了多长时间而生效。或者至少进行过某种部署推送。


这只是有点间接相关,但它让我想起了非常非常可怕的游戏 Lose/Lose

Lose/Lose 是一款具有现实生活后果的电子游戏。游戏中每个外星人都是根据玩家计算机上的随机文件创建的。如果玩家杀死外星人,它所基于的文件就会被删除。如果玩家的飞船被摧毁,应用程序本身就会被删除。

虽然触摸外星人会导致玩家输掉游戏,杀死外星人会奖励分数,但外星人永远不会真正向玩家开火。这让人质疑玩家的任务,这个任务从来没有明确说明,只是通过经典的游戏机制暗示。玩家应该是侵略者吗?还是仅仅是观察者,穿梭在一个危险的土地上?