第 2 章 响应式内容

第 2 章 响应式内容

如果你认为 HTML 和 CSS 是一个网站最重要的部分,那我们需要从另一个角度来看待这个问题。用户访问你的网站是为了获取内容(及功能),而不是为了欣赏设计师的才华或开发者的编程技术。

用户不会在乎你的网站是否是响应式的,而且他们中的大多数人可能连“响应式网页设计”是什么意思都不知道。他们不会考虑自己是否使用了适当的设备来访问网站,或者他们的屏幕尺寸是否合适。他们甚至通常都不关心网站是什么样子的,只要能用他们自己的设备轻松获得所需的信息或功能就行。

这就是为什么在设计网站时我们要首先考虑内容。

与此相反,如果你先设计,然后再填充内容,那你的内容将永远限于次要状态,你也不太可能为用户提供他们需要的内容。

因此,对于响应式网站,你首先需要考虑的是内容,以确保内容在小屏幕上有良好的显示效果。如果你使用固定宽度网站中的现有内容,将很难将其硬塞进较小的屏幕布局中。如果你从零开始创建新内容,则需要确保它是为所有屏幕尺寸优化的,而不只是一种屏幕尺寸。

2.1 内容策略

“内容策略”(content strategy)一词在过去的几年里获得了极大的关注,特别是在 2009 年 Kristina Halvorson 的著作 Content Strategy for the Web(New Riders)出版之后。

在那之前,罕有公司谈及自己网站的内容策略。只有当需要创建内容去填充网站上的待填充区域时,我们才会讨论网站内容。

确实,通常我们在创建网站时完全没有考虑内容策略。如果我们的公司或项目需要一个网站,我们会首先设计一个很漂亮并且与品牌相匹配的网站,接下来列出所有现有的将要放到网站上的东西(内容),然后试着将它们都塞到新设计的网站中去。

如果幸运的话,我们能有一个信息架构师,他构建了一个良好的架构来组织我们的所有内容。否则,就是所有的内容都堆砌在那里。无论我们有什么内容,都让它们在网站上的某个地方呈现出来。毕竟,从技术的角度来看,只要花费非常少的成本就能把网站做得更大(拥有更多的内容和页面),那么何不把所有内容都放到网站上,让人们在需要的时候可以随时获取,直到永远呢?

但后来我们突然意识到网站的内容很重要

内容策略指的是规划和管理内容的一种方法。这些内容不仅包括文本,也包括其他形式的信息,如图像、视频和音频。内容策略不仅限于网站上有什么,还关系到网站如何运作。

首先要从大局着眼。网站应该实现什么样的目标?用户访问网站时,你希望他们做什么?什么是成功的用户交互?如何用网站来支持你的商业目标或项目目标?如何满足用户需求?

制定一套内容策略要花费时间和精力,但如果你是在进行视觉设计之前而不是之后考虑内容,那么你创建的网站会更好。

要获得有关内容策略的更多信息,请查阅以下资源:

[小贴士]

