Tweet
Tweet

Slide 1

Slide 1 text

etao响应式实践⼩小结 妙净 etao⾸首⻚页项⺫⽬目组 响应式兴趣⼩小组 13年5月20⽇日星期⼀一

Slide 2

Slide 2 text

etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式项⺫⽬目协作流程  常⽤用响应式技术polyfill  响应式之服务端  响应式之移动端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一

Slide 3

Slide 3 text

etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式项⺫⽬目协作流程  常⽤用响应式技术polyfill  响应式之服务端  响应式之移动端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一

Slide 4

Slide 4 text

响应式设计  响应式设计的概念 （多终端响应）  常⽤用响应式设计的⽅方法（PC优先、移动优先）  Etao响应式实践 13年5月20⽇日星期⼀一

Slide 5

Slide 5 text

13年5月20⽇日星期⼀一

Slide 6

Slide 6 text

13年5月20⽇日星期⼀一

Slide 7

Slide 7 text

13年5月20⽇日星期⼀一

Slide 8

Slide 8 text

13年5月20⽇日星期⼀一

Slide 9

Slide 9 text

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⽇日星期⼀一

Slide 10

Slide 10 text

etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式项⺫⽬目协作流程  常⽤用响应式技术polyfill  响应式之移动端  响应式之服务端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一

Slide 11

Slide 11 text

常⻅见响应式模式及其实现  布局（layout）  导航(navgation)  图⽚片(images)  多媒体(media)  表单(form)  模块/组件(modules) http://bradfrost.github.io/this-is-responsive/patterns.html https://github.com/miaojing/responsive 13年5月20⽇日星期⼀一

Slide 12

Slide 12 text

响应式模式-布局 13年5月20⽇日星期⼀一

Slide 13

Slide 13 text

响应式模式-布局  ⺫⽬目前搜集有30多种布局响应⽅方式  布局响应实现⽅方式⼀一致： 临界点的突变响应（media query） 临界点间的响应（百分⽐比 弹性宽度）  弹性⺴⽹网格布局系统 13年5月20⽇日星期⼀一

Slide 14

Slide 14 text

响应式模式-布局-弹性⺴⽹网格系统 13年5月20⽇日星期⼀一

Slide 15

Slide 15 text

响应式模式-布局-弹性⺴⽹网格系统 Bootstrap Responsive Grid System 13年5月20⽇日星期⼀一

Slide 16

Slide 16 text

响应式模式-布局-弹性⺴⽹网格系统 Bootstrap Responsive Grid System 13年5月20⽇日星期⼀一

Slide 17

Slide 17 text

响应式模式-布局-etao http://xthsky.github.io/layout/ etao响应式布局⼯工具 13年5月20⽇日星期⼀一

Slide 18

Slide 18 text

响应式模式-导航 13年5月20⽇日星期⼀一

Slide 19

Slide 19 text

响应式模式-导航 13年5月20⽇日星期⼀一

Slide 20

Slide 20 text

响应式模式-图⽚片  背景图⽚片（background-image）  前景图⽚片(img) 13年5月20⽇日星期⼀一

Slide 21

Slide 21 text

响应式模式-图⽚片-background-image 13年5月20⽇日星期⼀一

Slide 22

Slide 22 text

响应式模式-图⽚片-background-image 13年5月20⽇日星期⼀一

Slide 23

Slide 23 text

响应式模式-图⽚片-img  Responsive-images （服务端结合js种分辨率的cookie）  Img Srcset  Picture 问题：可能多⼀一次图⽚片请求 13年5月20⽇日星期⼀一

Slide 24

Slide 24 text

响应式模式-图⽚片-img srcset http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ https://github.com/borismus/srcset-polyfill 13年5月20⽇日星期⼀一

Slide 25

Slide 25 text

响应式模式-图⽚片-picture https://github.com/scottjehl/picturefill http://www.w3.org/TR/2013/WD-html-picture- element-20130226/ 13年5月20⽇日星期⼀一

Slide 26

Slide 26 text

响应式模式-多媒体 13年5月20⽇日星期⼀一

Slide 27

Slide 27 text

响应式模式-多媒体 @media (max-width: 480px) { .video-container video { width: 400px; } } 13年5月20⽇日星期⼀一

Slide 28

Slide 28 text

响应式模式-多媒体  Video Html5 video Flash(js) @media (max-width: 480px) { .video-container video { width: 400px; } } 13年5月20⽇日星期⼀一

Slide 29

Slide 29 text

响应式模式-表单  Basic form  Search form 13年5月20⽇日星期⼀一

Slide 30

Slide 30 text

响应式模式-模块  Switchable  Accordion  Overlay 13年5月20⽇日星期⼀一

Slide 31

Slide 31 text

响应式模式-模块  Switchable 13年5月20⽇日星期⼀一

Slide 32

Slide 32 text

响应式模式-模块  Switchable (kissy的switchable⽀支持响应式较⿇麻烦) 13年5月20⽇日星期⼀一

Slide 33

Slide 33 text

