第 1 章 什么是响应式设计

第 1 章 什么是响应式设计

现在,网络世界中的所有人几乎都听说过响应式网页设计(通常称为 RWD,即 Responsive Web Design 的缩写),但大部分人并没有很好地理解它是什么。

在本章中,你将学习响应式网站的基础知识。之后,我们将简述网页设计的简史,以便你理解响应式设计的思想来自哪里,以及它与旧网页设计方式之间的差异。

我们还会讨论为什么对于制作能很好地工作于不同设备与屏幕尺寸的网站而言,响应式设计通常是最佳选择,以及为何从长远来说它意味着更少的工作。我们也会介绍选择响应式设计的一个不太明显的效果:它对你的搜索引擎排名的影响。

1.1 一点儿基础

如果你拿起本书,是因为你听说过响应式设计,但还不是很明白它到底是什么,本节将帮助你了解响应式设计的基本知识。

即使你有一定的响应式设计经验,也可能觉得很难用通俗的语言向别人解释它。本节将给你一个更好的主意,告诉你如何向用户、客户、非技术团队成员或你的妈妈(她很好奇,想知道你每天在工作中都做些什么)解释响应式设计。

总的来说,响应式设计是一种方法,使网站可以在任何类型的设备和任何尺寸的屏幕上(从最小的手机直至最宽的桌面显示器)轻松浏览和使用。

最简单的解释方式是比较响应式网站与非响应式网站,并看看这两种类型的网站在智能手机上的浏览效果。

想象你正使用你的智能手机浏览一个固定宽度的网站,即一个被设计成总是以一个固定的宽度(比如 960 个像素)来显示的站点。你将看到整个网站就如同它在你的桌面显示器上显现的一样,但它最初以一个微小的尺寸进行显示,以适应屏幕。你频繁地放大和缩小它,以便阅读文字和浏览网站,如图 1-1 所示。这需要许多额外的操作。

{%}

图 1-1:在手机上浏览一个固定宽度的网站时,需要放大文本才能看清

有些网站有一个移动版站点,独立于常规的桌面网站。在你的智能手机上浏览此类网站时,它以全尺寸显示(不必进行缩放),但你时常会发现它与你在桌面显示器上浏览的同一网站有很大不同——通常缺失很多内容,网站拥有者因此可以减少维护多个版本网站所产生的额外工作。

此外移动版网站通常是为一个特定尺寸的设备(如 iPhone)制作的,因此如果你有一个不同的设备,该网站可能就无法很好地适应屏幕了。

单独的移动网站通常是为某一大小的设备所优化的,但是市场上有很多不同的设备,构建一个只能工作于一种设备上的移动网站可能意味着抛弃了所有使用其他不同设备的用户。

举一个例子,宜家(IKEA)有一个单独的移动网站,是为某一尺寸的手机优化适配的。在图 1-2 中,上方是宜家桌面站点的导航栏,左下方是该站点在 iPad 中的样子,右下方是该站点在 iPhone 中的样子。

{%}

图 1-2:宜家桌面站点(上方)与你在 iPad 上(左下)所看到的是一样的,而 iPhone 则显示一个特别的移动网站(右下)

三个屏幕截图都是按比例缩小的,你可以比较在不同尺寸屏幕上所看到的内容。在 iPhone 上浏览的是移动版网站,只显示几个导航链接,但它们与桌面网站上的链接有相似的尺寸大小。而在 iPad 上,你浏览的是桌面网站而不是移动版网站,所有内容都被缩得非常小以适应小屏幕。你必须做许多缩放操作来浏览该网站。

宜家公司做了大量工作来创建一个良好的移动网站,但如果你的设备是一台平板电脑,你没法使用它,也不会获得满意的体验。如果宜家有一个响应式网站,就能够保证人们使用任何尺寸的设备都能获得一个合适的界面。

采用响应式设计时,网站仅有一个版本,因此你能浏览全部的内容,且网站会自己重新排列以完美地适配任何尺寸的屏幕,并具有全尺寸文本,那样你就无需进行缩放操作了,如图 1-3 所示。

图 1-3:在手机、平板及桌面显示器上浏览一个响应式网站

这里有很多技术细节(稍后我们将讨论),但从用户的角度来说,描述一个响应式网站的关键是网页内容可以自动改变大小和移动位置以适配显示它们的屏幕。

