这是断断续续的一点笔记，仅供参考。没有系统思考，而且也虎头蛇尾了，请见谅。
MobileMe的HTML很干净，但是并非遵循渐进式增强的原则，没有保证所有的标签都基于语义来选择。在登陆页面的地方，发现它们使用了Webkit支持的css transition属性，所以像input field高亮的过程有渐量的过程，非常优雅。它的登陆表单的提交按钮是个link，使用onclick事件提交，这似乎并非是很好的设计。
首页的细节：使用Javascript回写了浏览器类型和平台类型到body上面，更加精确的实现因不同平台而异的css样式，而且这样css rule的可读性要好于trick。现在一个严重的问题就是Safari和Firefox的不同版本有的时候也有bug，而且它们又不像IE6/7有相对可靠的css trick来实现区分，所以apple的做法还是很实用的。apple的设计实际上也是基于像素的，在增大浏览器字体以后却依然没有影响布局，这主要依赖于目前比较先进的浏览器都基于比例进行放大，使用px依然可以保证完美的放大渲染。IE的低版本当然没有这么智能，但是谁在乎呢？在乎的人都转现代浏览器了。
me.com登陆以后进入的是邮箱，界面非常清爽，左上角是产品的切换，中间是邮箱的操作，右侧是搜索和退出，这样的对齐很清晰。但是作为邮件产品的功能按钮设计在中间是否操作起来不是很方便呢？按钮都是使用了复杂的html结构来实现，是以切图和显示效果为驱动的，阴影和圆角都是基于图片，这样可能是为了兼容windows平台而考虑。这样的实现在大型互联网应用中非常常见，因为兼容性往往是使用人数众多的应用的一个重点。Apple所做的css sprites是比较震撼的，其中3个sprites非常之复杂，它们明显的减少了image的请求次数。如此规模的使用sprites，在布局里面以px为单位就容易理解了，因为如果不使用px而是使用相对单位如%或者em，那么在缩放的时候经常会破坏你精心制作的sprites。
修改产品设置，下拉菜单和mac里面的渲染效果很一致，弹出的下拉菜单三面有阴影，4个圆角，一共使用了8个元素通过绝对定位来实现。这样在IE里面很有可能出现奇数高度的下拉框绝对定位产生1像素偏差的bug，苹果应该是通过js修正了。菜单本身使用UL，还是靠谱的。
产品修改的面板也和Mac的非常一致，是一个模态窗，使用Tab切换选项。效果和OSX的面板非常一致。不过有一个细节需要注意：OSX的配置面板有一个非常帮的交互设计，那就是面板的大小会根据内容的多少进行剪裁，然后实现动态的改变大小，这个对形成视觉对齐非常有意义，我一直认为这是一个非常优雅的解决方案（比windos的那种选项卡设计好了很多）。可是在Web上MobileMe的这个模态窗是固定大小的，切换内容比较小的Tab时它并不会缩小。
Mail设置提供的功能不多，但是很贴心，比如它可以选择字典的语言（8种欧洲语言，纠错使用）。是否默认显示Bcc域这个设计也很体现Mail的商务特性（因为一些人的职责就是成天Bcc，所以他们肯定喜欢这个设置）。
这两天试用下来发现MobileMe的页面还是有不少小bug的，Firefox下没有Safari完美，无可厚非，不过这样的一个产品，走的越远，它维持与操作系统上面原生软件的体验一致所付出的代价就会越高。不知道SproutCore能不能走的更好。失去兴趣进一步研究了，Apple比较尊重先进的Web特性的实现，也绕过了过多的肮脏patch，基本上都用了比较优雅的方案解决，可是它不支持IE的这个决定风险还是很大的。可是我喜欢这样，让浏览器成为Webkit和Geoko的天下，让那些微软操作系统早点走出历史舞台吧。