为什么Web已准备好响应式Web设计

移动端战场

如今，除了传统的 PC 外，大部分网站流量都来自移动设备——即智能手机和平板电脑。全球范围内，移动设备已占互联网流量的 12%，并且其增长速度远超桌面互联网流量。在智能手机普及率高的国家，移动 Web 流量的比例要高得多（例如，在美国，20% 的美国网络流量是通过移动浏览产生的）。更重要的是，随着智能手机在硬件和软件方面的不断发展和成熟，以及在南美、亚洲和非洲的普及率不断提高，预计这一数字在未来 10 年将显著增长。

在过去的几年里，网站所有者已经开始利用这一趋势，并主要依赖原生移动应用来满足 Facebook、Hulu 和《纽约时报》等顶级网站的需求。此外，Pulse、Flipboard 等新兴的 Web 服务甚至采取了“移动优先”的策略，在构建网站体验之前，先为 iOS 和其他生态系统构建应用。原生应用使开发人员能够为用户创建独特的、针对手机优化且以触摸为中心的用户体验，让他们能够利用相机集成、地理定位和离线数据存储等功能与内容进行交互。

针对移动用户进行原生开发是有道理的，尤其是在美国，超过 50% 的移动用户拥有智能手机。虽然移动应用为网站所有者提供了一种与用户在新的设备形态上建立联系、跨平台实现盈利以及创造以移动场景为中心的新体验来赋能用户和令用户满意的方式，但与 Web 的普遍性和覆盖范围相比，它们为开发人员提供的机会尚不完整。仅采用原生移动方法存在一些问题。

问题 1：支持多个平台的成本

跨多个平台创建相似的内容和体验成本高昂，并且需要网站所有者选择要优化的平台。此外，对于从其他平台寻求您内容的用户来说，这会转化为有限的网站体验，特别是当您需要优先考虑您的开发投资时。

采用响应式设计的网站可以帮助解决投资成本问题，并确保您所有最新移动操作系统上的用户都能获得一致的体验。

Allrecipes.com 前产品管理副总裁 Scott Scazafavo，其职责包括移动产品开发，他这样说道：

要出色地开发一款能与由实时数据或内容驱动的“同类最佳”产品（如我们在 MSN 和我前雇主 Allrecipes.com 所拥有的）相媲美的原生移动应用程序，通常需要大约 25 万美元的最低初始投资来定义、设计和开发该原生应用程序，然后还需要针对每个平台每年投入 7.5 万至 10 万美元的维护投资，以保持其功能方面的不断发展，从而吸引消费者并保持健康的采用率。这还不包括创建和维护驱动这些产品的服务（API）所需的任何内部设计或工程工作。

我们 MSN 的 TMX 产品所采用的方法，通过 HTML5 浏览器产品，并使用轻量级应用来帮助将产品推送到应用市场，同时还可以通过移动浏览器访问，这仅比我们使用内部资源创建应用产品的成本略有增量。每个应用的初始投资可能在 2.5 万至 5 万美元之间，此后维护成本可以忽略不计。

同样，通过使用响应式网页设计技术，Clipboard.com 在项目开始时，以其预期开发成本的一半就能够覆盖许多移动、小型设备浏览器，例如 Windows 8 上的 Internet Explorer 10 和 iPhone/iPad 上的 Safari。

问题 2：生态系统碎片化

即使在同一个平台内，也存在大量的设备几何形状和尺寸——以及平台。这要求网站所有者不仅要设计接近相似的显示尺寸和分辨率，还要向多个应用商店提交（Kindle 商店、Google Play 和 Nook 商店，都在 Android 平台上）。在同一平台内管理多个资产会增加支持矩阵的复杂性。修复 Nexus 7 原生应用中的布局 bug，您可能需要为 Kindle Fire 应用再次修复。这意味着您的所有用户不在同一个应用版本上，没有相同的功能集和相同的 bug 修复。

同样（即使在 iOS 应用生态系统中），ESPN、Spotify、愤怒的小鸟太空以及 App Store 本身等顶级应用未能正确填满全屏，而只是在应用的顶部和底部显示黑条。iPhone 5 的推出要求开发人员发布应用更新来解决这个简单的布局 bug。

我们仍处于一个供应商试验新外形尺寸的阶段，例如大屏幕。例如，超过 2500 万 Xbox Live 用户现在可以在客厅电视屏幕上访问 Internet Explorer 10，并且他们不仅通过指针，还通过 Kinect 和 Xbox SmartGlass 等更人性化的机制与之交互。当今的技术决策者面临着一个碎片化且非常不稳定的设备环境，用户已将这些设备融入到他们的日常生活中。

统一的方法：响应式网页设计

