自适应终端

期望效果

微软中国官方网站

制作思路

• 采用CSS3的Media Queries技术来自动匹配用户终端设备
• 采用同一套Template Layout，在不同终端实现不同的风格
• 向后渐进增强，在不支持的设备下采用脚本方案解决

响应式首页效果

DEMO

邮件客户端

发展趋势

移动端在不断增加，桌面在不断减少。数据来自于Litmus.com

电子邮件客户端市场比例

移动端EDM存在的问题

• iOS设备上文本和图片缩小
• 安卓设备撑破容器

制作思路

• 移动终端第一
• 采用Responsive设计原理
• 向前兼容，给使用高端设备的用户一个更好的体验
• 支持低端设备

未来的EDM效果

自适配用户终端

Ebooking的EDM模板效果

移动端效果

桌面效果

Ctrip RWD EDM效果

移动端效果

桌面效果

不兼容RWD的效果

其他RWD EDM模板效果

• DEMO1
• DEMO2

祝愿携程马年大展宏图，祝大家新春快乐，阖家幸福！！！

谢谢！

by Ctrip UED @大漠、＠王伟红、＠王建