it Flies Like Mario – 像Mario一样飞

从今天起，开始不定期对我所能掌握的移动设备们（当然，主要是手机）进行WEB兼容性测试，并将测试结果总结性地记录在此分享给需要的朋友。测试所使用的工具是之前一直在维护的手机兼容性测试套装，由于涉及到公司商业保密性等因素，暂不便于开放出来。对于测试工具，推荐参考W3C MWI Team的Mobile Web Test Suites Working Group，这里面的工具套装制作得非常全面细致，很棒。

另外，对于原始测试结果的数据记录，推荐使用Excel来做全面的记录。Excel还是非常强大的，经过一段时间的原始数据积累，我们可以用计算公式来做总数、平均值等累加，另外可以生成统计报表，如下图所示，非常帅XD。

---

言归正传，这次拿到两款机型，分别是阿尔卡特OT800以及联想Miro i61，它们也分别是淘宝手机“无双”、“灵素”的原型机。作为淘宝定制手机，它们内置了很多淘宝客户端应用软件。想知道这两款手机的更多信息，欢迎访问淘宝手机官方旗舰店进行更细致的了解。

下面你看到的，是针对Alcatel：OT800的WEB兼容性测试记录。

注意：对于本兼容性测试系列，原始测试数据将不会悉数列出，文章中只会标明需要注意的测试点（兼容性有问题或需要注意的地方）以提供设计的参考依据。另外，这里只会针对手机内置浏览器进行测试，其它第三方浏览器（Opera Mini、UCWEB、QQ浏览器等）将不在此范围内。

阅读全文 »

响应沉鱼姐的号召，以后会坚持每天都抽半个小时左右时间来浏览Mobile领域的新闻和博文。在一周或两周再汇总review一下这个星期比较有价值的收获，随后在Blog中分享给大家：）

好文推荐的范围可能会涵盖以下几方面：

• 移动业内资讯（包括：行业动态/手机评测/运营商新闻/数据统计 等，这部分文章可能占比很高）
• 新技术应用（应用于Mobile领域的新技术）
• MobileWEB设计开发文章（这个是重点，但是可能不会很多）
• 经典文章（一些有长期参考价值的经典老文章，可能包括交互、设计、前端等领域）
• 好站推荐（一些有特色的MobileWEB站点成品）

精力有限。也许你会发现，分享的东西很杂很乱还没有归类，也许你会发现有些时候分享的东西很少、很偏、很单一或者根本没东西可分享。这都属正常情况，请谅解：）另外，考虑到英文资料会居多，我可能会对一些文章做中文的概要指引。

OK不多废话，下面是前一阶段看到的一些文章，希望会有些价值：
阅读全文 »

本文译自carsonified.com，原作者为Chris Mills
原文链接：http://carsonified.com/blog/features/css/coding-for-the-mobile-web/，转载请注明出处。

---

Mobile Web下的编码设计

简介

晚上好，各位！在这篇文章中，我将努力揭开Mobile Web开发的神秘面纱，换句话说，也就是为了移动设备上的用户体验可以被接受，代码得怎么设计。我将阐述“Mobile Web”与普通网站的不同之处、可以让网站成功运行在移动设备和桌面浏览器上的基本技巧、一些Mobile Web设计中的建议和禁忌、以及大量资源 – 你可以去找到更多有用的信息。

Mobile Web和普通网站到底有何不同呢？

这是个很好的问题 – 首先，也许我们应该从“什么是Mobile Web”的问题开始。毕竟，用户用移动设备访问的Mobile Web，跟他们在家里用台式机访问的网站是独立的不同的部分。当我说“Mobile Web”时，我指的是“通过移动设备访问的网站”。

在Opera，我们全身心投入而创造出的浏览器允许你查看整个网络，不管浏览设备是否有这个能力。只要你在建立网站时，付出一点儿细心、尊敬并遵循Web标准，你就可以为所有人所有设备创建只有一个版本的网站 – 唯一的一个网站。但是，有一些例外情况 – 在某些情况下，只有分版本的网站才行得通，一会你会看到这一点。

