响应式Web设计在跨终端广告创意中的应用

内容简介

• 为什么要跨终端；
• 需要关注哪些终端；
• 跨终端之路；
• Cross方案，如何优化跨终端网站；
• 未来终端设备；
• 常用工具；

跨终端Web最初尝试之路

• 1. 网页转码（将桌面端的网页转码为WAP版本）
• 2. WAP建站工具（快速搭建无线WAP网站）
• 3. 定制化（针对不同终端设备定制开发，桌面版本+移动版本）
• 巨大的工作量：设计、开发、更新、维护……
• 独立的域名：多个入口、分享混乱
• 4. App化（通过PhoneGap Hybrid框架实现Web的App化）
• 巨大的工作量
• 需要下载安装
• 推广渠道繁杂
• 搜索引擎无法找到

广告创意技术选型的主要因素
（以上方案，对于广告活动网站不够理想）



响应式Web设计到底是不是解决跨终端的银弹？

• 媒体查询
• 流体布局
• 跨终端之路；
• 灵活图片

CROSS提供两种响应式Web的建站方案：









为什么要移动优先？









移动平台上的性能优化

• 图片优化处理；
• 轻量级JS库；
• 减少HTTP请求次数；
• 延迟加载图片；
• 压缩JS和CSS；

响应式设计的图片处理： 为什么要对图片进行处理？
根据设备的分辨率不同加载不同类型的图片，不会造成宽带的浪费





页面默认src地址的图片，是适用于移动设备上的小图片，大图的src地址使用html5 data-自定义属性隐匿； 利用JS判断浏览器窗口大小来决定图片src的值为原src的地址还是data-自定义属性的地址；




页面默认src地址的图片，是适用于普通屏幕分辨率的图片； 利用JS判断设备的Ratio大小来决定图片src的值为原src的地址还是Retina图片的src地址；

• 使用轻量级JS库
• jQuery太重，使用XUI或者Zepto代替
• 减少HTTP请求次数
• 文件合并
• 使用CSS Sprites
• 延迟加载图片
• 使用延迟加载技术，页面只加载在浏览器可视区域内的图片
• 压缩Javascript和CSS
• 压缩Javascript和CSS代码能够有效地减少页面大小
• JS压缩 www.jscompress.com
• CSS压缩 www.csscompressor.com

未来跨终端Web的展望


















响应式设计工具