响应式模式-模块-overlay 13年5月20⽇日星期⼀一

Slide 34

Slide 34 text

响应式模式-模块-overlay 13年5月20⽇日星期⼀一

Slide 35

Slide 35 text

etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式项⺫⽬目协作流程  常⽤用响应式技术polyfill  响应式在移动端  响应式在服务端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一

Slide 36

Slide 36 text

响应式协作流程 各种响应式项⺫⽬目后总结如下： 13年5月20⽇日星期⼀一

Slide 37

Slide 37 text

etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式项⺫⽬目协作流程  常⽤用响应式技术polyfill  响应式在移动端  响应式在服务端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一

Slide 38

Slide 38 text

常⽤用响应式技术polyfill  Media query兼容实现  Picture兼容实现 13年5月20⽇日星期⼀一

Slide 39

Slide 39 text

Media query兼容实现  Ie8及其以下不⽀支持 13年5月20⽇日星期⼀一

Slide 40

Slide 40 text

Media query兼容实现  Respond.js  Css3-mediaqueries-js  Etao的解决⽅方案 13年5月20⽇日星期⼀一

Slide 41

Slide 41 text

Respond.js  1k不到  ⽀支持跨域（跨cdn） 但⾄至少有500ms闪屏  仅⽀支持min-width和max-width  额外多304请求 https://github.com/scottjehl/Respond 13年5月20⽇日星期⼀一

Slide 42

Slide 42 text

Respond.js 13年5月20⽇日星期⼀一

Slide 43

Slide 43 text

Css3-mediaqueries-js  所有Mediaquery 完全兼容实现  和repond.js相⽐比，性能较差（140ms vs 15ms）  不⽀支持跨域 13年5月20⽇日星期⼀一

Slide 44

Slide 44 text

13年5月20⽇日星期⼀一

Slide 45

Slide 45 text

Media query兼容实现 1.类respond.js切换内联css 优点：⾃自动化、使⽤用⽅方便 缺点：跨域配置⿇麻烦、性能(请求css⽂文件，解析mediaquery慢、js偏⼤大) 2.切换css⽂文件 优点：⽂文件分离，load时按需加载，js⼩小 缺点：多⽂文件管理⿇麻烦，当media query不⾜足1k时多⼀一个请求 3.切换全局class 优点：⽅方便管理 js⼩小 缺点：load时所有css加载，但其实不多 13年5月20⽇日星期⼀一

Slide 46

Slide 46 text

Etao media query 兼容⽅方案  全局切换class  引⼊入less解决css重复维护问题  整合⾄至kissy gallery guide https://github.com/miaojing/responsive 13年5月20⽇日星期⼀一

Slide 47

Slide 47 text

Mediaquery兼容切换全局class https://github.com/miaojing/responsive/blob/master/1.0/guide/ mediaquerypolyfill.md 13年5月20⽇日星期⼀一

Slide 48

Slide 48 text

Mediaquery兼容切换全局class https://github.com/miaojing/responsive/blob/master/1.0/guide/ mediaquerypolyfill.md 13年5月20⽇日星期⼀一

Slide 49

Slide 49 text

Picture兼容实现  Picture Picturefill  参考picturefill实现（可⽤用性、只加载⼀一次图⽚片、图⽚片懒加载） https://github.com/scottjehl/picturefill https://github.com/miaojing/responsive/blob/master/1.0/guide/ picturepolyfill.md 13年5月20⽇日星期⼀一

Slide 50

Slide 50 text

etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  常⽤用响应式技术polyfill  响应式在服务端  响应式在移动端  响应式协作流程  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一

Slide 51

Slide 51 text

响应式在服务端  Image的响应 mobile和pc图⽚片⼤大⼩小规则的响应 13年5月20⽇日星期⼀一

Slide 52

Slide 52 text

响应式在服务端  Image的响应 mobile和pc图⽚片⼤大⼩小规则的响应  Css/js的响应 13年5月20⽇日星期⼀一

Slide 53

Slide 53 text

响应式在服务端  Image的响应 mobile和pc图⽚片⼤大⼩小规则的响应  Css/js的响应 渐进增强/优雅降级（仅pc兼容IE/仅移动端触屏） 13年5月20⽇日星期⼀一

Slide 54

Slide 54 text

响应式在服务端  Image的响应 mobile和pc图⽚片⼤大⼩小规则的响应  Css/js的响应 渐进增强/优雅降级（仅pc兼容IE/仅移动端触屏）  Html的响应 13年5月20⽇日星期⼀一

Slide 55

Slide 55 text

响应式在服务端  Image的响应 mobile和pc图⽚片⼤大⼩小规则的响应  Css/js的响应 渐进增强/优雅降级（仅pc兼容IE/仅移动端触屏）  Html的响应 不同设备不同数据的响应，如宝⻉贝数量pc下80个，mobile下 20个；商品详情⻚页pc下直接展⽰示，mobile下出‘查看详情’按钮 13年5月20⽇日星期⼀一

Slide 56

Slide 56 text

