响应式Web

响应式Web
书籍作者:
[美] Matthew Carver
书籍出版:
电子工业出版社
书籍页数:
332
书籍ISBN:
9787121274442
书籍人气:
876
推荐指数:
★★★★

响应式Web
编辑推荐

  书中实践源于多年生产环境的经验总结,绝不是赘述纯理论知识,而是教你在实践中如何开展响应式设计工作。你将学会利用已知的HTML5和CSS3新特性来进行创新设计,然后找到权衡APP和Web以及处理浏览器兼容性的方法。《响应式Web》为专业的设计师和开发者创造前端Web界面而生。

  《响应式Web》内容涵盖:

  * 响应式设计概念

  * CSS预处理器

  * 快速原型技术

  * 流式布局

  * 渐进增强设计

内容简介

  《响应式Web》全面介绍了响应式设计的概念以及技术技巧,由浅入深地讲解了其中原理性的知识。第1部分从开发者和设计师的角度介绍了响应式设计的基本概念。第2部分从开发者与设计师协作的角度介绍了如何进行响应式设计。第3部分对编码技巧和实战优化进行了介绍。

  响应式设计是一种新的设计理念,需要你不断地学习、探索、实践。它会让你的网页内容在不同设备上展现得更加精彩。

作者简介

  Matthew Carver,是一名技术专家、演讲者、作者和提倡设计和技术相融合的顾问。他是响应式Web 设计早期的拥护者,曾参与过American Airlines、Dallas MomoingNews、Chobani、Home Depot 和Google 等公司的给生活带来革新的项目。Matthew最初在德克萨斯州达拉斯市的Richards Group 工作,现在与他的伙伴一同在纽约市成立了一家数字公司,他们会把一些想法发布到线上。他的个人主页为 Matthew-Carver.com,Twitter 账号是@matthew_carver。


  王鹤,系统架构设计师,吉他手。从事过JavaEE的企业应用的研发和架构工作,一直关注HTML5技术的发展,2011年至今一直维护开源图表项目ichartjs。目前就职于美团网,任职前端技术专家,秉承的信念是“技术这条路上虽然崎岖,但值得坚持”。


  罗创杰,美团网研发工程师,专注于前端领域,喜欢从容不迫地写代码——很优雅的那种。

精彩书评

  ★我一直认为响应式不是万能的,阅读完本书你可以了解到响应式Web 的精妙所在,你会更加理解什么情况下可以并且应该使用它。这本书从响应式每个部分的原理讨论出发,并手把手地从设计到编码给出每一步的细节,相信每一位读者都能从中获益。

  ——鬼道/ 徐凯,天猫技术专家,《跨终端Web》作者

  ★在移动互联网时代,响应式Web 是每个前端工程师所必备的技能之一。这本书不仅有原理的介绍,而且还讲解了各种场景下响应式页面的实现方法,每个案例都很实用。响应式Web 的体验是否优秀,在很大程度上取决于设计,难能可贵的是,这本书作为一本技术书籍对响应式设计也花了部分篇幅进行讲解。

  ——赵文博,奇虎360 奇舞团技术经理

  ★在设计师的眼里,移动互联的发展从某种意义上来说就是交互媒介和屏幕适配的更新和多样化。我们的Web 产品设计面临着一场智能化的革命,因为用户对产品的要求已经今非昔比:从光标到指尖;从PC 到移动设备;从横屏到竖屏……这种种碎片化的局面一度让设计师苦不堪言,甚至无从下手。因此,响应式设计技术的出现无论对设计师还是开发者来说都是一个福音,我们现在真正需要的就是抓住这个机会,利用这个划时代的技术打造出更适合移动互联用户的Web 产品。因此在我看来,这样一本著作的出现实在是一场“及时雨”,它告诉了我们设计师和开发者如何更好地合作,以及更充分地利用这个“利器”打造更完美的Web 产品。

  ——赵大羽,智捷课堂联合创始人,UE/UI 专家,高级讲师

  ★惊叹一种优雅的代码可产生多种精美绝伦的页面。在资源有限的前提下,响应式Web 设计为我们提供了支持业务快速迭代可行性的解决方案。本书不仅详解了响应式设计的概念,还引入了大量的实战技巧,这使得设计师和开发者可以非常容易地应用响应式Web 设计。推荐涉及移动设计方面业务的读者阅读本书,让我们一起享受响应式Web 设计带来的乐趣吧!

  ——张鹏,王府井百货集团技术总监

  ★精彩绝伦且受益匪浅!

  ——James Bisiar,Digital Solutions

  ★强烈推荐!可以丰富你的Web设计实践经验。

  ——Gregor Zurowski,Sotheby’s

  ★让精美绝伦的网站展现在你的任何设备上!

  ——Daniele Midi,whitelemon design studio

  ★精彩,设计师和开发者协作的不错实践。

  ——Roberto Alarcon,InnovoCommerce

  ★为移动设备进行设计的经典教科书!

  ——Benoit Benedetti,University of Nice

