您上次阅读您的网站是什么时候?就像在星巴克大堂里大声朗读,通过电话告诉您的父母,或者甚至作为睡前故事讲给您的孩子听。
别担心,这不是一个棘手的问题,只是一次直觉测试。
如果您只能做一件事来改善您的网站,那么您除了花一些时间阅读它之外,还能做得更糟。说真的,不仅仅是看文字——阅读它们,并且从头到尾吸收所有内容。认真地深入研究。我说的是打开导航中的所有内容,展开手风琴,打开模态框,并全部吸收。以温蒂汉堡的方式阅读它:不要偷工减料或任何东西。

内容:万岁…国王?
我已经听了几年关于内容是“W”eb 的“K”ing 的说法。但是,根据我个人的经验,我经常看到内容在项目中被当作乞丐一样对待;它是网页阶梯上最低的一级,被当作所有其他事情完成后才考虑的。在所有地方都放着 FPO。与其说是没有人关心网站说什么,不如说是人们将大量注意力和精力放在设计和架构上(当然还有其他方面),以至于几乎没有时间制定有效的内容策略。
但再说一遍,那只是我的经验,当然也有例外。
我认为问题在于我们知道好的内容有多有效,但往往缺乏信心、工具,甚至是对内容在网络中作用的清晰理解。
内容是解决问题
当用心打造时,内容不仅仅是一串文字。这是因为内容不仅仅是我们前端看到的内容。它存在于我们编写的alt
属性中。它也是文档<head>
中的结构化数据。甚至,我们有时也会在 CSS content
属性中生成它。
当我们打开对内容是什么、它做什么以及它在哪里使用的理解时,我们开始看到内容的力量。这可能使内容成为您隐喻的工具棚中最可扩展的解决问题的工具之一——它使网站更容易访问,提取 Google 增强功能,转化销售,并为用户创建途径来完成他们需要做的事情。
内容想要被看到
内容就像我五岁的女儿:它讨厌在黑暗中。我认为没有什么比隐藏内容更能让人沮丧的了。还记得我们隐喻的工具棚吗?内容在看不见的情况下无法解决问题。内容就像你迫不及待想要在踏入校园的那一刻就挂起来的酷炫宿舍房间海报——展示它,让它发挥作用。
我认为,如果某件事重要到需要打字,那么它也可能重要到需要展示出来。这意味着要避免任何可能阻碍用户视线的东西,比如在对比度差的背景上或 内容超出容器。内容只有在呈现得好的情况下才有效。您的网站可能拥有有史以来最伟大的文字创作,但如果它被隐藏了,就毫无用处。内容想要被看到。
有没有内容被隐藏时实际上没关系的时候?当然有。例如 跳至内容链接。我并不是那些坐在摇椅上的设计师(等等,难道所有设计师都坐在椅子上?)会告诉你某些 UI 元素(例如模态框、手风琴和走马灯)是邪恶的。关键是知道展示内容的最佳方式,有时将内容包含在折叠的 <details>
/<summary>
元素中是最明智的选择。
但请,为了所有虚拟人类的缘故,使用元素来增强内容,而不是掩盖其问题。
内容是高效的
据说一张图片胜过千言万语,对吧?我的意思是,这很酷,我猜。但是,那些词语究竟是什么,以及谁决定它们是什么?当然,是最终用户!图像在很大程度上是主观的,这就是它们成为内容的极佳补充的原因。但图像可以完全替代内容吗?我估计,将内容与图像配对比单独使用图像更有效的情况要多得多。
当然,这取决于情况。
我们都同意的一点是,内容比大多数图像要高效得多。首先,它不太容易产生歧义,这使内容更有效地传达信息。当我们可以用几个打字的词语以同样的效果传达相同的信息时,谁还需要一千个词语的表述?
然后,还需要考虑图像的许多可访问性问题。背景图像无法向屏幕阅读器传达信息;除非我们将其内联,设置alt
属性,并使用巧妙的 CSS 定位创建某种伪背景(faukground?)。即使那样,我们也已经处理了alt
属性,所以我们不妨真正使用该内容并显示它!这比在它周围编码要高效得多。
我们甚至还没有讨论图像文件的大小(以 KB 和 MB 为单位)与内容字节相比有多大,即使是在像这样充满内容的文章中。当然,这需要一个关于网页字体及其对性能的影响的大警告,但生活就是这样。
内容和设计协同工作更佳
仅仅因为我之前提到了内容是国王,并不意味着我认为它统治一切。事实上,我发现内容依赖于设计,就像设计依赖于内容一样。没有一场将两者置于生死格斗的笼斗比赛。

两者协同工作。我甚至可以这么说,很多设计都是为了增强页面上传达的信息。没有一方会压制另一方。将内容和设计视为相互支持的,二者之和创造出引人注目的号召性用语、长篇帖子、英雄横幅等等。我们通常将设计系统中的模式视为一组组件,这些组件被缝合在一起以创造新的东西。将内容和设计配对的工作方式非常相似。
所以,你为什么要读这篇文章?
去读读你的网站吧……现在就去。大声朗读出来。把它放到阳光下,让它被看到和听到。这就是它的存在意义。它是您打造更好的网站的朋友——无论是使其更易于访问、更盈利、性能更好、更容易被找到,还是更有人情味。它将用户从 A 点带到 B 点。这是我们在网络上移动的方式,也是网络不可分割地联系在一起的方式。
另外,请、请、请,录制自己大声朗读网站的声音。如果这篇帖子的评论能成为一个庆祝内容并让它被听到的活生生的集合,那该有多酷啊!
所以我打开了开发工具,看看文章末尾的红橙色边框是如何制作的。
您能告诉我更多关于它吗?它似乎利用了 WordPress 块组(我以前不知道),还生成了 CSS 类(ticss-90777846、ticss-4a503671 等)。
谢谢