响应式网页设计旨在提供最佳的观看/消费体验——易于阅读和导航，最大限度地减少缩放、平移和滚动——涵盖市场上存在的各种设备，同时也能为未来尚未出现的设备做好网站的准备。已经存在关于帮助网站变得更具响应性的各项技术的 Web 教程。本系列旨在不仅提供响应式网页设计的统一方法，还旨在让决策者和开发人员认识到将响应性作为其覆盖策略一部分的紧迫需求。根据 modern.IE 对排名前 5000 个网站的抓取，只有大约 14% 的网站采用某种形式的响应式设计。不难看出为什么开发人员认为这是一个艰巨的任务。

请看图 1。您可以看到流行的智能手机和平板电脑上 Web 浏览器的相对屏幕分辨率（设备在表 1中标识）。设备分辨率以及 CSS 像素与硬件像素的比率（我们将在第 3 部分解释这个概念）均来自 Wikipedia。（每个方块对应 100 x 100 像素的 Web 内容，以 1x 光学变焦布局。）

表 1. 图 1 的图例

A	iPhone 4
B	iPhone 5
C	三星 Galaxy S3
D	诺基亚 Lumia 920
E	HTC 8X
1	Kindle Fire, Nook Color
2	Kindle Fire HD
3	LG Nexus 7
4	Kindle Fire HD 8.9
5	iPad 和 iPad Mini（硬件分辨率不同但 CSS 像素数量相同，更多内容将在第 2 部分介绍）
6	Microsoft Surface

那么，跨浏览器、跨设备的编码是解决方案吗？

传统上，特定于操作系统的应用程序可以通过访问有价值的用户信息（如地理位置、离线存储甚至自定义界面的自定义字体支持）来提供更复杂的用户参与度。

然而，现代浏览器，如 Internet Explorer 10、Google Chrome（22 版）、Safari 6 和 Firefox（17 版）现在通过支持 HTML5 和 CSS3，提供了这些体验中的大部分。HTML5 不再是您爷爷时代的 HTML，它最初是为了让人们在互联网上传递文本信息而设计的。HTML5 旨在让开发人员为 21 世纪编写丰富的 Web 应用。通过 HTML5 和 CSS3，您可以访问曾经是原生应用的功能，如 媒体查询、地理定位、自定义字体支持、离线存储，甚至 触摸事件！这样，您的网站就可以在不同尺寸的硬件上呈现不同的外观和布局，为用户提供基于位置的服务，甚至在用户断开互联网连接时也提供有价值的体验。

HTML5 误区

存在一些常见的 HTML5 误区。这些误区包括：

我无法通过 HTML5 盈利。

HTML5 网站的盈利机会可能比其应用对应物更多。应用盈利如今包括应用购买（尽管 iOS 应用商店中的大多数应用都在免费到 0.99 美元的范围内）。这可能是 HTML5 网站体验无法直接盈利的唯一方式。否则，开发人员可以很好地控制广告以及应用内或网站内购买。更重要的是，许多应用倾向于限制用户的导航量。例如，大多数阅读器和报纸/杂志应用提供文本内容，而不提供 Web 的“链接性”，这使得用户在浏览当前网页时可以导航到相关内容。

当响应式实现时，网站体验保留了 Web 的“链接性”，并可能带来更高的用户印象数。

HTML5 不能离线。

HTML5 有几种不同的解决方案，可以确保用户获得出色的离线体验。首先，网页可以指定在用户离线时哪些资源应该可供用户使用（使用 App Cache）。这样，用户即使在离线时仍然可以与页面进行交互。此外，HTML5 可以使用 Local Storage 以及 Indexed DB 本地存储用户信息和输入。这些数据即使在用户关闭浏览器后仍然存在，并且可以在用户稍后重新启动网页时同步回服务器。

查看此 离线计算器 的演示。用户首次访问时只需要连接到 Web。之后，他可以在离线状态下访问它。此外，用户的计算和结果通过 Local Storage 存储，因此他可以稍后返回并继续计算。

Mozilla 的 hacks 博客是开始打破一些关于 HTML5 的常见误区的好起点。这里需要注意的是，原生应用使用针对设备特定性能优化的 API。但是，HTML5 和 CSS3 为开发人员提供了构建跨各种外形尺寸的引人入胜的体验的工具，并确保您不会错过来自其他平台的访问用户。

CanIUse.com 是了解特定 HTML5 和 CSS 功能可用浏览器支持的绝佳资源。

媒体查询和响应式设计