目录

第1部分 响应式之道

1 开启响应式之路 3

1.1 初探响应式Web . 5

1.1.1 什么是响应式 Web 5

1.1.2 关键特性 8

1.2 构建第一个响应式网站 10

1.2.1 创建网站原型 11

1.3 响应式布局基础 18

1.3.1 移动优先标签 19

1.3.2 在 CSS中使用百分比 . 24

1.3.3 添加文本和图像 28

1.3.4 强大易变的 em 30

1.3.5 设置第一个断点 33

1.4 总结 34

1.5 讨论的观点 35

2 移动优先的设计 37

2.1 为何选择移动优先设计 38

2.1.1 移动优先设计的优点 39

2.1.2 移动优先设计的挑战 40

2.2 为小屏幕设计头部 42

2.2.1 创建头部 42

2.3 设计触屏界面交互 44

2.3.1 简约的小屏幕网格 45

2.4 为小屏幕设计内容 47

2.4.1 在布局中使用 Web字体 . 48

2.5 总结 51

2.6 讨论的观点 . 51

第2部分 响应式Web设计之旅

3 使用样式板表达设计 55

3.1 利用设计指南进行可视化设计 56

3.1.1 设计指南是什么 57

3.1.2 开发一个设计指南 58

3.1.3 样式板:创建一种视觉语言 59

3.2 如何创建一个样式板 60

3.2.1 获得反馈 61

3.2.2 设计样式板 61

3.2.3 创建样式板 63

3.2.4 利用样式板进行迭代设计 68

3.3 模型之死 . 69

3.4 总结 70

3.5 讨论的观点 70

4 响应式用户体验设计模式 . 71

4.1 一级导航 73

4.1.1 toggle导航模式 . 74

4.1.2 select menu导航模式 79

4.1.3 toggle导航和 select menu导航的比较 81

4.2 多级toggle导航 82

4.3 响应式用户体验设计模式资源 87

4.4 总结 87

4.5 讨论的观点 88

5 响应式布局. 89

5.1 利用百分比进行流式布局 90

5.1.1 CSS中的百分比是如何工作的 90

5.1.2 box-sizing . 94

5.1.3 流式网格系统 97

5.2 构建一个流式布局 101

5.2.1 解读原型 101

5.2.2 开始编码 102

5.2.3 让 off-canvas元素动起来 . 105

5.2.4 使元素具有响应性 106

5.2.5 拓展到更宽的视图 109

5.3 总结 110

5.4 讨论的观点 110

6 添加内容模块和排版.113

6.1 添加内容模块 115

6.1.1 创建有用的内容占位符 116

6.2 响应式设计中的排版 121

6.2.1 嵌入式字体 121

6.2.2 设置一个排版基础 123

6.3 总结 . 126

6.4 讨论的观点 126

第3部分 用代码来延伸设计

7 用CSS在浏览器中增加图形129

7.1 利用CSS实现设计 . 130

7.1.1 CSS基础 131

7.1.2 在流体结构中维持比例 133

7.2 在你的设计中使用icon字体 . 136

7.2.1 在用户界面中使用雪碧图 137