1.2 简史

在学习响应式设计是如何产生的之前,了解一点网页设计的历史是有帮助的。

1.2.1 固定宽度设计

几年以前,网站是被设计成固定宽度的,以便很好地适配最常见尺寸的台式机和笔记本的屏幕。在 2000 年,这意味着设计的屏幕宽度是 800 像素(一个像素是屏幕上一个彩色发光的小点),到 2005 年前后,大多数显示器是 1024 像素宽。

尽管大多数显示器通常就是那几种固定的尺寸,但市场上还存在一些更宽的显示器,也有些老式的窄屏显示器仍在使用。网页设计师希望他们的设计在所有显示器上看起来都完全相同,所以他们通常会设计一个固定宽度的网站以适应最常见的显示器尺寸,如 960 像素宽的网站在 1024 像素宽的屏幕上无疑是适合的。在更大的屏幕上,网站则会简单地以空区域(设计术语为空白)来填充两边的额外空间,如图 1-4 所示。

{%}

图 1-4:固定宽度的 MSN 站点在任何尺寸的屏幕上都是相同的宽度,当屏幕比站点宽时两边会留出空白

这种固定宽度的设计如今仍是相当普遍的。

流动设计(fluid design)和流式布局(liquid layout)的想法在 21 世纪初吸引了不少注意力。这些技术所采用的基于百分比的宽度使得设计的网页能以流式方式适应屏幕的宽度。因此它可以充分利用大屏幕的可用空间。尽管这在理论上听起来不错,但这种放弃对宽度控制的设计最终意味着,在宽屏幕上网站将变得超级宽而且栏目分得非常开,这令大多数 Web 设计师仍然坚持使用更容易处理的固定宽度的设计。

1.2.2 移动Web浏览

手机首次能访问因特网是在 20 世纪 90 年代中期,它们通常并不具备显示实际网站的能力,而只能显示文本数据,比如天气预报、股票报告和比赛得分。最初的移动浏览器只能显示基本的 HTML 格式,且通常是黑白而不是彩色。直到 2005 年左右,在更先进的称为智能手机的设备上(比如图 1-5 中所示的 iPhone),移动浏览器才能够显示使用了 CSS2 和 JavaScript 技术的“真正的”网页。

{%}

图 1-5:iPhone 4S

2007 年发布的 iPhone 改变了游戏规则。它有一个漂亮的界面,可以利用当时所有的 Web 技术显示网页,如它们在全尺寸显示器上所显示的一样。

虽然触屏设备已经存在多年,但 iPhone 是第一个采用多点触控技术的移动设备,能同时识别屏幕上的多个触点——这对我们现在习以为常的诸如捏合以缩放等浏览行为来说是必不可少的。

所有这一切令 iPhone 不断被评为那一年最具革命性的产品之一,但仍有一个问题存在。网页是设计来在全尺寸显示器上而不是在小手机上浏览的,因此几乎所有网页都是 960 像素或者更宽。另一方面,iPhone 的屏幕只有 320 像素宽。苹果的解决方案是自动收缩网页以适应屏幕的浏览区域(视口),然后允许用户通过双击或捏合手势缩放页面的任何区域。

但一次只能浏览页面的一小块无法产生好的用户体验。

网页设计师知道,这对于使用网络的人们来说不是一个最佳方式,他们需要找到一种方法使得网页能更容易地在 iPhone 的小屏幕上浏览。

1.2.3 移动网站

因为设计师习惯于制作固定宽度的网页,所以最简单明了的解决方案是制作单独的移动版网站(具有一个固定的页面宽度,适配 320 像素宽的屏幕,而不是常见的 1024 像素宽的显示器),如图 1-6 所示。

{%}

图 1-6:华盛顿邮报网站的桌面版和手机版

