响应式设计、改造与优化
出版时间: 2015
内容简介
由于移动设备的大量使用,各种屏幕尺寸、各种操作系统、各种访问设备及各种需求均对用户体验提出了新的挑战。为了让我们的网站在各个终端上的用户体验都尽可能接近完美,我们需要采用响应式移动设计。本书重点介绍了Phil Dutson的开发经验,主要是关于移动设备及其设计,甚至一点点代码就可以帮助你以最好的方式为数百万手机用户提供内容;同时,顺便简单地介绍了一些主题,以解决常见的响应式移动设计中可能会遇到的问题。
目录
第 1部分 创建响应式部局
第 1章 内容事项
构成内容的要素
信息采集
信息确认
选择合适的内容
内容性能
搜索引擎优化考量
用户期望
讨论内容滑块
小结
第 2章 为什么移动优先
浏览 Web
从小尺寸开始时的注意事项
网站主题
网站导航
营销图像
网站搜索
小结
第 3章 使用栅格
选择栅格
PureGrids
Bootstrap
Foundation
Gridpak
GoldenGridSystem
Skeleton
使用响应式栅格
使用自适应栅格
两全其美
小结
第 4章 显示表格数据
定义表格数据
联系地址列表
发票和收据
表单
配方和卡片
电子邮件站点和应用
使用表格数据
显示表单
使用表格
使用 CSS改变外观
创建多个表格
使用下载链接
小结
第 5章 使用测量单位
使用像素
使用百分比
使用 em和 rem单位
viewport测量
小结
第 6章 使用媒体查询
viewportmeta标签
实现突变点
使用媒体查询
IE6-8浏览器支持
设备专属的媒体查询
iPad
iPhone4S以下
iPhone5和 5S
Nexus7(第二代)
GalaxyS4
小结
第 7章 排版设计
Web字体
字体格式
TTF
EOT
WOFF
SVG
浏览器和设备支持
设备差异
浏览器行为
提供 Web字体
使用字体服务
Google字体
AdobeTypekit
Fontscom
FontSquirrel
icon字体
小结
第 8章 改造现有网站
选择一个合适的移动布局
块级布局
响应式布局
自适应布局
利用组件开展工作
导航
搜索
内容区域
滑块
链接
移动化的注意事项
不要滥用悬停
点击呼叫
模态窗口
输入框
小结
第 2部分 使用响应式媒体
第 9章 响应式图片
图片应该是响应式的
图片分发
使用 JavaScript的解决方案
Picturefill组件
Pixity组件
小结
第 10章 响应式视频
使用视频
分发系统
Limelight网络
Akamai
Brightcove
Vimeo
YouTube
制作适配移动设备的视频
使用固定比例
使用本地播放器
使用插件
小结
第 11章 图像压缩
图片类型
JPEG/JPG
GIF
PNG
WebP
压缩工具
JPEGmini
PNGGauntlet
图像优化工具 Radical
ImageAlpha
ImageOptim
TinyPNG
压缩结果
小结
第 3部分 性能优化
第 12章 条件JavaScript
为什么使用条件 JavaScript
滑块
图片库
使用条件 JavaScript
JavaScript媒体查询
使用 JavaScript插件
jRespond
mediaCheck
ConditionerJS
小结
第 13章 Web组件
使用 Web组件
Web组件示例
音频元素
视频元素
日期输入
使用 DOM处理
ShadowDOM
使用模板
编辑内容
Web组件 Polyfill
Polymer
Polymer元素
X-Tag
使用 Brick
小结
第 14章 设备检测与服务器请求
设备检测
使用脚本检测
读取 user-agent字符串
实现设备数据库
HTTP头部
使用客户端提示
小结
第 15章 服务器优化
服务器配置
Web服务器
Apache
Nginx
IIS
Tomcat
NodeJS
服务器插件
SPDY
Cache
PageSpeed
小结
第 16章 高性能与开发工具
开发工具
浏览器开发者工具
Chrome开发者工具
Firefox
InternetExplorer
构建工具
Grunt
Gulp
小结