7.2.2 基于字体的用户界面图形 138

7.3 使用可缩放矢量图形 140

7.3.1 为页面添加 SVG图像 141

7.3.2 用 CSS实现 SVG 144

7.3.3 SVG格式的局限性 . 146

7.4 总结 147

7.5 讨论的观点 148

8 渐进增强和Modernizr的过时控制149

8.1 技术性过时 150

8.1.1 渐进增强 150

8.1.2 优雅降级 154

8.2 Modernizr是什么 . 155

8.2.1 初始化 Modernizr 157

8.2.2 利用 Modernizr写跨浏览器的 CSS . 159

8.3 用Modernizr进行JavaScript特性检测 162

8.3.1 检测触摸能力 163

8.3.2 使用 Modernizr.load和 yepnope . 164

8.3.3 创建定制的 Modernizr测试 . 165

8.4 在网站中添加Modernizr . 166

8.5 总结 169

8.6 讨论的观点 170

9 响应式网站的测试和优化 171

9.1 什么是响应式测试 172

9.1.1 模拟测试环境 172

9.2 用于测试的浏览器工具 176

9.3 使用Web审查器 . 177

9.3.1 掌握 Web审查器 . 178

9.4 降低请求时间的技巧 182

9.4.1 减少 HTTP请求 183

9.4.2 用 Base64编码减少图片请求 184

9.4.3 加载速度的优化清单 184

9.5 总结 . 186

9.6 讨论的观点 . 186

附录A 设计中的上下文感知计算 .187

A.1 移动应用中的上下文感知 . 188

A.2 Web中的上下文感知 189

A.2.1 上下文断点 190

A.2.2 创建上下文测试 192

A.2.3 CSS上下文 195

A.3 总结 196

附录B Foundation框架

(可在www.manning.com/TheResponsiveWeb获取。)