CSS3 中用于辅助响应式网页设计的新工具之一称为媒体查询。媒体查询允许您为用户提供相同的 HTML 内容，但能让浏览器检测设备的尺寸限制（以像素为单位），并以不同的、相关的方式布局相同的内容。您可以根据您认为用户在给定设备上的最佳消费体验，来放大或缩小文本和图像内容的宽度，增加或减少报纸风格布局中的列数，甚至完全隐藏信息片段。

通过媒体查询来决定内容布局，以及浏览器检测来识别用户体验的其他限制（例如，用户是否正在通过 Xbox 360 在大电视屏幕上与网站互动），您可以识别用户的需求，并为用户访问内容的当前情境提供正确的体验——无论是丰富地在桌面设备上消费、通过触摸在平板电脑上交互，还是在手机上快速浏览——并使用 Web 技术优雅地实现。

最棒的是，大多数现代移动设备都支持 HTML5 和 CSS3！这样，您就可以直接在浏览器中创建近乎原生的体验。除了 DRM 支持或访问某些设备特有的硬件之外，通过 HTML5、CSS3 和 JavaScript，您可以提供的体验种类几乎没有限制。查看 复古 Atari 视频游戏，以了解您仅使用符合标准 Web 技术就能构建的酷炫体验。

需要注意的是，仅使用媒体查询来构建三个不同的固定宽度布局的网站肯定可以帮助您定位当今常见的屏幕尺寸（例如，桌面、平板电脑和手机）。但是，这并不是真正的响应式网页设计。它并未为使用具有中间宽度设备的访问您网站的用户提供最佳体验，也没有为您准备下一波具有新几何形状和尺寸的“热门”设备。

一次构建！一次部署！

如果您选择投资您的网站体验，您可以设计一个单一的 HTML5、CSS3 和 JavaScript 体验，该体验可以跨越各种外形尺寸，从小型智能手机触摸屏到大型电影院显示器或电视。我们将在本系列的后续内容中详细介绍实现细节，但在此要强调的是，您永远不必选择要用哪个用户来享受那个很酷的新功能，或者要用哪个用户来保护那个高安全性补丁。

除了简化您的代码库和支持矩阵之外，这还具有以下优点。

优势 1：不落下任何用户

押注于一两个主流移动平台上的强大原生应用，可能意味着您的部分用户会转向竞争对手，如果他们提供的是在所有平台上都能触及的、更有用的 Web 体验。

优势 2：统一的广告故事

通常，当网站依赖广告收入时，它们会与业务合作伙伴互动，并零散地向他们出售广告，这取决于用户是体验完整的 Web 版本还是有限的应用版本。此外，移动设备上的广告点击率低于桌面 PC，在这种情况下，与合作伙伴互动、为原生应用创建广告素材以及销售应用特定广告位所产生的额外成本，并不能证明额外的收益是合理的。例如，MSN.com（现在已开始在其国际市场推出统一的、基于媒体查询的 HTML5 网站）现在可以统一其在所有设备类型上的广告合作伙伴故事。

通过一个单一的 HTML5 体验，可以响应式地适应不同的外形尺寸，您可以为单个广告客户提供一套相同的广告素材，以适应各种设备——无论是客厅、办公桌还是旅途中。

优势 3：将您的网站体验直接升级到您的应用体验

有时，您可能仍然会遇到一个障碍，即您想为用户提供出色的移动体验，并利用他们的独特硬件——例如，您希望用户通过摇晃手机来获取您网站的新内容。在这种情况下，您需要访问设备加速度计。

好消息是，您可以通过在您的网站内容周围应用一个包装器来创建一个原生应用，并且只需编写必要的原生应用代码来与手机上的附加硬件进行交互。例如，您可以在 iPhone 上将您的网站内容（响应式缩小后的视图）托管在 Web 视图控制器中，然后在 Objective-C 原生代码中监听加速度计事件。

这意味着，对于您在 Web 层中构建的任何修复/功能，您都不需要费心去发布应用更新！

“那么，我该如何开始呢？”

到目前为止，我们还没有讨论响应式网页设计的“如何做”。我将在本系列的下一部分详细介绍，但我希望您有机会考虑为用户提供内容的解决方案的长期优势，该解决方案由熟悉的 Web 技术编写的单一代码库组成，并拥有不断增长的开源 JavaScript 库支持、丰富的 HTML5 设备集成以及高质量的 CSS3 布局和图形支持。如果还没有，您可以随时回顾图 1中快速增长的设备列表。

本文作者是 Rahul Lalmalani。Rahul 曾是微软工程师，现为应用和 Web 开发自由职业者。您可以在 RahulJL.com 上关注他，或通过 @quasirahul 与他联系。

本文是 Internet Explorer 团队 HTML5 技术系列文章的一部分。可在 http://modern.IE 享受三个月的免费 BrowserStack 跨浏览器测试，以实际操作本文中的概念。