如果用户使用的是手机,通常会被自动重定向到移动版网站。否则,可以通过点击一个链接来选择去移动版网站,或者通过一个不同的 URL 访问移动版网站,通常使用 m 子域名(比如 http://m.sprint.com)。这种做法使得这些单独的移动版网站被称为m-dot 网站

当然,这对 Web 团队意味着额外的工作,但他们通常会简化这项工作,把移动版网站做成标准网站的精简版:只具有一小部分内容,如图 1-6 所示。

他们的理由是:手机只是在“四处奔走”或某些基本活动中才使用。这在当时对大多数用户来说可能是对的。但随着手机越来越普及,人们开始使用这些设备来执行越来越多的任务,而他们之前仅在台式机或笔记本电脑上执行这些任务。

1.2.4 更多的设备

做一个“iPhone 网站”,他们如是说。起初,在 iPhone 是智能手机市场仅有的霸主玩家时,这种方式很好。但没多久,其他手机公司很快紧跟潮流,推出它们的产品以应对 iPhone。

但这些新的智能手机并非都拥有相同的尺寸。相对于 iPhone 的 320 像素宽度,许多拥有更窄的屏幕(240 像素或更少),另一些则拥有比 iPhone 更宽的屏幕(特别是那些被设计成水平握持而不是垂直握持的设备)。320 像素宽的 iPhone 版网站并不能很好地适应那些屏幕。

因此网页设计师开始尝试寻找一种解决方案:我们怎么制作一个网站,使其能用于所有尺寸的屏幕?这没有简单的答案。

到了 2010 年,苹果发布了 iPad,再一次改变了游戏规则。移动版网站太小,不能充分利用 iPad 更大的屏幕空间,但桌面尺寸固定宽度的网站对于以纵向模式浏览的 iPad 来说又显得太大了。

尽管有些设计师的反应是创建单独的 iPad 网站(现在他们已经有三个独立的网站了),但大多数人意识到,随着越来越多的各色尺寸的设备上市,为每一种可能的屏幕尺寸创建单独的网站不再是一项可持续下去的工作。

1.2.5 媒体查询

网页设计社区重拾流式布局的理念,使用基于百分比的宽度,并设法让其成为一种适用于小型移动设备的解决方案。

使用百分比而不是像素使得网页及页面各部分都能够自动改变宽度来适应任意屏幕尺寸,因此也就很容易地消除了相似尺寸设备之间的差异。

但是一旦你纵观所有的设备,就会有这样一个问题。如果要缩窄三栏的布局以应用于智能手机的屏幕宽度,那么各栏中的文本会变得窄而长,难以阅读。同样,单栏布局在智能手机屏幕上看起来是蛮好的,但要想在桌面显示器上轻松阅读则显得太宽了。

本质上,这个问题是:不创建多个单独的站点,如何使一个网站能够在窄屏上以单栏显示,而在大屏上以多栏显示?如何根据浏览网站的设备的特性来要求浏览器变换网页的布局?

媒体查询登场。

CSS 的 @media 规则允许你根据设备特性而显示不同的 CSS 样式,这实际上在十多年前的 CSS2 中就有了,但当时它只支持查询媒体的类型,比如屏幕(screen)或打印(print)。这通常只能用于为网站设计创建一个打印版(可能包含的变化也仅仅是去除背景色,以免浪费打印机墨水)。

直到 CSS3 对媒体查询制定了规范(即关于某事必须怎样做的一个正式详尽的描述),才能够基于媒体(设备)的宽度、高度和色彩性能等特性执行更精确的查询。媒体查询不影响 HTML(页面之下的实际内容和结构),只影响使用 CSS 后应用到页面的样式。浏览器在 2009 年前后开始支持 CSS3 媒体查询。

媒体查询可以做什么呢?

举个基本的例子,假设我们有一个网站,有两块各自独立的内容。我们可以创建一个很适合智能手机的单栏设计,以垂直堆叠的方式显示两块内容。而在更宽的屏幕上,我们可能想要以并排的两栏来显示这两块内容。

使用媒体查询,我们可以询问设备屏幕有多宽,然后告诉浏览器仅在屏幕具有足够宽度时,才以两栏来显示内容。

要用代码来实现这种效果,我们在开始只是用 CSS 将内容显示在一栏中,然后再添加一条 CSS 媒体查询,询问屏幕宽度是否大于等于 40 em(你将在第 4 章中了解 em,40 em 的宽度略窄于一台常见的平板电脑,但你可以在媒体查询中指定任一宽度)。

之后我们会在这条媒体查询中添加 CSS 样式将内容显示在两栏中。浏览器仅在该媒体查询结果为真时(即如果屏幕宽度大于等于 40 em)才使用此 CSS 样式。如果屏幕宽度小于 40 em,它会忽略此 CSS 样式,内容保持在一栏中。

因此,我们可以针对不同的屏幕尺寸使网站变换为不同的布局,而无需创建单独的网站。

通过使用媒体查询,我们可以随心所欲地改变网站的样式,不仅仅是栏数。媒体查询可以移动内容,改变文字的大小,隐藏或显示内容块,调整边距和空白,以及调整其他的 CSS 样式。

[小贴士]

在这一节中,我提到了询问设备屏幕宽度的媒体查询。实际上,在响应式设计中常见的媒体查询是询问设备的视口宽度,而不是屏幕宽度。视口是屏幕上(浏览器窗口中)显示网站的区域。

在台式电脑上,你可以改变浏览器窗口的大小,因此,窗口并不总是屏幕的最大宽度。媒体查询会检测浏览器窗口内的空间,所以如果你改变了浏览器窗口的大小,你的视口也会发生变化。在移动设备上,你无法改变窗口的大小,所以屏幕和视口总是相同的宽度。

尽管正确的术语应该是视口宽度,但你仍会经常听到人们在谈论媒体查询和响应式设计时说到屏幕宽度。从技术上讲他们说得并不正确,他们很可能指的是视口宽度(正如我在本书中所做的,除非我明确指出)。

还有其他的媒体查询,可以检测设备屏幕的实际宽度而不是视口宽度,但在目前它们并不常用。

1.2.6 灵活性

媒体查询可以重排你的页面布局,但如果没有灵活性做基础,响应式设计将无法工作。

首先,在你的站点中几乎每一种水平度量都需要采用灵活的单位,而不是僵化的像素。这意味着各栏的宽度和其他布局元素将以百分比定义,文本则以一个叫作 em 的相对单位来定义。

缩放页面上的图像这一工作有点不同,因为你不一定想让它们按照屏幕的宽度来改变大小,而是希望只要屏幕上有空间,图像就可以显示得足够大以便看清细节。可问题是,依据设备屏幕的大小,并不总是有足够的空间来以全尺寸显示一个图像。你需要确保图像在没有足够空间的情况下不会被截断。在第 6 章中,我们将学习一个 CSS 技巧来确保图像总是能够与我们放置它的空间相适应。

1.2.7 响应式网页设计

这些思想(媒体查询或灵活性)本身都不是新的或开创性的思想。但在 2010 年,网页设计师 Ethan Marcotte 琢磨出来一套组合使用这些概念来制作网站的方法,能够自动对不同的屏幕尺寸做出响应。

Marcotte 创造了“响应式网页设计”这个术语,并于 2010 年在一篇为 A List Apart 撰写的文章(http://alistapart.com/article/responsive-web-design)中首次提及,随后在 2011 年其撰 写的 Responsive Web Design 一书得到出版(http://www.abookapart.com/products/responsive-web-design1)。

1中文版参见人民邮电出版社的《移动优先与响应式 Web 设计》。

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,但没有明确推荐使用响应式设计来做到这一点。

1.4 总结

在引入响应式设计之前,网站通常都是固定宽度的,这意味着网站的设计无论在多大的屏幕上都是以相同的宽度显示。在智能手机出现后,这就真的行不通了,因为网站在小屏幕上显得很小,用户必须不断地进行缩放来阅读内容。

移动网站紧接着出现了,许多公司独立于它们的主站点(或称为桌面站点)创建了第二个网站。移动网站通常只包含主网站上的一小部分内容和功能,所以手机用户对其并不感冒。

随着越来越多的设备出现,设计师们很快意识到创建多个网站以适应每一种不同尺寸的屏幕,即使不是不可能的,也是不切实际的。响应式设计的概念被引入,它使得网站能够响应设备的宽度,并以一种适合于屏幕尺寸的方式来显示网站的内容。

响应式网页设计包含两个主要部分:灵活性,也就是说水平度量需要使用相对单位,比如百分比,这样它们才能对不同尺寸的屏幕做出响应;媒体查询,其允许你基于设备的屏幕宽度,用 CSS 来改变网站的设计。

响应式设计允许你只用一套代码就能为任意屏幕尺寸的设备提供一个合适的设计。不必维护多套不同的代码意味着更少的工作。同时,应用响应式设计意味着你的网站是为搜索引擎优化了的。

接下来,我们将在第 2 章中介绍内容的重要性,以及如何确保设计出在响应式网站上有良好显示效果的内容。

目录