前言/序言

  推荐序

  在互联网大潮的背景下, PC端加速向移动端迁移: 2012年 12月底,我国网民规模达到 5.64亿,互联网普及率为 42.1%,其中手机用户占网民总数的 74.5%。2014年,智能手机全球出货量达 12.86亿部,同比增长 28.0%。截至 2015年 1月,全球接入互联网的移动设备总数超过 70亿台,几乎平均全球人手一台。作为最主要的移动终端设备,智能手机仍然保持高速增长,皮尤研究中心(Pew Research Center)近日对调研公司 comScore今年 1月份的流量数据进行了分析,评出了美国最受欢迎的 50大新闻网站。这些数据显示,在这 50大新闻源中,大部分网站的移动流量已超越 PC流量。随着越来越多的智能移动设备加入到互联网中来,移动互联网不再是独立的小网络了,而是成为 Internet的重要组成部分。各种移动设备的发展导致每种移动设备都希望拥有适合自身的网页。但是 Web设计和开发几乎无法追赶上设备与分辨率的更新,但是如果不能满足各种设备下用户的使用,就会流失掉用户群,这可谓是一个巨大的挑战。

  2010年 5月,伊桑 ·马科特( Ethan Marcotte)在 A List Apart写了一篇开创性的文章,题为 Responsive Web Design,文中援引了响应式建筑设计的概念— —响应式架构( responsive architecture),并提出:物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构,还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产“智能玻璃”:当室内人数达到一定阈值时,这种玻璃可以自动变为不透明,确保隐私。

  如果将这个思路延伸到 Web设计领域,我们就得到了一个全新的概念——响应式 Web设计。我们何必要为每个设备各自打造一套设计和开发方案?和响应式建筑相似, Web设计同样应该做到根据不同设备环境自动响应及调整。马科特利用三种已有的工具:流动布局、媒体查询和弹性图片创建了一个在不同分辨率屏幕下都能漂亮展示的网站。

  响应式设计的核心正是使用百分比布局创建流动的弹性界面,使用媒体查询来限制元素的变动范围。响应式 Web设计的理念是:页面的设计与开发应根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。无论用户正在使用笔记本还是 iPad,页面都应该能够自动切换分辨率、图片尺寸及相关脚本的功能等,以适应不同设备。换句话说,页面应该有能力自动响应用户的设备环境,响应式网页设计就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这样,我们就不必为不断到来的新设备做专门的版本设计和开发了。我们可以将不同联网设备上众多的体验,当作是同一网站体验的不同侧面来对待,而不要为每种设备进行单独剪裁而使得设计彼此断开,这才是我们前进的方向。

  随着智能终端的普及,响应式网页设计被许多网站广泛使用,而且其优势和趋势均已经被普遍认可。

  .开发、运营成本低:相同的页面针对分辨率的不同、设备环境的不同进行了一些不同的响应式设计,所以在开发维护和运营上,相对同时开发多个版本的成本会降低。

  .兼容性好:移动设备的尺寸参差不齐,版本定制通常只适用于固定规格的设备,如果新的设备分辨率变化较大,通常不能兼容,若要开发新的版本,则需要时间,但是响应式设计可以提前预防这个问题。

  .方便改动:响应式设计是针对页面的,可以只对必要的页面进行改动,其他页面不受影响。

  在 Matthew Carver的著作 The Responsive Web一书中,作者以一种易于接受的方式,为读者介绍了现代化的 Web设计,以及响应式设计的重要性。本书共分为 3个部分。第 1部分简明扼要地介绍了响应式设计是什么、它为什么会出现,以及现代化 Web浏览器中的哪些特性促成了响应式 Web设计的出现。这部分内容也谈到了“移动优先”这一概念,使用这种概念进行网站设计时,首先按照某个移动设备的断点进行设计,随后再转而设计它的桌面版本。第 2部分开始介绍如何设计响应式 Web。Carver首先讲解了一些如何为客户展示设计思想的技巧,而不是直接跳到代码的编写部分。他以导航的设计作为入口,介绍了设计模式的使用,以及如何创建响应式页面的思想。接下来的部分涵盖了如何进行实际的响应式设计的某些基本原理,以及用以展现信息的某些现代技术,例如 Web排版。本书的最后一部分介绍了一些高级技术,对于因各种浏览器的不同行为所造成的问题提供了有效的解决方案。在本书的结尾部分,作者对于设计的测试,以及如何进行性能优化方面提供了一些实际建议。

  响应式设计在 2012年被提的比较多,但是响应式设计仍然在不断变化,不断创新,各种 Web的响应式设计也获得了越来越多的关注。比如,新的设备不断被创造出来(iPad Mini、iPad Pro),另外 iOS 9新增的 Split View也让页面的展示尺寸有了更多的可能性,这让以前的设计想法土崩瓦解。“让人们忘记设备尺寸”的理念将更快地驱动响应式设计,响应式设计归根结底不是一种技术,而是一种设计思维方式,即刻起,打开本书开始拥抱响应式 Web的设计开发吧。

  郭凯美团网前端负责人

  译者序

  迈克尔·塞勒(Michael Saylor)所著的《移动浪潮》一书中有这样一段话:“一项真正颠覆性的技术出现了,而且它将彻底改变商业、社会或经济。它在多个层面产生非线性的影响,而且其影响巨大,以至于很难在尘埃落定之前确定其影响范围。 ”

  以 iPhone为代表的移动设备便是具有代表性的颠覆性产品,它带来了令人惊叹的用户体验。早在 2009年的时候,我所负责的项目便涉及了移动 Web开发。虽然那时只是一个简单的 OA审批页面,但为了能在 PC和手机上显示,我们使用了独立的两套模板。随着业务的不断深入,类似的需求越来越多。这样需要维护的“双胞胎”页面也越来越多,制作及维护代价越来越大。直到我拜读到伊桑·马科特( Ethan Marcotte)关于流动布局介绍的文章后,方才茅塞顿开。根据其设计思想加上少量的 JavaScript代码实现了可以兼容 PC和移动端的页面,当然现在看来,那时的页面和技术还略显粗糙,但是已经令我兴奋不已。

  转眼间到了 2010年 5月,伊桑 ·马科特在 A List Apart上发表了一篇题为“响应式 Web设计”(Responsive Web Design)的文章,他利用三种工具创建了一个在不同分辨率屏幕下都能完美展示的网页。它们分别是:流式布局、媒体查询和弹性图片。这种设计思想将我们带入一个新的时代,让我们先来认识一下响应式 Web设计的“三剑客”。

  流式布局

  与传统的固定布局以像素单位为主不同,流式布局以百分比单位为主,这样便可以设计出更具灵活性的布局方式。如: Bootstrap移动设备优先的流式栅格系统。

  媒体查询

  媒体查询是与设备相关的技术,它可以让你查询到设备的各种属性值,如:设备类型、分辨率、屏幕物理尺寸及色彩等。从而决定应用不同的样式,给出求同存异的布局 /样式方案。

  弹性图片

  弹性的含义可表述为,图片可以根据当前的视窗自适应展示,图片的视觉表现力非常突出,因此弹性图片的布局与适配非常重要,这里所述的图片包含了以图片为代表的图形或者媒体元素:图片、图标、图表及视频等。

  基于上述工具进行响应式 Web设计,可以使用以下两种设计模式。

  设备优先

  断点是为了适应各种设备的宽度值,技术上是基于媒体查询来判定当前设备的宽度,从而可设计多套样式来满足不同设备的视觉展示需求。因此设计模式是基于设备的。

  移动优先

  移动优先允许你优先考虑内容并更早地关注你的网站的最重要部分。某些时候,移动优先也许与“内容优先”同义,从核心上说,移动网站策略就是内容策略。由于大小、功率和带宽等限制,移动 Web设计 90%是内容性设计, 10%是装饰性设计。所以我们要根据内容的可读性、易读性来确定断点,从而无视设备。因此设计模式是基于内容的。

  本书简介

  本书全面介绍了响应式设计的概念以及技术技巧,由浅入深地讲解了其中原理性的知识。共分三个部分。

  第 1部分

  从开发者和设计师的角度介绍了响应式设计的基本概念,让你能快速地对响应式设计有基本认知和了解,涵盖了媒体查询、断点、移动优先、字体等知识。为开始构建响应式网站提供了必要的背景知识。

  第 2部分

  从开发者与设计师协作的角度介绍了如何进行响应式设计,让你了解在响应式设计中团队应该如何进行协作来完成一项成果。同时用了一个示例来阐述这个过程,涵盖了样式指南、设计模式、布局、排版、网格等知识。最后对面对多种终端设备如何组织内容模块进行了深入探讨。

  第 3部分

  这部分对编码技巧和实战优化进行了介绍,涵盖了 SVG、图标字体、测试、浏览器兼容增强、性能等知识,这会让你在实战中得到更多的技术支持和应用。

  响应式设计是一种新的设计理念,需要你不断学习、探索、实践,它会让你的内容在不同设备上展现得更加精彩。

  适用读者

  本书适合任何对 Web设计感兴趣的读者进行阅读,特别适合前端工程师、设计师、产品经理、架构师、项目经理等。示例中会涉及一些 HTML和 CSS代码,理解这些代码会极大帮助你深入了解响应式 Web设计开发中的技巧。