Etao服务端UA判断通⽤用库  含PHP和JAVA2个版本  业界成熟的⽅方案: Detect Mobile Browsers WURFL  Etao基于WURFL适当裁剪 demo 13年5月20⽇日星期⼀一

Slide 57

Slide 57 text

Etao服务端UA判断通⽤用库  含PHP和JAVA2个版本  业界成熟的⽅方案: Detect Mobile Browsers WURFL  Etao基于WURFL适当裁剪 demo 13年5月20⽇日星期⼀一

Slide 58

Slide 58 text

Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等 13年5月20⽇日星期⼀一

Slide 59

Slide 59 text

Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 13年5月20⽇日星期⼀一

Slide 60

Slide 60 text

Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以⽤用到 13年5月20⽇日星期⼀一

Slide 61

Slide 61 text

Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以⽤用到  3.判断是否是pc 13年5月20⽇日星期⼀一

Slide 62

Slide 62 text

Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以⽤用到  3.判断是否是pc 数据内容的响应、判断图⽚片响应可能要⽤用到 13年5月20⽇日星期⼀一

Slide 63

Slide 63 text

Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以⽤用到  3.判断是否是pc 数据内容的响应、判断图⽚片响应可能要⽤用到  4.判断是否移动端 13年5月20⽇日星期⼀一

Slide 64

Slide 64 text

Etao服务端UA判断通⽤用库 根据⺫⽬目前响应式实践项⺫⽬目中遇到的问题，暂定api如下：  1.判断是否是mobile端 数据内容的响应、切换mobile端特有的 meta viewport 等  2.判断是否是平板（ipad等） 数据内容的响应、切换平板端特有的 meta viewport 等都可以⽤用到  3.判断是否是pc 数据内容的响应、判断图⽚片响应可能要⽤用到  4.判断是否移动端 数据内容的响应、切换兼容ie的css、js可以⽤用到/ 加载触屏事件js⽀支持 13年5月20⽇日星期⼀一

Slide 65

Slide 65 text

 5.根据UA推算出分辨率 可⽤用于响应图⽚片的在移动端的初始值 参 考en.wikipedia.org/wiki/List_of_displays_by_pixel_density  6.判断是否ios  7.判断是否安卓  8.判断⽤用户的⺴⽹网络类型 13年5月20⽇日星期⼀一

Slide 66

Slide 66 text

etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式协作流程  常⽤用响应式技术polyfill  响应式在服务端  响应式在移动端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一

Slide 67

Slide 67 text

响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇) 13年5月20⽇日星期⼀一

Slide 68

Slide 68 text

响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇) 13年5月20⽇日星期⼀一

Slide 69

Slide 69 text

响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇) 13年5月20⽇日星期⼀一

Slide 70

Slide 70 text

响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇) 13年5月20⽇日星期⼀一

Slide 71

Slide 71 text

响应式在移动端  移动端的优势体验（44px原则/User-select/Touch事件 onorientationchange旋转/ondevicemotion摇⼀一摇) 13年5月20⽇日星期⼀一

Slide 72

Slide 72 text

响应式在移动端  移动端的优势体验（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⽇日星期⼀一

Slide 73

Slide 73 text

etao响应式实践⼩小结  响应式设计  常⻅见响应式模式及其实现  响应式协作流程  常⽤用响应式技术polyfill  响应式在移动端  响应式在服务端  那些年，踩过的⼀一些坑 13年5月20⽇日星期⼀一

Slide 74

Slide 74 text

那些年，踩过的⼀一些坑  因淘宝rms发布系统，Media query的写法注意  Media query（webkit w3c）滚动条差异  Iphone下背景显⽰示不全  Iphone5下主屏打开上下⿊黑边框 13年5月20⽇日星期⼀一

Slide 75

Slide 75 text

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⽇日星期⼀一

Slide 76

Slide 76 text

media query width差异  Webkit内核 计算不包含滚动条  IE9 ff等包含滚动条  W3C标准不包含 13年5月20⽇日星期⼀一

Slide 77

Slide 77 text

Iphone下背景显⽰示 http://ux.etao.com/posts/687 13年5月20⽇日星期⼀一

Slide 78

Slide 78 text

Iphone下背景显⽰示不全  Viewport的设置⽅方法  原因是viewport的设置影响根元素的宽度 13年5月20⽇日星期⼀一

Slide 79

Slide 79 text

Iphone5下主屏打开上下⿊黑边框  viewport的meta移除width=device-width http://stackoverflow.com/questions/ 12656200/how-can-i-make-my-web-app- iphone-5-compatible 13年5月20⽇日星期⼀一

Slide 80

Slide 80 text

谢谢⼤大家  感谢ux交互委员会  感谢etao⾸首⻚页项⺫⽬目组（妙净、墨峰、栖邀、李杰）  感谢响应式兴趣⼩小组（ww: 958033829）（妙净、墨峰、⾬雨 异、基德、李杰、⼦子宽、岑安、乐淘、邓萌等） ⺫⽬目前的我们的响应式设计在移动端的体验有待提升，还要继续努⼒力~ 13年5月20⽇日星期⼀一