(陈本峰)HTML5andMobileStrategy.v2

HTML5与企业移动化战略陈本峰2013－8•云适配创始人CEO•W3C中国区HTML5布道官•前微软美国总部IE浏览器核心研发团队网页跨屏适配云平台8,9,10关于我手机网民：4.64亿PC电脑网民：3.83亿手机已是第一大上网设备手机是互联网流量的主要增长点•自主开发•APP客户端•移动网站•第三方•微信公众账号•微博企业账号•…移动互联网的主要信息载体企业移动化战略选择：APP客户端／移动网站多平台分别开发一次开发、多处运行APP客户端移动网站开发成本维护成本多个平台代码老版本兼容问题多新功能A/B测试难仅一份代码用户版本统一A/B测试方便，迭代快速APP客户端移动网站速度及功能APP客户端移动网站UI反应速度快直接访问硬件API可以离线使用UI反应较迟缓对硬件API支持弱需要在线使用市场推广APP客户端移动网站用户需要下载应用商店审核内容无法被搜索推广方式有限无下载、瞬间打开随时上线搜索引擎优化推广途径多、易传播商业利益APP客户端移动网站应用商店分成广告插件对应用内容分析能力有限100％收益推送页面相关广告，最大化广告收益APP客户端移动网站谁会赢？移动网站显示：适合手机屏幕阅读，无需缩放导航：适合手指操作，简洁导航性能：在低带宽下仍可以快速载入功能：有效利用手机特性(GPS、电话、短信…)什么是移动网站？仅仅在手机上显示≠移动网站移动网站是为最佳的移动浏览体验定制的网站营销作用移动网站助您在竞争中胜出－不适合移动浏览的网站会直接导致用户流失数据来源:谷歌,2012“适合移动浏览的网站是我更可能选择一个产品或服务。”“若在短时间内看不到我找的内容，我会迅速选择其他服务。”品牌作用移动网站助您建立良好的品牌形象－不佳的移动网站会损害您的品牌形象“我会因为不佳的移动浏览体验而对一个我喜欢的公司或品牌感到失望。”“不流畅的移动网站体验会损坏我对此品牌的整体印象。”“较差的移动体验使我不愿选择该品牌的产品或服务。”数据来源:谷歌,2012•良好的浏览器支持•独立浏览器•APP内嵌浏览器（微信、微博）•丰富的交互能力•Audio,Video•Canvas,SVG•Geolocation•MediaCapture•WebStorage•…HTML5开发移动网站HTML5移动网站的开发方案•独立开发移动版•开发响应式网站•转换原PC网站-云适配独立开发移动版•实现方式：独立编写HTML/CSS/Javascript代码•优势•内容完全可定制•页面流量可最优化•可兼容非HTML5浏览器•挑战•开发成本很高•数据同步困难•跨屏扩展困难•多个网址，推广成本高响应式设计•实现方式：用CSS3的mediaqueries加载不同的样式•优势•同一网址，方便推广•内容实时自动同步•跨屏扩展容易•挑战•开发成本较高•页面流量很大•内容定制能力有限•只适用HTML5浏览器云适配•实现方式：在原网页中加入一行云适配JS代码，动态修改DOM•优势•同一网址，方便推广•开发成本低•内容实时自动同步•内容可定制•跨屏扩展方便•挑战•页面流量中等•只适用HTML5浏览器HTML5移动网站的开发挑战9.6%1.4%1.0%0.7%0.5%0.4%0.3%0.3%0.3%Android机型数据来源:百度移动互联网发展趋势报告2012Q3•手机屏幕尺寸适配•屏幕分辨率适配•浏览器兼容HTML5移动网站的开发挑战2.90%6.60%12.40%20.10%31%18.30%5.30%2.90%0.50%0.20%0.20%0.30%4.40%25.60%38.70%1.90%10.00%0.70%-5.00%5.00%15.00%25.00%35.00%45.00%正在使用的手机屏幕打算购买的手机屏幕数据来源：ZDC2012年中国手机用户屏幕尺寸调查报告HTML5移动网站的开发挑战数据来源:百度移动互联网发展趋势报告2012Q3HTML5移动网站的开发挑战数据来源:百度移动互联网发展趋势报告2012Q3云适配愿景–OneWeb，AnyDeviceWEB单屏时代WEB多屏时代WEB云适配客户案例－企业官网微软亚太集团联想浪潮云适配客户案例－电商RoseOnly玫瑰电商好利来蛋糕中国人保云适配客户案例－媒体创业邦CSDN《汽车博览》云适配客户案例－创投IDG资本真格基金经纬创投云适配客户案例－机构微软云加速器HTML5梦工厂国际互联网标准联盟W3C云适配客户案例－高校中国科技大学西北政法大学云适配客户案例－政府中关村政府美国Bellevue市政府西安交警陈本峰[e-mail]|13952800186|@陈本峰一行代码，帮您抓住4亿手机网民