编辑推荐
适读人群 :论你是开发人员、设计师还是产品经理,本书都将教你为所有人的所有设备成功呈现信息的原则、技术和最佳实践。 不论你是正在积累还是精简你的技能集,《响应式设计、改造与优化》都是现代Web 实践的指南精粹。Phil 独一的技术背景和实战经验赋予了他对于底层核心程序以及像素级完美设计的敏锐洞察力。
— Web/UI 设计师Jacob R. Stuart
如今,Web 开发是不可能不考虑各种屏幕尺寸和比例因素的,因为你永远不会知道你的用户使用的是手机、平板电脑还是台式机。本书有助于构建响应式网页设计,是一本必读之书。
—9magnets LLC 联合创始人 Cameron Banga
任何一位寻找响应式设计综合性策略的读者不妨读一读本书。Phil 在这本实践指南中,揭开了为什么和怎样对众多的屏幕尺寸和设备进行响应式设计的面纱。
— WSOL 设计总监 Dennis Kardys
响应式设计的三要素(流动的网格、灵活的图像和媒体查询)仍然非常重要,今天创建一个网站比过去需要更多的思想和技术。本书将带你从基础开始,逐步了解现代Web 开发的来龙去脉。
— 圣母大学网络通信系主任 Erik Runyon
Phil Dutson 提出的移动设计的设计建议、资源和实例,有助于将设计师和开发者们联系在一起。本书是任何一位Web 设计师的书架上都值得拥有并需反复阅读的全面指南。
—SEO.com 网页设计师 Kaylee White
内容简介
由于移动设备的大量使用,各种屏幕尺寸、各种操作系统、各种访问设备及各种需求均对用户体验提出了新的挑战。为了让我们的网站在各个终端上的用户体验都尽可能接近完美,我们需要采用响应式移动设计。本书重点介绍了Phil Dutson的开发经验,主要是关于移动设备及其设计,甚至一点点代码就可以帮助你以好的方式为数百万手机用户提供内容;同时,顺便简单地介绍了一些主题,以解决常见的响应式移动设计中可能会遇到的问题。
目录
第 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
PureGrids30
Bootstrap30
Foundation31
Gridpak31
GoldenGridSystem32
Skeleton32
使用响应式栅格 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
viewportmeta标签71
实现突变点73
使用媒体查询 74
IE6-8浏览器支持 80
设备专属的媒体查询80
iPad80
iPhone4S以下 81
iPhone5和 5S82
Nexus7(第二代)82
GalaxyS483
小结 83
第 7章 排版设计 84
Web字体 85
字体格式85
TTF86
EOT86
WOFF86
SVG87
浏览器和设备支持87
设备差异87
浏览器行为89
提供 Web字体91
使用字体服务 93
Google字体93
AdobeTypekit94
Fontscom94
FontSquirrel95
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
Akamai133
Brightcove133
Vimeo134
YouTube135
制作适配移动设备的视频 136
使用固定比例 137
使用本地播放器140
使用插件141
小结 142
第 11章 图像压缩 143
图片类型144
JPEG/JPG144
GIF146
PNG147
WebP148
压缩工具150
JPEGmini150
PNGGauntlet151
图像优化工具 Radical151
ImageAlpha151
ImageOptim153
TinyPNG153
压缩结果154
小结 155
第 3部分 性能优化
第 12章 条件JavaScript 158
为什么使用条件 JavaScript 159
滑块160
图片库160
使用条件 JavaScript162
JavaScript媒体查询163
使用 JavaScript插件168
jRespond168
mediaCheck169
ConditionerJS169
小结 170
第 13章 Web组件 171
使用 Web组件172
Web组件示例172
音频元素172
视频元素174
日期输入175
使用 DOM处理 176
ShadowDOM177
使用模板178
编辑内容179
Web组件 Polyfill180
Polymer181
Polymer元素181
X-Tag182
使用 Brick183
小结 183
第 14章 设备检测与服务器请求 185
设备检测186
使用脚本检测 186
读取 user-agent字符串 188
实现设备数据库190
HTTP头部 191
使用客户端提示 194
小结 196
第 15章 服务器优化 197
服务器配置198
Web服务器198
Apache198
Nginx199
IIS199
Tomcat200
NodeJS200
服务器插件201
SPDY201
Cache205
PageSpeed207
小结 210
第 16章 高性能与开发工具 211
开发工具212
浏览器开发者工具212
Chrome开发者工具 212
Firefox218
InternetExplorer223
构建工具226
Grunt226
Gulp228
小结 229
精彩书摘
响应式设计的概念来源于2010 年5 月Ethan Marcotte 发表的一篇名为“Responsive Web Design”的文章1,其阐述了如何利用流式布局、媒体查询和弹性图片三种公知技术创建一个能够适配不同分辨率屏幕的网站。Ethan Marcotte 认为应当利用Web 的特性来设计与开发网站:“我们可以将不同联网设备上众多的体验,当作同一网站体验的不同侧面来对待,而不要为每种设备进行单独剪裁使得设计彼此断开,这才是我们前进的方向。虽然我们已经能够设计出最佳的视觉体验,但还要把基于标准的技术也嵌入到我们的设计中去,这样才能使得我们的设计不仅灵活,而且能适应渲染它们的各种媒介。”响应式设计能够面向不同设备收拢并提供卓越的用户体验,并且这一方法不会忽视设备间的差异性,也不会强调设计师的控制权,而是选择了顺其自然并拥抱Web 的灵活性。
在移动互联的浪潮下,Luke Wroblewski 最早提出了移动优先的设计理念2,而响应式设计之所以叫响应式“设计”而不叫响应式“技术”,就是因为它是一项设计先行的工作。面对移动互联网的蓬勃发展和用户习惯的悄然改变,从移动端开始进行响应式设计对习惯了PC 环境的设计师来说可能是一种挑战,需要从思考方式和工作习惯上做出改变。本书前半部分介绍了响应式移动设计的各个要素,并以实例分析如何对现有站点进行响应式移动设计的改造。
性能是响应式设计绕不开的一个话题,对于移动端来说尤为重要。按条件加载、隐藏或显示什么内容,都会比单一条件判断的代码结构烦琐,并影响用户体验及维护。尤其是在移动性能上,多样的设备具有复杂的使用环境,如何识别设备,并让用户在不同设备环境下均能得到良好体验,也是一根硬骨头。本书的后半部分重点对于上述问题进行了分析,希望对于读者的开发实践有所帮助。
最后,希望能有更多的人在移动端实践响应式设计,实践出真知,更加合理、优雅的设计可能就出自你的手中。
前言/序言
响应式设计 改造与优化 电子书 下载 mobi epub pdf txt
评分
☆☆☆☆☆
ecmaffgwvbbnj
评分
☆☆☆☆☆
ecmaffgwvbbnj
评分
☆☆☆☆☆
第一,书有破损,第二,内容空洞,绕了一大堆基础知识,并没有什么实际的可以借鉴的响应式设计方案和步骤,非常不建议买!
评分
☆☆☆☆☆
ecmaffgwvbbnj
评分
☆☆☆☆☆
ecmaffgwvbbnj
评分
☆☆☆☆☆
第一,书有破损,第二,内容空洞,绕了一大堆基础知识,并没有什么实际的可以借鉴的响应式设计方案和步骤,非常不建议买!
评分
☆☆☆☆☆
ecmaffgwvbbnj
评分
☆☆☆☆☆
ecmaffgwvbbnj
评分
☆☆☆☆☆
第一,书有破损,第二,内容空洞,绕了一大堆基础知识,并没有什么实际的可以借鉴的响应式设计方案和步骤,非常不建议买!