第1部分 响应式之道

1 开启响应式之路 3

1.1 初探响应式Web . 5

1.1.1 什么是响应式 Web 5

1.1.2 关键特性 8

1.2 构建第一个响应式网站 10

1.2.1 创建网站原型 11

1.3 响应式布局基础 18

1.3.1 移动优先标签 19

1.3.2 在 CSS中使用百分比 . 24

1.3.3 添加文本和图像 28

1.3.4 强大易变的 em 30

1.3.5 设置第一个断点 33

1.4 总结 34

1.5 讨论的观点 35

2 移动优先的设计 37

2.1 为何选择移动优先设计 38

2.1.1 移动优先设计的优点 39

2.1.2 移动优先设计的挑战 40

2.2 为小屏幕设计头部 42

2.2.1 创建头部 42

2.3 设计触屏界面交互 44

2.3.1 简约的小屏幕网格 45

2.4 为小屏幕设计内容 47

2.4.1 在布局中使用 Web字体 . 48

2.5 总结 51

2.6 讨论的观点 . 51

第2部分 响应式Web设计之旅

3 使用样式板表达设计 55

3.1 利用设计指南进行可视化设计 56

3.1.1 设计指南是什么 57

3.1.2 开发一个设计指南 58

3.1.3 样式板:创建一种视觉语言 59

