艺术导向的文章:现在还流行吗?

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 提供适用于您旅程各个阶段的云产品。 立即开始使用 200 美元的免费积分!

我最近在一条关于这个话题的推文中被引用,我认为值得重新审视并进行新的讨论。

“艺术导向文章”的概念是指专门针对文章内容设计的文章。 它可能与父网站共享一些特性(可能应该这样),但许多设计元素会发生变化以适合特定文章。 布局、颜色、字体、背景、图片、交互……所有内容都是为文章量身定制的。

以下是在 Jason Santa Maria 的博客(他一直倡导这个理念)上的一个简单示例。

左边是标准的文章模板,右边是艺术导向的文章。

这只是一个趋势吗?

我的回答是:是,也不是。

  • 与它鼎盛时期(2009-2010 年)相比,我今天看到它使用的频率要少得多。 我当时完全跳上了这趟列车。 这很有趣,但我没有坚持下去。
  • 过去有两个专门的“画廊”网站致力于这个理念:Blogazines 和 HeartDirected。 两者都已下线。
  • 一些例子随着时间的推移而恶化。 例如 这篇关于此类文章的文章

也不是

  • 使用这种方式的网站已经从个人网站转变为大型组织网站。
  • 如今,使用这种方式的网站正在将其提升到前所未有的高度。 请参阅下面的示例部分。
  • 好的设计就是好的设计。 如果你能够设计出一个能够增强内容的页面,那就是一个超越趋势的好主意。

它们随着时间的推移如何保持?

让我们看看是否可以收集一些真实数据。 这篇文章 列出了 20 个具有艺术导向文章的网站,每个网站有两个示例。 让我们对它们自 2009 年以来的四年时间里是如何保持的进行评级。

来自 2009 年的链接 2013 年 10 月的状态 2016 年 11 月的状态
避免与眼睛接触 #1 相同 已消失
避免与眼睛接触 #2 相同 已消失
一个想法 #1 已恢复为常规模板 仍然存在,使用常规模板
一个想法 #2 已恢复为常规模板 仍然存在,使用常规模板
The Bold Italic #1 有一些更新,但基本相同 重定向到 Medium 文章
The Bold Italic #2 有一些更新,但基本相同 已消失
简短的信息 #1 已下线 仍然下线
简短的信息 #2 已下线 仍然下线
Chris Coyier #1 已更新,还可以 已更新(再次),(大部分)还可以
Chris Coyier #2 未更新,有点奇怪,但大部分还可以 未更新,有点奇怪,但大部分还可以(仍然)
Coldheat #1 已恢复为常规模板 又回到了艺术导向!
Coldheat #2 已恢复为常规模板 又回到了艺术导向!
Danny Garcia #1 已下线 仍然下线
Danny Garcia #2 已下线 仍然下线
David Desandro #1 旧链接已断开,新链接处的文章相同 相同!
David Desandro #2 旧链接已断开,新链接处的文章相同 相同!
Dustin Curtis #1 有一些更新,状态良好 已消失
Dustin Curtis #2 有一些更新,状态良好 已消失
ESPN Outside the Line #1 相同 相同
ESPN Outside the Line #2 相同 开始加载,看起来一切正常,然后一些 JavaScript 将您带到一个 404 页面
Gregory Wood #1 404 404
Gregory Wood #2 404 404
Hazardous Ink #1 重定向到主页 重定向到另一个网站
Hazardous Ink #2 重定向到主页 重定向到另一个网站
Hip-Hop Quoted #1 相同 相同
Hip-Hop Quoted #2 相同 相同
Jason Santa Maria #1 相同 相同
Jason Santa Maria #2 相同 相同
Kyle Fiedler #1 404 404
Kyle Fiedler #2 404 404
Pumpkin King #1 显示错误的文章 显示错误的文章
Pumpkin King #2 显示错误的文章 显示错误的文章
Rad Nauseam #1 重定向到主页 重定向到恶意软件
Rad Nauseam #2 重定向到主页 重定向到恶意软件
Tony Dewan #1 404 404
Tony Dewan #2 404 404
Travis Gertz #1 重定向,有一些更新,状态良好 “服务不可用”
Travis Gertz #2 重定向,有一些更新,状态良好 “服务不可用”
Trent Walton #1 有一些更新,状态良好 相同!
Trent Walton #2 有一些更新,状态良好 相同!

2013 年:艺术指导只在 40 篇文章中的 18 篇中存活下来。 不到一半。

2016 年:降至 40 篇文章中的 13 篇,状态良好。

