灵活的内容:响应式设计简介

响应式网页设计是技术传播领域的一项变革技术。响应式设计可以使内容实现自动调整以适应不同设备——无论台式机、手机还是平板电脑。响应式设计还可以适应用户上下文,包括其环境。用户上下文一直为技术传播者们所重视;这是我们所说的“了解你的受众”这一真理的延伸。响应式设计使内容更灵活,让技术文档工程师们可以全身心投入自己擅长的工作:编制高品质内容。

响应式设计是网页开发概念——“渐进增强”的一部分。掌握了“渐进增强”的网页设计师们认为,用户不应该因为没有“适当的”设备或浏览器而错过美妙的体验或精彩的内容。 正如 Aaron Gustafson 在《自适应网页设计:利用渐进增强打造丰富体验 (Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement)》中所写:“渐进增强这一概念旨在通过提供无技术限制的内容访问,打造良好的用户服务体验。”

在本文中,我们将一起了解什么是响应式设计及其工作原理、采用响应式设计的好处以及技术传播者们的最佳实践。

应运而生的响应式设计

Ethan Marcotte 在 2010 年提出“响应式网页设计”这一概念。自那时起,这项技术迅速发展起来,近期更是被推到了聚光灯下。  Mashable 称 2013 年是“响应式设计之年”,因为在这一年平板电脑的预测销量首次超过台式机。其他重大发展还包括 2012 年第一季度到 2013 年期间移动设备的网页流量大幅增加,同一时期全球移动设备的网页浏览量也有大幅提升。

  • 响应式设计使搜索引擎优化 (SEO) 得到改进。
  • 移动设备用户希望获得与台式机用户完全相同的信息服务——即“共网 (one web)”。响应式网页设计专家 Brad Frost 将此称为“内容平等”。他指出,移动设备用户不需要与台式机用户相同的信息这一观点是错误的。“W3C 移动最佳实践”规范对“共网 (One Web)”的描述是“在合理范围内,向所有用户提供相同的信息和服务,无论其使用何种设备。”
  • 谷歌的一份研究报告对“内容平等”进行了验证。该报告指出多屏操作十分普遍——90% 的人会在一台设备上开始一项任务,然后切换到另一设备进行(称为顺序使用),66% 的用户则会同时使用智能手机和笔记本/台式机。 这意味着相同内容在某一设备上不可用时,用户会有所察觉。
  • 最后,研究还发现,当网站为响应式设计并能根据用户上下文为其提供所需信息时,用户任务完成度会有所提高。这样既可以提高内容的可检索性,又能提升用户体验,从而大大提高任务完成度。

响应式设计的简短入门

响应式网页设计技术用于设计在传输过程中能够根据访问设备自动调整内容的网页。响应式设计中不会发生内容丢失;网页内容和布局通过层叠或折叠实现简单调整。这种设计中没有水平滚动条。触摸等互动操作也是响应式设计的组成部分。

微软网站便是响应式网站的一个实例,本文将解释说明其如何通过层叠和折叠来适应不同设备。以下是两个响应式软件文档实例:CouchDB和Bootstrap。 可以登录“Am I Responsive”网站,输入需要检测的网站 URL 来查看任何网站的响应性。可进入“Media Queries”网站查看响应性设计汇总。 在响应性设计中,HTML 不变,改变的是基于设备/浏览器的 CSS。该类设计融合各种技术,其中最核心的技术是媒体查询、流式布局和弹性图片。

媒体查询

HTML 媒体属性用于根据屏幕宽度指定要调用的 CSS。一个响应式网站会使用多个样式表来改变内容的显示方式。在下例中,当屏幕宽度与指定媒体查询(在本例中为智能手机通用宽度 320px)的参数相匹配时,调用名为“mobile.css”的 CSS。

<link rel="stylesheet" media= "(min-width:320px)" href="css/mobile.css"/>

如果 media= "(min-width:1025px)",则会调用另一 CSS(专为台式机开发)。

流式布局

流式布局(也称为流式网格布局)是包含特定数量元素的网格,这些元素基于百分比而非像素。随着设备或屏幕尺寸的变化,网格按比例调整其元素,设备宽度较小时进行“层叠”,屏幕较大时则进行延展。

弹性图片

传统网页上的图片以像素为单位,这意味着它们是硬编码和非弹性的。使用相对单位取代像素时,图片变为弹性(或流式)。最常见的解决方案是将图片的最大宽度设置为 100%,高度设置为“自动”,使图片可以放大或缩小以填充可用空间。

技术传播最佳实践

以下是技术传播者在优化响应式网页内容时的一些最佳实践:

使用较小的图片文件。大文件会增加加载时间:网站加载时间超过 5 秒时,74% 的移动设备用户会选择放弃。

内容要简洁。移动设备用户不太可能花时间阅读长篇累牍的内容(这也有利于降低翻译成本)。

采用渐进式信息披露。以简短篇幅向用户展示内容概要,让他们自己选择想要进一步了解的内容。多年来,技术传播者们一直提倡这种做法,Susan Weinscheck 在《心理学家眼中的 UX 设计 (The Psychologist's View of UX Design)》一书中对此也予以肯定。

  • 改善导航功能,让用户不会使用设备自带的“返回”键并离开你的内容。 - 使链接更容易使用。同一段落应避免包含多个链接,因为这样会增加在小型设备上进行选择的难度。
  • 简化目录和编号/项目符号列表。在小型设备上,用户看不到分级关系。编号不要超过两个分级,要记住缩进的编号/项目符号列表都会占用移动设备宝贵的屏幕空间。
  • 避免使用设备专用术语。“Click(点击)”和“Tap(点击)”只用于特定环境。应使用更通俗易懂的术语,如“Select(选择)”。
  • 表格应当可以方便地在较小设备上导航。减少每个单元格中的文本量也能提高可读性。

技术传播者们都在努力为用户们随时提供所需的优质内容。凭借响应式设计和移动设备,我们可以使信息变得像访问环境一样灵活。