移动领域的竞争环境并不平衡

在桌面领域，对于我们前端开发者来说，形式正在好转 – 大多数现代浏览器已经对Web标准支持的非常好了，无论是Opera、Firefox（以及其他Gecko内核浏览器）或者Safari（以及其他Webkit内核浏览器），甚至IE带给我们的痛苦都比原来少了。虽然IE6的用户群体数量仍然非常杯具，但这应该归结于大多数人封闭的使用习惯等因素。但是，移动设备领域在这方面却是不同寻常的：

• 你拥有能为“Full Web”提供支持的浏览器，像iPhone上的Opera Mobile和Safari。Opera Mobile使用了与桌面版本相同的渲染引擎，所以对标准的支持相差无几。
• 你拥有并不很爽的浏览器，例如IE，它们对Web标准仅能提供有限的支持。它们中的一部分只支持WAP（例如WinWap），另一些支持其他像CHTML或HTML-MP这样的标准（例如日本NTT DoCoMo的iMode浏览器），还有一些只支持Web标准中的有限子集（例如Netfront、Pocket IE、以及Blazer）。
• 最后，你拥有OperaMini，以及其他通过代理机制的浏览器。它主要只是作为连接用户和一个大服务器群的客户端界面。当用户提交一个URL时，客户端会让服务端查找这个页面。然后它会把页面转换成一个轻量级的二进制标记语言，将它格式化成适合移动设备查看的形式，并发送回客户端显示。这种方式的最主要优势，是可以使页面体积减少90%左右，帮助用户节省很多带宽费用。这种标记语言表明Web标准并不能很好的表现在移动设备上，因为在这种服务的方式下，OperaMini对Ajax/JavaScript某些方面将支持的不是很好 – 在这儿有更详细的解释。

注意：不要指望你的超级Ajax和DOM脚本动画网站在移动设备上会有良好表现。JavaScript在移动设备上的支持程度千差万别。时刻提供优雅降级吧。这种做法有一个例子叫做Hijax。

我们可以看到，在移动设备的跨浏览器兼容方面，你要思考的问题有很多。但是不要怕 – 我随后的建议会给你指引一个正确的方向；并且随着时间的推移，移动浏览器对标准的支持将会得到改善，届时我们前端开发者真的再也不需要为它们操心了。你问我这一切什么时候会实现？Who knows！

阅读全文 »

本文译自dev.opera.com，原作者为Brian Suda
原文链接：http://dev.opera.com/articles/view/introduction-to-the-mobile-web/，转载请注明出处。

Mobile 1：Mobile WEB介绍

简介

Opera的WEB标准课程是关于提倡WEB最佳实践，并完整地覆盖了建立现代站点所需要的所有技能和知识点，它使我们工作和浏览的WEB站点变得更加美好。这个迷你系列展开探讨了核心的WEB标准课程文章，你应该采纳所有的技能和观念，利用他们帮助你优化网站并顺利地在移动设备（或其他另类设备）上运行。首先我会进行一些常规和特殊的思考，在移动设备上运行页面，然后去写样式、编脚本并且测试，因为他们跟Mobile WEB开发相关。

这篇文章的结构如下：

• Mobile WEB的定义
• 与Mobile WEB有关的挑战
• 移动的限制性
  • 屏幕尺寸/分辨率
  • 输入机制
  • 处理能力和可用内存
  • 可用字体和颜色
  • WEB标准的支持
• 移动的优势
  • Mobile意味着随时移动!
  • 摄像头、电话和其他硬件特性
• Mobile web技术
  • WML
  • Compact HTML
  • XHTML mobile profile
  • XHTML
• CSS 和语义标记
  • 图片替换
  • CSS颜色值
• 摘要总结
• 习题

阅读全文 »

2009年12月22日，终于跟老婆去领了结婚证。感觉无法用语言表达。希望我们能一直快乐下去：）也希望我所有的朋友们都可以幸福。新的Blog还有很多BUG，甚至还有N多功能都还没有，不过将来它一定会越来越丰富，我会一直将它完善下去，就像我们的生活一样。