当然,这是一个非常小的样本量,而且没有东西可以与之比较。 有趣的是,可以将其与 2009 年另一个关于完全无关主题的汇总进行比较,看看那些 URL 的状态如何。

响应式设计是否影响了事情?

2009 年略早于响应式网页设计成为我们今天所知的“一件事情”。 在固定环境中定制设计比在流体环境中更容易。

想要让文本“Kapow!”与蝙蝠侠的拳头并排排列在一篇关于旧漫画的文章中? 当你能够确信拳头始终位于完全相同的位置时,这很容易做到。 但很可能你需要缩小和放大图形以适应屏幕尺寸。 现在你需要对文本的位置进行一些巧妙的操作。 而且很可能你必须针对可用屏幕尺寸从微小到巨大进行大约 50 处其他微小的调整。

它使一项本来就很耗时的工作变得更加繁琐。

对性能的关注是否影响了事情?

艺术导向文章中通常会发生以下情况。

  1. 提供您通常会提供的所有内容。
  2. 再加上更多内容!(例如,额外的图片、额外的字体、额外的 CSS 等)

现在网络上确实存在一种“越多越差”的风气。 艺术导向文章中一个常见的主题是添加诸如交互式地图、滚动效果、动画和超大图片等内容。 所有这些内容在网页性能方面都很沉重且速度慢。

这并不意味着你不能以正确的方式进行渐进增强,但这又是一个困难点。 这可能是导致对艺术导向文章热情下降的原因之一。

如何为艺术导向文章的未来规划?

网站会发生变化。 这是必然会发生的,因此你需要为此做好准备。 您现在对文章进行的自定义可能在新的模板中对同一篇文章毫无意义。 您是否更改了 .article-wrap { } 的背景 - 嗯,也许现在是 <article class="module">,因此自定义 CSS 没有任何作用。

问题在于,重新设计通常是为了更好地。 它们适应新的广告结构。 它们使非响应式设计变得响应式。 它们提高性能。 无论怎样。 我们可能希望完全抛弃旧设计,并完全采用新设计。

以下是一些针对各种情况的选项。

  • 完全保留文章。 这就是 Jason Santa Maria 的网站的工作方式。 在网站的某个版本下进行过艺术指导的文章将在该版本下永远显示。 他正在这样做,因此这显然是可行的。 有一些 WordPress 插件可以 使用 URL 参数更改主题,因此我认为你可以编写一些代码,根据发布时间显示不同的主题。

    在与 The Verge(及其配套网站)的一些人交谈时,他们计划为这些 URL 专门提供一个旧版模板,或者将页面“扁平化”成一个一次性静态页面。 无论哪种方式,他们的设计都会永远保存下来。

  • 更新设计。 重新设计时,重新审视文章并将它们修复以适应重新设计并非不可取。时间允许的情况下,这可能是最佳选择。
  • 从一开始就在模板/主题/CMS 外部构建它们。 如果文章本身不依赖于模板,那么更新模板时它就不会出现问题。
  • 恢复到普通模板。 最糟糕的情况是,只需删除所有自定义的艺术指导。在任何情况下,添加资产以自定义页面都是一种相当普遍的方法,因此删除它们有望使内容恢复到正常外观的文章。希望标记没有被过度定制以至于导致其损坏。这里要吸取的教训是:使用命名空间类,这些类将来可能没有任何意义。

无论你做什么,都不要仅仅删除文章或将其重定向到无关的内容。 因为

更多近期示例

纽约时报:雪崩
The Verge:约翰·威尔克斯·布斯
纽约时报:俄罗斯
Travis Neilson:jQuery .show() 的乐趣
Complex:丹尼·布朗
华盛顿邮报:大瀑布
洛杉矶时报:混凝土风险
纽约时报:西红柿罐头之蓝
纽约时报:骑师
Daniel Mall:娱乐周刊网站
Trent Walton:人间百态
Polygon:看门狗

我们再过四年再看看这些吧!

那现在怎么样呢?

这是/曾经是趋势吗?你喜欢吗?你做过吗?对帖子进行艺术指导是否会随着时间的推移而成为致命的一击?你能想到其他处理随着时间的推移而进行艺术指导的帖子的方法吗?还有更有趣的例子吗?

要回答詹姆斯在上面推文中提出的问题:我认为 Dave 分支的 艺术指导插件WordPress 世界中最好的选择,如果你想要做的本质上是添加 CSS 和 JS。

哦,我在这里完全误用了“艺术指导”。抱歉,但我觉得它有点像应用于这件事的名称。