案例分享:Windows Phone上的移动浏览体验-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

案例分享:Windows Phone上的移动浏览体验

简介:

      为智能手机用户提供最好的移动浏览体验是Windows Phone浏览器开发团队追求的目标,我们团队里有几个小组共同实现这个目标,我们分别负责:出色的浏览器UI设计,浏览各类网站时的兼容性,以及高效的页面渲染和呈现。即使我们每个小组都努力工作达到了各自目标,我们可能会遗漏最关键的一点——为用户提供最好的网页浏览体验必须要靠我们团队和所有网页开发者共同合作才能完成!要达到这一点必须由我们通力合作,确保网页的内容和服务能在Windows Phone上呈现完美的效果。

 
    众所周知,因为来自移动设备的浏览量与日俱增,因此网页的开发资源永远显得不足。可惜“设计一次,在所有设备上运行”的理想至今能完全实现。幸运的是因为IE9加入到Windows Phone7.5上,我们朝此目标迈出了一大步。通过在PC和windows phone上共享IE9内核,网页设计不仅可以在桌面和手机上基于同样的标准,而且还通过硬件加速提升浏览性能。我们乐于听到Windows Phone7.5网页开发者的反馈,因此这篇博客中收集并整理了一些开发者的反馈声音。
 
    最近,ESPN.com将他们卓越的Web网站体验搬到了Windows Phone上,我们觉得有必要将其开发Windows Phone版本网页的经验与大家分享。这里要提一下, ESPN此次对Windows Phone平台的网页兼容工作始于我在他们官网支持页面的一条用户请求:我的很多同事是体育迷,大家经常询问我在WP7.5上浏览体育类网站的体验。所以我像其他ESPN的普通用户一样给ESPN写了这条留言。我发的留言很快就传到了ESPN的移动网站开发团队;说实话,我非常的敬佩ESPN对用户需求的响应的迅速。以下是团队的技术经理Mike Marrone在WP7.5平台IE9相关开发上分享的经验:
 
    总体上说,整个开发是个简单的过程。我们只支持WP7.5和IE9是因为其对CSS3/HTNL5良好的支持。由于已经在旧型号手机上我们已经有一个现成的移动版网页,这个优化相当方便。其实在WP7.5平台上做开发的过程几乎可以完全在桌面端的IE9上完成,在PC上完成所有开发工作后,只需迁移到手机上进行最后的质量验证。
一些细节的开发经验分享:

1) WP7.5不支持“display:box”的CSS样式。这个样式一般用来实现自动旋转对齐,而无需用程序计算透视试图的大小(也就是说浏览器根据设备旋转状态自动转化这些内容的位置)。WP7.5为我们提供了更好的选择,因为他是唯一支持CSS "vw"单元的手机浏览器。

[Amin] 如需进一步了解vw units,请查看 这里 这里 

2)WP7.5与其他设备在CSS上的主要差别集中在梯度方面,但由于WP7.5有一套细致可靠的选项使我们在开发上不会遇到太大的问题。
[Amin] 如需进一步了解IE9的梯度选项的使用细节请查看 这里

3)额外添加JavaScript的触摸事件是个不错的选择。我们期望你们在手机开发上获得成功!
 
    你可以想象我们是多么希望多听到这样的案例!我们自己内部经常使用PC端IE测试bug,所以很高兴听到这IE不仅是在我们内部,在外界也被用作一款开发的工具。我们欢迎用户反馈(这些反馈将会有助于我们未来的产品规划),同时也欢迎大家直接留下进一步的反馈和评论。

 

    Windows Phone平台上的IE9能够提供丰富多样的表现形式和完美的用户体验,要达到这一目的,只需要修改网页的user-agent和html&CSS底层标准(而不是预先自写的)。ESPN仅投入有限的资源进行开发,却给用户提供了卓越的浏览体验。我身边不少朋友将ESPN主页放到桌面上,即使我以后发现我的高级经理在会议期间偷偷看ESPN新闻,我也不会感到奇怪。
下面是ESPN.com页面在Windows Phone7.5上之前(左)和之后(右)的截屏,我们要对ESPN说声感谢,同时我们期望看到ESPN做出更加丰富的表现形式和更优秀的用户体验!
鸣谢来自ESPN的Krys Krycinski, Mike Marrone, 和James Ballow.
 
Amin Lakhani
项目经理 Windows Phone团队

英语原文:

http://windowsteamblog.com/windows_phone/b/wpdev/archive/2012/05/02/delivering-rich-mobile-web-experiences-in-windows-phone-7-5-espn-com-case-study.aspx

 

 

 

  

本文转自 飞雁 51CTO博客,原文链接:http://blog.51cto.com/felixyan/865408 ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章