响应式设计、改造与优化

内容概要

Phil Dutson 是ICON Health & Fitness 客户端和移动执行解决方案的架构师。他是Sams Teach Yourself jQuery Mobile in 24 Hours、jQuery, jQuery UI, and jQueryMobile Recipes and Examples、The Android Developer’s Cookbook，2nd Edition 的作者。他热爱技术的学习和写作，每次他与儿子玩Ingress 时都向世界传播启蒙讯息。

书籍目录

第 1部分　创建响应式部局

第 1章　内容事项. .................................. 2

构成内容的要素. ......................................3

信息采集.........................................3

信息确认.........................................5

选择合适的内容. ......................................7

内容性能.........................................7

搜索引擎优化考量..........................10

用户期望.......................................11

讨论内容滑块. .......................................12

小结. .......14

第 2章　为什么移动优先....................... 15

浏览 Web. ............................................16

从小尺寸开始时的注意事项. ....................19

网站主题.......................................20

网站导航.......................................22

营销图像.......................................24

网站搜索.......................................25

小结. .......27

第 3章　使用栅格................................ 28

选择栅格. ..................29

Pure.Grids...................................30

Bootstrap.....................................30

Foundation..................................31

Gridpak........................................31

Golden.Grid.System.....................32

Skeleton......................................32

使用响应式栅格. ....................................32

使用自适应栅格. ....................................36

两全其美...................38

小结. .......38

第 4章　显示表格数据.......................... 40

定义表格数据. .......................................41

联系地址列表. ................................41

发票和收据....................................41

表单..................41

配方和卡片....................................42

电子邮件站点和应用.......................42

使用表格数据. .......................................42

显示表单.......................................43

使用表格.......................................47

使用 CSS改变外观. .......................47

创建多个表格. ................................50

使用下载链接. ................................53

小结. .......56

第 5章　使用测量单位.......................... 57

使用像素. ..................58

使用百分比...........................................60

使用 em和 rem单位.............................63

viewport测量. ......................................65

小结. .......69

第 6章　使用媒体查询.......................... 70

viewport.meta标签..............................71

实现突变点...........................................73

使用媒体查询. ................................74

IE6-8浏览器支持. .........................80

设备专属的媒体查询..............................80

iPad..................80

iPhone.4S以下. ............................81

iPhone.5和 5S.............................82

Nexus.7（第二代）.......................82

Galaxy.S4....................................83

小结. .......83

第 7章　排版设计................................ 84

Web字体. ............................................85

字体格式.......................................85

浏览器和设备支持.................................87

设备差异.......................................87

浏览器行为....................................89

提供 Web字体..............................91

使用字体服务. .......................................93

Google字体.................................93

Adobe.Typekit..............................94

Fonts.com...................................94

Font.Squirrel................................95

icon字体.............95

小结. .......96

第 8章　改造现有网站.......................... 97

选择一个合适的移动布局. .......................98

块级布局.......................................98

响应式布局..................................100

自适应布局..................................102

利用组件开展工作...............................103

导航...........................................103

搜索...........................................105

内容区域.....................................105

滑块...........................................106

链接...........................................107

移动化的注意事项...............................108

不要滥用悬停. ..............................108

点击呼叫.....................................109

模态窗口.....................................109

输入框........................................111

小结. .....112

第 2部分　使用响应式媒体

第 9章　响应式图片............................114

图片应该是响应式的............................115

图片分发.....................................115

使用 JavaScript的解决方案. ................125

Picturefill组件.. ...........................126

Pixity组件..................................127

小结. .....129

第 10章　响应式视频. ......................... 130

使用视频............................................131

分发系统............................................131

Limelight.网络.............................132

Akamai......................................133

Brightcove.................................133

Vimeo........................................134

YouTube....................................135

制作适配移动设备的视频. .....................136

使用固定比例. ..............................137

使用本地播放器...........................140

使用插件.....................................141

小结. .....142

第 11章　图像压缩............................. 143

图片类型............................................144

JPEG/JPG.................................144

GIF............................................146

PNG..........................................147

WebP........................................148

缩工具............................................150

JPEGmini...................................150

PNGGauntlet.............................151

图像优化工具 Radical..................151

ImageAlpha...............................151

ImageOptim...............................153

TinyPNG....................................153

压缩结果............................................154

小结. .....155

第 3部分　性能优化

第 12章　条件.JavaScript. ................ 158

为什么使用条件 JavaScript. .................159

滑块...........................................160

图片库........................................160

使用条件 JavaScript...........................162

JavaScript媒体查询....................163

使用 JavaScript插件..........................168

jRespond...................................168

mediaCheck...............................169

ConditionerJS............................169

小结. .....170

第 13章　Web组件............................ 171

使用 Web组件...................................172

Web组件示例....................................172

音频元素.....................................172

视频元素.....................................174

日期输入.....................................175

使用 DOM处理.. .................................176

Shadow.DOM............................177

使用模板.....................................178

编辑内容.....................................179

Web组件 Polyfill................................180

Polymer.....................................181

Polymer元素..............................181

X-Tag.......................................182

使用 Brick...................................183

小结. .....183

第 14章　设备检测与服务器请求. .......... 185

设备检测............................................186

使用脚本检测. ..............................186

读取 user-agent字符串. ..............188

实现设备数据库...........................190

HTTP头部. ........................................191

使用客户端提示. ..................................194

小结. .....196

第 15章　服务器优化. ..........................197

服务器配置.........................................198

Web.服务器.......................................198

Apache......................................198

Nginx.........................................199

IIS.199

Tomcat......................................200

NodeJS.....................................200

服务器插件.........................................201

SPDY........................................201

Cache........................................205

PageSpeed................................207

小结. .....210

第 16章　高性能与开发工具. ................. 211

开发工具............................................212

浏览器开发者工具...............................212

Chrome.开发者工具.. ...................212

Firefox.......................................218

Internet.Explorer........................223

构建工具............................................226

Grunt.........................................226

Gulp...........................................228

小结. .....229

作者简介

由于移动设备的大量使用，各种屏幕尺寸、各种操作系统、各种访问设备及各种需求均对用户体验提出了新的挑战。为了让我们的网站在各个终端上的用户体验都尽可能接近完美，我们需要采用响应式移动设计。《响应式设计、改造与优化》重点介绍了Phil Dutson的开发经验，主要是关于移动设备及其设计，甚至一点点代码就可以帮助你以最好的方式为数百万手机用户提供内容；同时，顺便简单地介绍了一些主题，以解决常见的响应式移动设计中可能会遇到的问题。

 响应式设计、改造与优化下载