如果你不知道“内容策略”“内容营销”“内容管理”之间的区别,也不太了解所有其他与内 容相关的术语?可以看看 Melissa Rach 发表在 UX Magazine 上的文章“Content Strategy and Its Cousins”(http://uxmag.com/articles/content-strategy-and-its-cousins)。

移动内容策略

近来,由于每个人都在关注如何创建适用于移动设备的网站,“移动内容策略”这个词也开始流行起来。内容策略无疑是重要的,所以移动内容策略肯定是超级重要的,对吧?

并非如此。

记住,移动和非移动设备之间不再有严格的界线。正如你到目前为止在本书中所学的那样,我们的目标是创建能够在所有设备上工作的网站,当然也包括移动设备。

所以你不需要一个额外的移动内容策略。实际上,移动内容策略通常与常规的网站内容策略无异,只是你不能再忽略移动设备了

你要制定的依然是可靠的内容策略,但请记住,用户将会使用各种设备在不同的场景下访问你的网站,所以你在制定内容策略时一定要考虑到这一点。

要使创建的内容在移动设备上和桌面电脑上呈现出同样好的效果,你会遇到很多从未想过的新挑战。务必现在就开始考虑。

2.2 内容整理

设计一个响应式网站时,你可能一开始就有很多潜在的内容:可能是你旧网站上的内容,线下的内容或者只是关于网站应该提供什么内容的一些想法。

你需要做的第一件事就是思考如何处理这些内容。

2.2.1 仅使用你需要的

首先,你真正需要的内容要远远少于你自以为需要的。

千万不要觉得你应该把所有的内容都放到网站上,以防有人需要。当然,如今在线存储的价格相当便宜,我们认为它几乎是免费的,但是把所有内容都放置在网站上还是有明确成本的。

首先是用户的成本。网站上的内容越多,用户在得到所要的内容之前需要翻找的内容也就更多。

当然,有可能他碰巧在你的网站上又发现了一些感兴趣的内容,但更多时候不是这样。难道会有人需要去看贵公司过去十年发布的所有新闻稿吗?

网站上多余的页面将使导航和搜索结果变得混乱。页面上多余的内容将迫使用户做更多的滚动操作。不必要的东西越多,用户找到其所需就越难,放弃查找的可能性也就越大。

其次是网站所有者的成本。他需要投入更多的资源来跟踪、组织和重新组织、不断更新现有内容,以及持续地检查链接是否失效。你网站上的内容越多,某些内容过时或不正确的的可能性就越大,如果你给出了错误的信息,将要承担潜在的责任。你不能将内容添加到网站上就置之不理,而是需要一直维护。

精简内容的最佳时机是在设计新网站之前,或是重新设计现有网站之前。内容越少,设计过程就越容易,构建网站时所需做的工作也越少。

2.2.2 如何精简

当决定要保留什么内容时,你需要从你的商业目标和用户需求两方面考虑。

例如,“在网站上发布我们所有的新闻稿”不是一个商业目标。相反,目标应该像这样:“确保媒体联系人可以得到撰写有关我们业务的文章所需的信息。”

或许你在网站首页放置了 10 篇最新新闻稿的链接,因为你为自己的成就感到自豪。但那会过多占用宝贵的首页版面。你的绝大多数用户不是新闻界的从业人员,剩下的人也没兴趣阅读你公司的新闻稿。将新闻稿放到一个专用的媒体页既可以确保媒体人士仍能找到它们(他们知道如何查找该页面),同时你也不会强迫其他人去看他们永远不会点击的链接。如果你真的想分享最近的成就,那就写成另一种风格呈献给普通读者:在介绍中使用简短直白的语言,而不是商业辞令。

同时还要考虑每个单独内容块的长度。如果“关于我们”页有 1000 字,那你说的就太多了。它没必要是一篇冗长乏味的公司成长故事(甚至包括了过去 30 年每一个董事会成员的名字)。大多数用户进入该页面想要知道的,非常简单,就是你的网站或公司是做什么的。如果这些信息不能用一两句话说清楚,用户恐怕不会做进一步的阅读。如果你必须列出所有董事会成员,请把它们放在一个单独的页面中。

别忘了留意多余的内容。即使你的 CMS 能很方便地把内容布置于多个地方,但除非真的必要,否则不要这样做。它不仅占用网站的空间,还会干扰用户。这还意味着同样的内容将会在搜索引擎中出现多次,这会让用户感到困惑,如果搜索引擎视这些页面为重复的内容的话,也降低你的搜索排名。

在本书后面的部分,我们将讨论小屏幕优先的设计方法,让你先设计一个用于小屏幕设备的布局,然后再转而为更宽屏幕的设备设计布局。这样的设计方式真的非常有助于你精简内容。当你想在小屏幕布局中填充内容时,它迫使你考虑什么内容是真正重要的,并给你一个清楚的答案,而这在你首先为桌面尺寸的网站设计内容时是很难得到的。

2.2.3 内容审计

当重新设计现有网站时,最好先做一下内容审计,也就是把你目前拥有的所有内容做一下盘点、列出一个清单。如果是一个大型网站,结果可能会让你大吃一惊。

通过查阅清单你可以决定哪些内容需要保留,哪些内容可以舍去,哪些新内容需要创建,以及谁来负责内容的创作与编辑。

一旦你在清单中列出了所有的事项,就能很容易地找到并决定如何处理它们。

清单不需要事无巨细,但至少应该进行分类,同时也要包含主要的内容。如果是一个新网站,你应该给出这样一个清单,它不仅有网站上所计划要包含的内容,也有内容开发的时间进度表。

若想了解更多关于内容审查的知识,可阅读 Donna Spencer 发表在 UXmastery 上的文章 “How to Conduct a Content Audit”(http://uxmastery.com/how-to-conduct-a-content-audit/)。

2.3 内容编写

一旦你弄清楚了需要哪些内容以及把它们放在哪里,还需要考虑如何具体编写内容。

2.3.1 用户如何阅读

你可曾想过用户是如何在一个网站上阅读的?我们喜欢设想他们会访问网站上的每一个页面并将它们从头读到尾,可实际上并非如此。

“建好了,他们就会来”可不是 Web 内容创作者的座右铭,至少不应该是。不过你很可能被这样的网站愚弄过,这种网站中充满了冗长的新闻稿、自我推销的公司信息,以及几乎没什么用、根本就没人阅读的内容。

即使你认为你的产品 / 想法 / 项目是世界上最棒的,也不意味着有人愿意读长篇大论来了解它,甚至那些通过访问你的网站已表现出一些兴趣的人们也不会。

用户浏览你的网站是为了找到他们想要的信息。你要确保没有任何事物阻碍他们。

1. 浏览

用户是以浏览的方式阅读网页的。即使网站的内容非常棒,用户对它的关注也不可能如网站拥有者那样密切。

他们走马观花式地浏览内容,这看一眼,那瞅一下。他们只会粗略地阅读页面,眼睛在链接、标题、图像和小块文本上短暂地停留。

数百万的网页在与你争夺用户的关注,所以不要浪费用户的时间,要让他们尽可能容易地获取所需信息。

2. 倒金字塔

使用户能以最快的速度获取所需信息的关键之一,是使用一种新闻学上称为“倒金字塔”(interved pyramid)的编写方式。

回退到报纸还是印刷在真实的纸张上而不是在网站上发行的时候,编辑每天不得不面对的问题是如何规划物理版面的大小。他们必须生产出确切数量的内容来填充版面,不能多也不能少。但在新闻还没有发生之前,想要提前计划出新闻所需的版面几乎是不可能的。

所以当记者为报纸撰写文章时,他们有确切的字数限制,并且也明白,如果有更重要的新闻发生,他们可能必须缩短故事以腾出版面。

为了使这样的过程更容易,记者将他们故事最重要的细节放在头几段,并在随后的段落中包含那些相对不太重要的细节以及背景信息。这样,如果编辑需要缩短故事以减小占用的版面,就可以砍掉结尾的那些段落而不会丢失重点。图 2-1 能让你更好地理解这种工作方式。

{%}

图 2-1:使用倒金字塔方式,确保用户看到最重要的那部分内容

撰写用于网站的内容时,你也可以使用相同的办法,不是因为编辑会截断你的故事结尾,而是用户可能会这么做,他们不会从头读到尾。确保最重要的细节首先出现,然后是用户可能看也可能不看的次要细节。

3. 分级标题

如果你的页面内容超过两三个段落那么长,把它分割成小块对大家肯定都是有好处的。

对用户而言,使用分级标题的好处有:

  • 在开始阅读之前,更容易地了解页面结构,更好地认知页面内容的类型;

  • 可以向前跳转到感兴趣的部分;

  • 使用辅助技术的用户(比如使用屏幕阅读器软件的盲人用户)可以在页面内容中导航而不必通读所有内容;

  • 可以在滚动时更容易地找到自己所在的位置。

对网站所有者而言,使用分级标题的好处有:

  • 让搜索引擎知道页面的关键主题是什么,进而能够提升页面的搜索引擎排位;

  • 内容作者能够创作出更适合 Web 的内容。

要写出好的标题,首先应将你的内容根据不同的重点分割成多个部分。

标题应该尽可能短并且表明重点,还应包含相关的关键词。理想情况下,每个标题应该以关键字开头,以使略读更容易。

标题应该是接下来内容的一个描述性预览,同时不应故弄玄虚。

4. 简短明了

用户在浏览页面的时候,倾向于阅读小段的文字内容。大块的文字会让用户望而生畏,通常不再继续阅读下去。

段落应该简短,一般不超过 100 字。

如果内容更适合按要点列出,那就应该使用列表。对于同样的内容,列表形式要比段落形式更易于查看和理解。

2.3.2 简明的语言

你在内容中所使用的语句十分重要,它不仅奠定了你的内容基调,也决定了用户是否能够理解内容。

根据研究,如美国国家教育统计中心(NCES)资助的“2003 年全国成人读写能力评估”(NAAL,http://nces.ed.gov/NAAL/),美国成年人的平均阅读水平通常在八九年级水平,近 50% 的成年人的阅读能力在六年级水平以下。

我们这些为网站撰写和编辑内容的人通常受过良好的教育,而我们的阅读水平往往也反映出这一点。但要记住我们的读者并不是我们自己。

很容易做出这样错误的假设:你的网站的用户肯定比其他人更聪明或受教育程度更高。毕竟,他们足够明智地选择了你的网站,不是吗?但如果没有浅显易懂的语言,你将失去潜在客户或是遗漏了向人们传递信息——他们很可能真的需要这些信息。

近年来,涌现了一场简明语言(plain language)运动,内容作者努力创作容易理解的内容,并以一种使用户更易于找到其所需内容的逻辑结构来编排它们。

使用简明语言的一个附带好处是,它真的有助于所有用户。大多数人都想要迅速地得到他们想要的信息,别忘了,有整个互联网的信息等着他们去读。即使对于文化程度高的用户,简明的语言也将帮助他们更快地阅读和导航内容。

你也能帮助英语不是母语的用户。这并不仅仅是指那些外来移民,也指想要光顾你的餐厅的外国游客,或者想要订购你的产品的他国居民。如果你的网站提供了信息,有兴趣阅读的可能不仅仅是你自己国家的居民。

对于使用简明语言,一个好的开始是用尽可能简单的词语,尽可能短的句子和段落。通过像前面所谈的那样精减你的内容,确保低文化程度的用户不必花费很多额外的时间来吃力地阅读与他们无关的内容。

以下资源可以帮助你了解简明语言:

2.4 内容平等

在思考自己对用户了解多少的时候,你需要考虑的第一件事是,你所“知道”的有关他们的大多数事情都是基于假设,不一定正确。

一个常见的错误是基于用户所使用的设备去假定用户需要或不需要某些内容。

例如,经常设想手机用户是“在移动中”,因此他们只需要基于位置的信息,比如要去的餐厅的地址,或者他们的航班是否准时。

但是现在手机已经变得无处不在,我们几乎在任何地方都使用它们,即使我们旁边就有笔记本电脑或台式机。

手机现在就像是另一台电脑,人们期望无论是在手机上还是在台式机或笔记本上浏览网站,都能获得同样多的信息。

每个人都应能访问网站的所有内容,不管他们正在使用什么设备。这一概念称为“内容平等”(context parity)。

响应式设计的优点之一,就是我们可以为所有用户提供相同的内容而不用顾虑他们所使用的设备,与此同时,我们提供的内容又为用户所使用的设备进行了优化。

正如你将在第 5 章中学到的,要针对不同设备的屏幕尺寸呈现不同的内容,你有很多事可以做。

2.5 内容管理

如果你的网站有内容(所有网站都有内容),你需要制订一个内容管理(content governance)计划。这意味着一旦内容在你的网站上发布,你就要妥善管理它们。

你不能发布完内容就将其抛诸脑后,否则会出现信息过时或者不正确、链接失效等问题。在网站上发布内容之前,你需要为内容管理制订一个良好的计划,否则你可能永远不会再有时间去做这件事。

创建长期有效的内容

要使你的内容更易于维护,你能做的一件事就是使其尽可能不受时间的影响。

当然,不是所有的内容都是永恒的,做好这件事的一个方法是审视内容并想象你在一年以后又碰巧遇到它。那时它还能不能独立存在?

尽可能在日期中包含年份。你可曾有过这样的经历:你听说了一个年度盛事,想要参加,于是到网站上查看,结果看到上面醒目地写着盛事于 10 月 15 日举行,可你却不知道这指的是今年即将举行的活动,还是去年已举办过的活动?

如果你知道信息仅在特定时间内是有效的,应该在内容中做个标注。这样如果你忘记回过头去修改或删除,至少看到它的人会知道内容已经失效。

2.6 自适应内容

作为响应式网站,网站中的内容不仅要能在不同宽度的屏幕中浏览,还应该能在不同的场景中完整地浏览。

例如,图 2-2 是 Rachel Nabors 发表在 A List Apart 上的一篇文章在桌面浏览器中的显示效果。

{%}

图 2-2:在桌面显示器上浏览 A List Apart 上的一篇文章

但有些人喜欢用 RSS 阅读器阅读帖子和文章。阅读器会剥除网站的所有设计,只依靠 HTML 来显示内容,如图 2-3 所示。

{%}

图 2-3:在 RSS 阅读器中查看一篇文章

人们也常常使用 Instapaper(http://www.instapaper.com/)之类的服务,用它们查看网页的主要内容(广告或导航之类的东西通通没有),或者保存文章以便稍后阅读。图 2-4 显示的是台式电脑上的浏览效果,图 2-5 显示的是 iPhone 上的浏览效果。

{%}

图 2-4:在台式电脑上查看 Instapaper 中的一篇文章

图 2-5:在 iPhone 上查看 Instapaper 中的一篇文章

我们不能再仅仅考虑如何在网站上显示内容。我们需要把它看作一系列的数据块,比如标题、作者姓名和主体内容。这些不同的数据块称为元数据(metadata),意思就是“关于数据的数据”。

如果你使用 CMS,那你可能一直是这么做的,用单独的字段对应标题、文章日期和作者姓名。在响应式设计中,我们依据屏幕尺寸来调整布局。在小屏幕上,标题、日期、作者和主体文本可能会一个接一个地垂直显示。在大屏幕上,日期和作者则可能是在另外一个文本框中显示。这些布局的变化仅在内容被分割成单独的数据块时才有可能实现。

如果文章重现于另一个应用中,数据块也使得内容能以一种合理的方式显示。

那如何处理其他类型的内容呢?例如,在一个电子商务网站中,不能只用一个描述字段来包含销售商品的所有细节,而应使用单独的字段分别描述颜色、尺寸、材质、使用类别等。这样,你不仅可以根据屏幕宽度轻松地更改页面布局,还可以实现更强大的搜索和导航功能,让用户更快地找到所需的商品。

通过结构化内容并附加元数据,你不仅能使内容更好地适应不同的屏幕尺寸,还能使内容更易于显示在网站之外的地方。

2.7 总结

不久之前,网站内容仍被视为在设计之后再添加的东西,但近年来内容策略已显得愈发重要。

在设计之前就开始考虑内容将帮助你创建一个符合商业目标和用户需求的网站。

在向新站点转移的过程中要整理你的网站内容,首先通过内容审计来查看你拥有的内容,然后进行梳理和精减,只使用网站真正需要的内容。不必要的内容只会使用户难以使用网站,使网站所有者难以维护网站。

确保内容简洁,并以简明的语言编写,这样易于用户阅读。用户是以浏览的方式阅读网页的,所以要创建短的段落并用分级标题将内容分成多个部分。确保最重要的信息放在页面开头,因为有时用户不会从头读到尾。

不要基于用户访问网站所用的设备来对其所需的内容做出假设。所有来到你的网站的用户都应该能访问全部的内容。

除了添加内容到新设计的网站之外,还要考虑在网站上线后如何管理内容。要制订更新内容的计划。尽可能创建不受时间影响、长期有效的内容。

将内容分块使之可在页面上重排,也很容易移植到其他媒体上。

在下一章,我们将开始学习响应式网站背后的代码细节。

目录