一淘响应式设计实践

响应式设计、常见响应式模式及其实现、 常用响应式技术polyfill 、 响应式之移动端、 响应式之服务端、 响应式协作流程、 那些年，踩过的一些坑

Transcript

1. etao响应式实践⼩小结 妙净 etao⾸首⻚页项⺫⽬目组 响应式兴趣⼩小组 13年5月20⽇日星期⼀一
2. etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式项⺫⽬目协作流程  常⽤用响应式技术polyfill  响应式之服务端  响应式之移动端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一
3. etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式项⺫⽬目协作流程  常⽤用响应式技术polyfill  响应式之服务端  响应式之移动端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一
4. 响应式设计  响应式设计的概念 （多终端响应）  常⽤用响应式设计的⽅方法（PC优先、移动优先）  Etao响应式实践 13年5月20⽇日星期⼀一
5. 13年5月20⽇日星期⼀一
6. 13年5月20⽇日星期⼀一
7. 13年5月20⽇日星期⼀一
8. 13年5月20⽇日星期⼀一
9. Etao响应式实践  Etao⾸首⻚页响应式第⼀一版(12.5.31) （990、1200）  淘宝主搜索（990、1200、1400）  Etao点评频道（990、1200）  Etao srp（990、1200、1400、1600）  Etao⾸首⻚页响应式改版(13.1.1)（750、990、1200）  玩客（320、480、750、990、1200） 13年5月20⽇日星期⼀一
10. etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式项⺫⽬目协作流程  常⽤用响应式技术polyfill  响应式之移动端  响应式之服务端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一
11. 常⻅见响应式模式及其实现  布局（layout）  导航(navgation)  图⽚片(images)  多媒体(media)  表单(form)  模块/组件(modules) http://bradfrost.github.io/this-is-responsive/patterns.html https://github.com/miaojing/responsive 13年5月20⽇日星期⼀一
12. 响应式模式-布局 13年5月20⽇日星期⼀一
13. 响应式模式-布局  ⺫⽬目前搜集有30多种布局响应⽅方式  布局响应实现⽅方式⼀一致： 临界点的突变响应（media query） 临界点间的响应（百分⽐比 弹性宽度）  弹性⺴⽹网格布局系统 13年5月20⽇日星期⼀一
14. 响应式模式-布局-弹性⺴⽹网格系统 13年5月20⽇日星期⼀一
15. 响应式模式-布局-弹性⺴⽹网格系统 Bootstrap Responsive Grid System 13年5月20⽇日星期⼀一
16. 响应式模式-布局-弹性⺴⽹网格系统 Bootstrap Responsive Grid System 13年5月20⽇日星期⼀一
17. 响应式模式-布局-etao http://xthsky.github.io/layout/ etao响应式布局⼯工具 13年5月20⽇日星期⼀一
18. 响应式模式-导航 13年5月20⽇日星期⼀一
19. 响应式模式-导航 13年5月20⽇日星期⼀一
20. 响应式模式-图⽚片  背景图⽚片（background-image）  前景图⽚片(img) 13年5月20⽇日星期⼀一
21. 响应式模式-图⽚片-background-image 13年5月20⽇日星期⼀一
22. 响应式模式-图⽚片-background-image 13年5月20⽇日星期⼀一
23. 响应式模式-图⽚片-img  Responsive-images （服务端结合js种分辨率的cookie）  Img Srcset  Picture 问题：可能多⼀一次图⽚片请求 13年5月20⽇日星期⼀一
24. 响应式模式-图⽚片-img srcset http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ https://github.com/borismus/srcset-polyfill 13年5月20⽇日星期⼀一
25. 响应式模式-图⽚片-picture https://github.com/scottjehl/picturefill http://www.w3.org/TR/2013/WD-html-picture- element-20130226/ 13年5月20⽇日星期⼀一
26. 响应式模式-多媒体 13年5月20⽇日星期⼀一
27. 响应式模式-多媒体 @media (max-width: 480px) { .video-container video { width: 400px; } } 13年5月20⽇日星期⼀一
28. 响应式模式-多媒体  Video Html5 video Flash(js) @media (max-width: 480px) { .video-container video { width: 400px; } } 13年5月20⽇日星期⼀一
29. 响应式模式-表单  Basic form  Search form 13年5月20⽇日星期⼀一
30. 响应式模式-模块  Switchable  Accordion  Overlay 13年5月20⽇日星期⼀一
31. 响应式模式-模块  Switchable 13年5月20⽇日星期⼀一
32. 响应式模式-模块  Switchable (kissy的switchable⽀支持响应式较⿇麻烦) 13年5月20⽇日星期⼀一
33. 响应式模式-模块-overlay 13年5月20⽇日星期⼀一
34. 响应式模式-模块-overlay 13年5月20⽇日星期⼀一
35. etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式项⺫⽬目协作流程  常⽤用响应式技术polyfill  响应式在移动端  响应式在服务端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一
36. 响应式协作流程 各种响应式项⺫⽬目后总结如下： 13年5月20⽇日星期⼀一
37. etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式项⺫⽬目协作流程  常⽤用响应式技术polyfill  响应式在移动端  响应式在服务端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一
38. 常⽤用响应式技术polyfill  Media query兼容实现  Picture兼容实现 13年5月20⽇日星期⼀一
39. Media query兼容实现  Ie8及其以下不⽀支持 13年5月20⽇日星期⼀一
40. Media query兼容实现  Respond.js  Css3-mediaqueries-js  Etao的解决⽅方案 13年5月20⽇日星期⼀一
41. Respond.js  1k不到  ⽀支持跨域（跨cdn） 但⾄至少有500ms闪屏  仅⽀支持min-width和max-width  额外多304请求 https://github.com/scottjehl/Respond 13年5月20⽇日星期⼀一
42. Respond.js 13年5月20⽇日星期⼀一
43. Css3-mediaqueries-js  所有Mediaquery 完全兼容实现  和repond.js相⽐比，性能较差（140ms vs 15ms）  不⽀支持跨域 13年5月20⽇日星期⼀一
44. 13年5月20⽇日星期⼀一
45. Media query兼容实现 1.类respond.js切换内联css 优点：⾃自动化、使⽤用⽅方便 缺点：跨域配置⿇麻烦、性能(请求css⽂文件，解析mediaquery慢、js偏⼤大) 2.切换css⽂文件 <link rel=“stylesheet” media=“screen and (min-width:500px)” href=“example.css” /> 优点：⽂文件分离，load时按需加载，js⼩小 缺点：多⽂文件管理⿇麻烦，当media query不⾜足1k时多⼀一个请求 3.切换全局class 优点：⽅方便管理 js⼩小 缺点：load时所有css加载，但其实不多 13年5月20⽇日星期⼀一
46. Etao media query 兼容⽅方案  全局切换class  引⼊入less解决css重复维护问题  整合⾄至kissy gallery guide https://github.com/miaojing/responsive 13年5月20⽇日星期⼀一
47. Mediaquery兼容切换全局class https://github.com/miaojing/responsive/blob/master/1.0/guide/ mediaquerypolyfill.md 13年5月20⽇日星期⼀一
48. Mediaquery兼容切换全局class https://github.com/miaojing/responsive/blob/master/1.0/guide/ mediaquerypolyfill.md 13年5月20⽇日星期⼀一
49. Picture兼容实现  Picture Picturefill  参考picturefill实现（可⽤用性、只加载⼀一次图⽚片、图⽚片懒加载） https://github.com/scottjehl/picturefill https://github.com/miaojing/responsive/blob/master/1.0/guide/ picturepolyfill.md 13年5月20⽇日星期⼀一
50. etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  常⽤用响应式技术polyfill  响应式在服务端  响应式在移动端  响应式协作流程  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一
51. 响应式在服务端  Image的响应 mobile和pc图⽚片⼤大⼩小规则的响应 13年5月20⽇日星期⼀一
52. 响应式在服务端  Image的响应 mobile和pc图⽚片⼤大⼩小规则的响应  Css/js的响应 13年5月20⽇日星期⼀一
53. 响应式在服务端  Image的响应 mobile和pc图⽚片⼤大⼩小规则的响应  Css/js的响应 渐进增强/优雅降级（仅pc兼容IE/仅移动端触屏） 13年5月20⽇日星期⼀一
54. 响应式在服务端  Image的响应 mobile和pc图⽚片⼤大⼩小规则的响应  Css/js的响应 渐进增强/优雅降级（仅pc兼容IE/仅移动端触屏）  Html的响应 13年5月20⽇日星期⼀一
55. 响应式在服务端  Image的响应 mobile和pc图⽚片⼤大⼩小规则的响应  Css/js的响应 渐进增强/优雅降级（仅pc兼容IE/仅移动端触屏）  Html的响应 不同设备不同数据的响应，如宝⻉贝数量pc下80个，mobile下 20个；商品详情⻚页pc下直接展⽰示，mobile下出‘查看详情’按钮 13年5月20⽇日星期⼀一
56. Etao服务端UA判断通⽤用库  含PHP和JAVA2个版本  业界成熟的⽅方案: Detect Mobile Browsers WURFL  Etao基于WURFL适当裁剪 demo 13年5月20⽇日星期⼀一
57. Etao服务端UA判断通⽤用库  含PHP和JAVA2个版本  业界成熟的⽅方案: Detect Mobile Browsers WURFL  Etao基于WURFL适当裁剪 demo 13年5月20⽇日星期⼀一
58. Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等 13年5月20⽇日星期⼀一
59. Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 13年5月20⽇日星期⼀一
60. Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以⽤用到 13年5月20⽇日星期⼀一
61. Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以⽤用到  3.判断是否是pc 13年5月20⽇日星期⼀一
62. Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以⽤用到  3.判断是否是pc 数据内容的响应、判断图⽚片响应可能要⽤用到 13年5月20⽇日星期⼀一
63. Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以⽤用到  3.判断是否是pc 数据内容的响应、判断图⽚片响应可能要⽤用到  4.判断是否移动端 13年5月20⽇日星期⼀一
64. Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以⽤用到  3.判断是否是pc 数据内容的响应、判断图⽚片响应可能要⽤用到  4.判断是否移动端 数据内容的响应、切换兼容ie的css、js可以⽤用到/ 加载触屏事件js⽀支持 13年5月20⽇日星期⼀一
65.  5.根据UA推算出分辨率 可⽤用于响应图⽚片的在移动端的初始值 参 考en.wikipedia.org/wiki/List_of_displays_by_pixel_density  6.判断是否ios  7.判断是否安卓  8.判断⽤用户的⺴⽹网络类型 13年5月20⽇日星期⼀一
66. etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式协作流程  常⽤用响应式技术polyfill  响应式在服务端  响应式在移动端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一
67. 响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇) 13年5月20⽇日星期⼀一
68. 响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇) 13年5月20⽇日星期⼀一
69. 响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇) 13年5月20⽇日星期⼀一
70. 响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇) 13年5月20⽇日星期⼀一
71. 响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇) 13年5月20⽇日星期⼀一
72. 响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇)  移动端性能优化 按需加载css/js/html 类库的选择（⾸首选kissy 体验不佳） 优化⼯工具 https://developers.google.com/chrome-developer-tools/docs/ profiles http://demo.etao.net/wangpu/qigege.html 13年5月20⽇日星期⼀一
73. etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式协作流程  常⽤用响应式技术polyfill  响应式在移动端  响应式在服务端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一
74. 那些年，踩过的⼀一些坑  因淘宝rms发布系统，Media query的写法注意  Media query（webkit w3c）滚动条差异  Iphone下背景显⽰示不全  Iphone5下主屏打开上下⿊黑边框 13年5月20⽇日星期⼀一
75. Media query的写法注意 @media only scrren and (max-width : 768px ) {} @media only screen and /*!YUI-Compressor */ ( max-width: 768px){} （推荐） @media (max-width : 768px ) {} （推荐） yui compresser 2.4.3 升级到 2.4.7 13年5月20⽇日星期⼀一
76. media query width差异  Webkit内核 计算不包含滚动条  IE9 ff等包含滚动条  W3C标准不包含 13年5月20⽇日星期⼀一
77. Iphone下背景显⽰示 http://ux.etao.com/posts/687 13年5月20⽇日星期⼀一
78. Iphone下背景显⽰示不全  Viewport的设置⽅方法  原因是viewport的设置影响根元素的宽度 13年5月20⽇日星期⼀一
79. Iphone5下主屏打开上下⿊黑边框  viewport的meta移除width=device-width http://stackoverflow.com/questions/ 12656200/how-can-i-make-my-web-app- iphone-5-compatible 13年5月20⽇日星期⼀一
80. 谢谢⼤大家  感谢ux交互委员会  感谢etao⾸首⻚页项⺫⽬目组（妙净、墨峰、栖邀、李杰）  感谢响应式兴趣⼩小组（ww: 958033829）（妙净、墨峰、⾬雨 异、基德、李杰、⼦子宽、岑安、乐淘、邓萌等） ⺫⽬目前的我们的响应式设计在移动端的体验有待提升，还要继续努⼒力~ 13年5月20⽇日星期⼀一