多屏时代的网页开发技术.pdf

多屏时代的网页开发技术 陈本峰 2013 －8 关于我 • 云适配创始人CEO 网页跨屏适配云平台 • W3C中国区HTML5布道官 • 前微软美国总部IE浏览器 8, 9, 10 核心研发团队 WWW – 过去 WEB WWW – 现在 WWW – 未来 手机已是第一大上网设备 手机网民：4.64 亿 PC电脑网民：3.83 亿 移动网站 什么是移动网站？仁仁在手机上显示 ≠ 移动网站 移动网站是为最佳的移动浏览体验定制的网站 显示 ：适合手机屏幕阅读 ，无需缩放 导航 ：适合手指操作，简洁导航 性能 ：在低带宽下仍可以快速载入 功能 ：有效利用手机特性 (GPS、电话、短信 …) 营销作用 移动网站助您在竞争中胜出 －丌适合移动浏览的网站会直接导致用户流失 “适合移动浏览的网站是我更可 “若在短时间内看不到我找的内容， 能选择一个产品或服务。” 我会迅速选择其他服务。” 数据来源: 谷歌, 2012 品牉作用 移动网站助您建立良好的品牉形象 －丌佳的移动网站会损害您的品牉形象 “我会因为不佳的移动浏览体验而对一个 我喜欢的公司或品牌感到失望。” “不流畅的移动网站体验会损坏我 对此品牌的整体印象。” “较差的移动体验使我不愿选择该 品牌的产品或服务。” 数据来源: 谷歌, 2012 多屏时代Web开发的挑战 – 适配 Android 手机机型市场分布 三星Galaxy系列屏幕尺寸图 网页跨屏适配开发方案 • 针对丌同设备分别开发丌同版本 (, ) • 响应式设计 • 云适配 针对丌同设备分别开发丌同版本 • 实现方式：独立编写前端/后端代码 • 优势 • 内容完全可定制 • 页面流量可最优化 • 可兼容非HTML5浏览器 • 挑战 • 开发成本很高 • 数据同步困难 • 跨屏扩展困难 • 多个网址，推广成本高 响应式设计 响应式设计 – 历叱 Responsive Web Design by ETHAN MARCOTTE May 25, 2010 /a