前言

前言

2007 年,iPhone 的发布对于网站设计来说是一个转折点,网站设计师们突然失去了对画布(我们在上面设计网站)的控制。此前,网站只是在显示器屏幕上供人浏览,尽管屏幕尺寸有所不同,但差别并不是那么大。而现在,我们怎样才能使网站在 iPhone 这么小的屏幕上供人浏览呢?

在开始的一段时间里,我们制作了专门针对 iPhone 屏幕尺寸进行了优化的移动网站,其独立于我们的“常规”网站。同时维护两个站点还不是那么糟,但大量不同屏幕尺寸的手机很快涌现出来,然后是平板电脑以及更小号的平板电脑,我们终于意识到不可能为每种可能的屏幕尺寸都制作一个网站。

我们需要一种适用于所有屏幕尺寸的解决方案,需要一种设计网站的方法,使网站能够自动适配各种显示屏幕。

一时间各种创意层出不穷,不久之后响应式网站设计脱颖而出。它是一种灵活的不依赖于固定屏幕尺寸的网站设计方法,能够检测屏幕的大小并调整设计,从而针对具体设备提供最佳的视觉体验。2010 年,Ethan Marcotte 在 A List Apart 上首次发表了关于响应式网站设计的文章(http://alistapart.com/article/responsive-web-design)。

如其他新技术一样,响应式网站设计一开始并不被人接受,许多人不断辩称——甚至于现在某些人还在这么做——我们需要为手机单独创建网站。但随着今天市场上设备的激增,很明显,我们不能依赖于一种手机模型并将其作为设计标杆。我们的设计要能够适应所有设备,而这些设备的屏幕尺寸各不相同。

而与此同时,响应式设计也在不断发展。它不再仅仅是适应屏幕尺寸,也能适应不同的设备性能,如触摸屏、视网膜显示屏,以及慢速连接。

在 2014 年,58% 的美国成年人拥有一部功能丰富并允许用户完全访问网络的智能手机,这些手机搭载了 iOS、Android、Windows Phone 等操作系统,1 且 35% 的美国成年人拥有一部平板电脑。2 我们有令人惊叹的硬件设备,而响应式设计能帮助我们充分利用网络。

1完整报告请查看 Susannah Fox 和 Lee Rainie 发表的“The Web at 25 in the U.S.”,皮尤互联网研究项目,2014 年 2 月 27 日(http://www.pewinternet.org/2014/02/27/the-web-at-25-in-the-u-s/)。

2更多信息请查看 Lee Rainie and Aaron Smith 发表的“Tablet and E-reader Ownership update 2013”,皮尤互联网研究项目,2013 年 10 月 18 日(http://www.pewinternet.org/2013/10/18/tablet-and-e-reader-ownership-update/)。

然而,尽管大多数美国成年人都有智能手机,但仍有 32% 受访者的手机不是智能手机。这之中的很多人用手机访问网络时只能使用功能受限的浏览器,这种浏览器无法如他们希望的那样显示所有网站。响应式网站设计也是这种情况下的一种解决方案。

响应式网站设计一开始只是设计简单的、注重内容的站点(不依赖 CSS 或 JavaScript),使其能显示在几乎所有的联网设备上。在此基础之上,这种设计通过渐进式增强——响应式网站设计正是基于此——针对具体的显示屏尺寸以及设备功能进行优化。因而,功能手机(也即功能有限的旧式手机)只能获得那些它们能使用的内容,而相对来说较新的智能设备所访问的网站则具有丰富的设计、完美适配其屏幕的界面,设备功能被充分利用。

响应式网站设计使我们有能力为所有用户呈现最好的网站,而不管他们具体使用什么设备。网络对每个人应该都是可用的,而响应式设计将指导我们做到这一点。

创建响应式网站并不仅仅是学习几段新代码那么简单。它还包括重新审视网站构想方式,关注用户体验,并确保内容和功能不是在设计完成之后才加上去的。

我们还必须改变网站制作方式,过渡到一个涉及设计师、开发者和其他团队成员的更具协作性的过程中去。

我们需要学习一些新的代码,但响应式设计并不是一种新的编程语言,创建一个响应式网站只需要 HTML、CSS,有时再加点 JavaScript。如果你已经知道如何制作网站,那么本书中讲到的大部分内容对你来说都会很熟悉。你需要记住,在创建一个响应式网站时,90% 的工作与创建非响应式网站时是一样的。但除了增加少许新技术,你需要掌握正确的基础知识,使用结构恰当、合乎规范的标记(HTML 和 CSS)。如果没有坚实的基础,你难以确信自己的网站能正确工作并在各种设备上恰当地显示。

如果你从事与建设网站相关的工作,不管是一名 Web 设计师、开发人员、内容策划、用户体验设计师、网站负责人、IT 主管,还是从事其他任何涉及创建和维护网站的工作,你都将从本书中知晓:响应式设计的工作原理、怎样调整自己的工作流程以适应响应式设计,以及如何创建对任何设备都能提供最佳设计与用户体验的响应式网站。

组织结构

本书分为四部分。

第一部分解释了什么是响应式设计,以及它与其他网站设计方法有何不同。我们也将介绍如何创建弹性内容,并确保它们能很好地工作于响应式网站。

第二部分概述了构建响应式站点的基础知识。我们将学习一小部分 HTML 和 CSS 知识,它们是让网站正确工作的关键。然后,我们深入介绍响应式设计的核心——媒体查询。最后,我们会看看在响应式网站中如何处理图像。

第三部分带大家看看响应式设计的工作流程,即按部就班创建一个响应式网站的过程,它涵盖了从项目启动会议开始直至网站上线运行的内容。之后我们将进一步从用户体验的角度探讨响应式设计,审视如何确保网站能在不同的输入方式(比如触摸)下工作,以及如何确保网站对所有用户都是功能完好的,包括那些使用辅助技术的用户。

最后,第四部分深入研究那些对于响应式网站需特别考虑的设计元素。我们首先从文字排版开始讲起,这是确保内容在不同尺寸的屏幕上都可读的关键。然后,我们看看如何编写响应式导航和页头。最后,我们会讨论响应式设计的一个大问题——性能,因为我们尝试让用户即使在低速连接上也能在合理的时间内加载完网站。

目标读者

本书适合每一位网站从业人员阅读参考,任何经验水平的人都能够读懂本书。

如果你是一名已经非常熟悉 HTML 和 CSS 的开发人员,那么其中一些内容对你来说一定不陌生——响应式网站设计与非响应式网站设计有很多相同之处(但区别总是存在的)。如果你在这方面没有任何经验,也不必担心,本书将会带领你从最基本的知识开始学习,同时从设计角度综述响应式设计的方方面面。

如果你从未使用过 HTML 和 CSS,那么必须去全面理解构成一个响应式网站所必需的代码,以及它们是如何工作的。不过,本书并不是一本 HTML 或 CSS 入门书,所以其中每个概念的介绍都相当简洁,不涉及太多细节。如果想学习 HTML 和 CSS,你应该参考其他书籍和资源以进行更深入地学习。但如果你在工作中并不需要编写实际的代码,只是想了解响应式设计的工作原理,本书也定将满足你的需求。

如果你介于新手和老手之间,本书将提示你制作一个网站的所有事项,并向你展示响应式设计与非响应式设计的不同之处。你所看到的不仅是代码,还有对设计注意事项的考量以及响应式设计的工作原理。

联系我们

请把对本书的意见和疑问发给出版社。

美国:

 O'Reilly Media, Inc.

 1005 Gravenstein Highway North

 Sebastopol, CA 95472

中国:

 北京市西城区西直门南大街 2 号成铭大厦 C 座 807 室(100035)

 奥莱利技术咨询(北京)有限公司

O'Reilly 的每一本书都有专属网页,你可以在那儿找到本书的相关信息,包括勘误表、示例代码以及其他信息。本书的网站地址是:

http://shop.oreilly.com/product/0636920029199.do

你可以在这里下载本书的所有代码示例:

http://www.learningrwd.com/

对于本书的建议和技术性问题,请发送电子邮件到:

bookquestions@oreilly.com

要了解更多 O'Reilly 图书、培训课程、会议和新闻的信息,请访问以下网站:

http://www.oreilly.com

我们在 Facebook 的地址如下:http://facebook.com/oreilly

请关注我们的 Twitter 动态:http://twitter.com/oreillymedia

我们的 YouTube 视频地址如下:http://www.youtube.com/oreillymedia

致谢

首先最想感谢的是 Scott Berkun,他在 2012 年于 An Event Apart Seattle3 上所做的演讲促使我辞去了办公室的工作,从而能够去做更有意义的事情。阅读 Scott 的《演讲之禅:一位技术演讲家的自白》(英文版由 O'Reilly 出版)一书后,我开始尝试做关于响应式设计的演讲,这给我带来了很多机会。Scott 还鼓励和建议我在写书这条道路上走下去,并把我介绍给了他在 O'Reilly 出版社的编辑(也成了我这本书的编辑)。没有 Scott,我很可能仍郁郁寡欢地呆在某个办公室隔间中,你也就不会读到这本书了。

3An Event Apart 是为期两天的 Web 设计会议,面向所有拥有激情的从业者。

感谢 O'Reilly 出版社的 Mary Treseler 及其他参与本书出版过程的所有工作人员。

在本书写作期间,我结了婚并移居到了一个新的国家。我的丈夫 A.J. Kandy,对于在这些重大的人生变化中还稀里糊涂地想着要写书的我一直抱有极大的耐心。我何其幸运能与这世上最棒的男人结为伴侣。

当然,也非常感谢 Ethan Marcotte,没有他提出的响应式设计理念,我也不会在今天想要写作一本这方面的书。

感谢 Matt Bradley 很早之前教我 HTML。

有几个人在我的职业生涯中竭尽所能地帮助我朝正确的方向前进,极其感谢他们的帮助:Dan Brown、Jeffrey Zeldman、Vera Rhoads 和 Cory Lebson。

也要感谢一路以来许多给我帮助,给我鼓励或建议的人们:Theresa Amato、Melissa Ballowe、Chuck Borowicz、Erica Ciesielski Chaikin、Glennette Clark、Sibyl Edwards、Veronica Erb、Brad Frost、Robert Hoekman, Jr.、Tim Kadlec、Dave Mankoff、Karen McGrane、Jeff Popovich、Chris Schmitt、Jared Spool、Anna Storkson、Sandy Tetreault、Estelle Weyl。当然,还要感谢我的父母。

感谢所有在聚会和其他团体中认识的人们,我有幸与他们一起讨论响应式设计。我开车周游美国东北部和中西部时玩得很开心,还认识了那么多了不起的人。希望将来能去更多的地方旅行,因为我想要结识太多的人。

目录