学习响应式设计——1.3　为什么是响应式设计

响应式网页设计的概念自首次提出以来一直备受热议。就像任何新技术思想一样，有些人接受它，另一些人则唾弃它。 1.3.1　每个设备都得到正确的设计 使用响应式设计最有说服力的理由是，你创建的网站不仅在现今市场上的各种设备上都能正确地工作并有良好的显示效果，而且很可能在将来出现的那些新设备上也能如此。此外，使用响应式设计，你不会冒用户可能在桌面显示器上浏览移动版站点的风险，反之亦然。 如果你有多个独立的站点，那这无疑会成为一个问题，无论你是通过设备检测来发送正确版本的站点给每个设备，还是使用一组单独的URL（比如一个m-dot 子域名）供移动版网站使用。 如果网站有一个单独的移动版本，通常会使用设备检测（其发生在网站服务器，且在页面显示之前）来确定应该将哪个版本的网页（移动版或桌面版）发送给任一特定的设备。这样，站点中的每个页面虽然只有一个URL，但实际上存在两个不同版本的HTML 页面。然而，以上这一过程并不是完全可靠，有时会发送错误的页面版本。此外，设备的检测过程也会增加页面的加载时间。 为单独的移动版站点（即m-dot 站点）使用不同的URL 是比较容易实现的，但是这要求用户访问的是正确的网站版本。对于通过社交媒体或电子邮件在用户之间来回传递的链接，获得一个正确版本的页面通常会给用户增加额外的负担，或者有时他们根本没法选择。 例如，如果一个桌面用户将《纽约时报》网站上的一个链接通过电子邮件发给一个手机用户，手机用户访问该链接时，显示出来的页面会在屏幕的上方显示一条信息，告诉他可以切换到网站的移动版，如图1-7 所示。这看上去不错，但用户需要执行额外的操作，花费额外的时间来点击并加载一个完全不同的页面。 图1-7： 在手机上访问桌面版《纽约时报》网站的一个链接，显示的是桌面版站点并包含一条可切换至移动版的提示消息 另一方面，如果我用手机访问《纽约时报》的移动版网站，并发送一篇文章的链接给某人，他在台式电脑上打开链接时，看到的将是为移动设备优化的移动版页面（如图1-8 所示），页面中没有清晰明确的方式告之应该如何打开完整的桌面版站点。用户可以读这篇文章，但他必须通过点击来查看图像的全尺寸版本，而且他无法看到存在于桌面版网站中的大量补充链接和推荐文章。 图1-8：点击《纽约时报》手机版上的链接将进入手机版的页面，即使你使用的是台式电脑 对于响应式设计，你的网页只有一个版本，所以你永远不会遇上“错误的版本”这个问题。无论在什么设备上浏览该网站，都能得到正确的显示。 1.3.2　更少的工作 使用响应式设计最明显的优势是，无论是网站、设计、代码还是内容，你都只需要创建一份。 如果你的网站有一个单独的手机版站点，你需要创建和维护两套（或更多）完全独立的HTML 页面。任何改动都需要对每一个站点进行同步修改，即便你试图让它们保持一致，也几乎肯定会出问题，某些事物最终将变得不再匹配。尽管使用内容管理系统（CMS）或模板系统可使这项工作变得容易些，但还是有更多的代码和内容要维护，更多的事情可能会被弄乱。 对于响应式网站，你只有一套内容，无论屏幕大小总能恰当地显示。未来的设计调整也能够通过更改样式表来达成。 对于那些没有响应式设计经验的人，起初创建一个响应式网站（你学会了一切如何工作）可能比创建一个固定宽度的网站要付出更多的努力，但从长远来看，你在网站以后的维护工作中将更轻松。 1.3.3　搜索优化 一个单独的手机网站具有一组独立的URL，这会影响你的网站在搜索结果中的排名。 如果你有两个不同版本的页面，它们具有相同或相似的内容，但URL 不同（例如，http://www.example.com 和http://m.example.com），则搜索引擎需要知道它们是被当作同一个页面，从而使得该页面可以被正确索引并在搜索结果列表中显示为一个条目。 虽然这可以通过使用JavaScript 或服务器端代码来实现，却显得有点复杂，并且如果你做得不正确，最终可能导致两个版本的页面都出现在搜索结果中，从而给用户造成困惑，还可能对你的搜索排名造成负面影响。 谷歌自2012 年以来开始推荐将响应式设计用于为智能手机优化的网站，不仅因为它能创建一个更好的用户体验，还因为它允许谷歌的网站爬虫更有效地检索你的内容，这意味着对网站所做的改变将会更快地在搜索结果中得到更新。 必应推荐网站使用必要的方法来确保仅产生一组URL，但没有明确推荐使用响应式设计来做到这一点。