3.2 如何创建一个样式板 60

3.2.1 获得反馈 61

3.2.2 设计样式板 61

3.2.3 创建样式板 63

3.2.4 利用样式板进行迭代设计 68

3.3 模型之死 . 69

3.4 总结 70

3.5 讨论的观点 70

4 响应式用户体验设计模式 . 71

4.1 一级导航 73

4.1.1 toggle导航模式 . 74

4.1.2 select menu导航模式 79

4.1.3 toggle导航和 select menu导航的比较 81

4.2 多级toggle导航 82

4.3 响应式用户体验设计模式资源 87

4.4 总结 87

4.5 讨论的观点 88

5 响应式布局. 89

5.1 利用百分比进行流式布局 90

5.1.1 CSS中的百分比是如何工作的 90

5.1.2 box-sizing . 94

5.1.3 流式网格系统 97

5.2 构建一个流式布局 101

5.2.1 解读原型 101

5.2.2 开始编码 102

5.2.3 让 off-canvas元素动起来 . 105

5.2.4 使元素具有响应性 106

5.2.5 拓展到更宽的视图 109

5.3 总结 110

5.4 讨论的观点 110

6 添加内容模块和排版.113

6.1 添加内容模块 115

6.1.1 创建有用的内容占位符 116

6.2 响应式设计中的排版 121

6.2.1 嵌入式字体 121

6.2.2 设置一个排版基础 123

6.3 总结 . 126

6.4 讨论的观点 126

第3部分 用代码来延伸设计

7 用CSS在浏览器中增加图形129

7.1 利用CSS实现设计 . 130

7.1.1 CSS基础 131

7.1.2 在流体结构中维持比例 133

7.2 在你的设计中使用icon字体 . 136

7.2.1 在用户界面中使用雪碧图 137

7.2.2 基于字体的用户界面图形 138

7.3 使用可缩放矢量图形 140

7.3.1 为页面添加 SVG图像 141

7.3.2 用 CSS实现 SVG 144

7.3.3 SVG格式的局限性 . 146

7.4 总结 147

7.5 讨论的观点 148

8 渐进增强和Modernizr的过时控制149

8.1 技术性过时 150

8.1.1 渐进增强 150

8.1.2 优雅降级 154

8.2 Modernizr是什么 . 155

8.2.1 初始化 Modernizr 157

8.2.2 利用 Modernizr写跨浏览器的 CSS . 159

8.3 用Modernizr进行JavaScript特性检测 162

8.3.1 检测触摸能力 163

8.3.2 使用 Modernizr.load和 yepnope . 164

8.3.3 创建定制的 Modernizr测试 . 165

8.4 在网站中添加Modernizr . 166

8.5 总结 169

8.6 讨论的观点 170

9 响应式网站的测试和优化 171

9.1 什么是响应式测试 172

9.1.1 模拟测试环境 172

9.2 用于测试的浏览器工具 176

9.3 使用Web审查器 . 177

9.3.1 掌握 Web审查器 . 178

9.4 降低请求时间的技巧 182

9.4.1 减少 HTTP请求 183

9.4.2 用 Base64编码减少图片请求 184

9.4.3 加载速度的优化清单 184

9.5 总结 . 186

9.6 讨论的观点 . 186

附录A 设计中的上下文感知计算 .187

A.1 移动应用中的上下文感知 . 188

A.2 Web中的上下文感知 189

A.2.1 上下文断点 190

A.2.2 创建上下文测试 192

A.2.3 CSS上下文 195

A.3 总结 196

附录B Foundation框架

(可在www.manning.com/TheResponsiveWeb获取。)

  • 下载地址

数据库书籍

网络通讯书籍

系统管理书籍