Readability: 不让 Safari 5 专美于前

Safari 5 的一个亮点是 Reader:除掉网页里的广告,动画,无关 div 等等,纯粹呈现内容。

其实其他浏览器上早也可以实现这一功能,arc90 的 Readability

在 Readability 页面上,按照向导步骤,指定自己中意的目标格式,包括背景,字体大小,内容宽度等,完成这些设置,在自动生成的 javascript 连接上单击右键,存到浏览器收藏夹。以后在浏览一般网页时,觉得字体太小或者内容太混乱时,单击这个收藏夹按钮:全都搞定。
使用 Readability 的显示效果很不错,不用担心,没有内容丢失,文章中的图片等也还在,还可以随时方便地回到原始网页,速度和稳定性也都没问题。我觉得做得很专业的一个地方是,不篡改浏览器地址栏,URL 还是原始网页的地址,这样如果要复制或者分享等,就不会搞成 Readability 自己私有的了。

还有个八卦,Safari 5 正式宣介,并提及 Reader 功能的时候,作为先行者的 arc90 也觉得光荣有加,因为这是另一个牛X的强者对自己的判断与预见性有力的背书。然后他们很快发现,Safari 和自己绝不是什么殊途同归,Apple 绝对借鉴了不少自己的东西:

不过 Safari 5 的实现的领先之处是,对分页的文章,Reader 功能可以将其全部读取,读者不需要手动翻页。 Reader 界面里提供的缩放在 Readability 里倒是没有,不过 email,打印等两者都不缺。

就去除广告和 visual distraction 这方面来说,不知大家有没有这种体会,有时叫做 trained eyes,我们在 check in 或者 code review 的时候,面对 diff 文件,trained eyes 看起来毫不费力,能抓住重点与核心,而没习惯 diff 文件的哥们,看到那一堆 加加减减圈圈点点 的符号,估计要给恶心死;浏览网页也是类似的,页面抬头的 banner,整个侧边栏,还有正文中嵌入的广告,无论是静态图片,文字还是 flash 视频或动画,现在已经不能分散我的注意力了,好像不存在一样,又一类 trained eyes 效果吧。

所以呢,Readability 的作用,于我,倒不在是将内容纯粹化,而是:字号大小。受限于网站 CSS 里 font 单位的指定,pt,px,em 等,有些页面用浏览器(其实我指的是 IE 哈哈)提供用大字体浏览是没效果的,而 IE 直到 IE8 开始,才提供和 Firefox,Chrome 那样 Ctrl + 加号,减号缩放页面的功能,不过我还一直在用稍老版本的 Maxthon 2.x (我得说,幸亏留着这份版本,更新的 2.x 也不老实了,唉,叹气……),这个 IE Shell 不支持新的 Ctrl + 加号缩放,而且这种按比例缩放有时候让页面变得很恶心,那,这时候 Readability 就好用啦。

虽然官方页面没提,不过 Readability 有好几个使用方法,javascript 是放之四海而皆准的所有浏览器都可以用,另外他们还有 Firefox addonChrome extension,可以看大家喜好选用了。

马上体验 iPad 专用 Gmail 界面

上面是 Google 提供的官方宣传照,针对 iPad 的大屏幕和提高了的分辨率,Google 专门为其设计了这个两栏 Gmail 界面,从 iPad 上访问即可使用。看上去不错吧,很有条理,让用户有“掌控感”。不过…这也太不公平了,不支持 “标准”浏览器,比方 PC/Mac 上的 IE,Firefox,Safari 等,更别提其他的移动设备了,无论屏幕或者分辨率多少。

哦,顺便说一句,这种两栏布局至少按我所知,是在 Outlook 2003 出来的时候发明的(Hey!Microsoft!),后面版本也一直继承着,当然,Outlook 用户也可以选择不要邮件内容面板,只留着邮件标题面板(那就是…现在 Gmail 在一般浏览器里的标准样子),还可以把面板放到下方而不是右侧。另外,Outlook Web Access 也高度模拟本地 Outlook 的实现(在电影里这就是“致敬”了……),提供这样左右两栏布局 —- Outlook Web Access 真的做得很不错,如果不是因为 Exchange 这个后端有时候让人觉得没 Gmail 那么酷,OWA 必定会博得比现在多得多的注意力。

好,回到正题。Gmail 能自动对 iPad 上的访问提供新界面是通过检查浏览器的 user agent 字符串做到的。这是 iPad 上 mobile Safari 发送的 UA。

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

类似办法也用在早年第一代 iPhone 出来的时候,那时没有 native app,只有适配 mobile Safari 的网站,有些杂志网站通过检查 UA 限制只能 iPhone 访问,那我们就通过修改一般浏览器 UA 来绕过检查。

同理,我们修改 PC/Mac 上浏览器发送的 UA 即可访问高贵的专属的尊崇的独享的,盛大开盘的新 Gmail。

Firefox 自然是通过 addon,这个 User Agent Switcher 就挺好。本来就自带了 IE6,7,8 的 UA,iPhone 3.0 的 UA,另外还有几个搜索引擎的 bot:Google,MSN(或者 bing),Yahoo。使用 bot 的 UA 的好处是有些需要付费订阅的网站内容,bot 可以畅行无阻,比方 WSJ。在 edit user agents 菜单里添加上述 iPad 的 UA 就行,添加界面里把 description 和 user agent 写好就行,剩下的用缺省值没问题。

图里的 iPad Safari 是我加的,不是自带的。

Safari 更简单,本来就支持自定义 UA,从 preferences 菜单进去自己找到,添上新值就好了。

Chrome 最麻烦,现在没有可用的扩展。一个很久之前提到的或许可行的方法是修改 chrome.dll,用 16进制 编辑器修改成新值,这个方法我就没试了(UltraEdit 序列号每版都算得越来越精……)。还有人提到可以在启动 Chrome 的时候传个 –user-agent 参数,试试吧。

我记得手机上 Access 的 NetFront 也可以自定义 UA,不过,如果在小屏幕,低分辨率的设备上访问,实用性就不那么大了。嗯,你问如果 Opera 鬼使神差地被放行了进入 iPad/iPhone 怎么办?问 Google 吧 ^_^。

好,为忆苦思甜的目的,先改成 iPhone 的 UA,再改成 iPad 的,分别访问 Google Reader 和 Gmail,对比一下。

iPhone 下 Gmail,只列标题等,比较单调。

iPhone 下 Google Reader。

好,下面换成 iPad 的 UA,再看看 Gmail。嘻嘻,效果出来了吧。这么访问 Gmail,觉得比现在的标准 Gmail 界面要方便多了,不用总是先回到邮件标题列表,再选择阅读了。

很可惜,用 iPad 访问 Google Reader 还是那个德行,没有改变。

因为新界面是为 iPad 设计的,所以左侧标题列表没有滚动条,suppose 用户是用手指拖动的,这在 PC 浏览器上没法模拟,幸好右侧面板上方有 上下 箭头,可以用那个在不同邮件会话里游动;再就是渲染的问题,可以看到官方图里选中邮件有蓝色的高亮,在 PC 上成灰色的反白了,几乎看不见,算是个小遗憾吧。访问时 Firefox 会有工具栏提示此网站要在本地存储数据方便离线使用,选 not now 就好,没碰到什么问题。最后,最要命的是,右侧阅读面板也是没有滚动条的,邮件太长就……

最后,Gmail 的新界面是个人机工程问题,主要是交互设计方面的,和技术嘛,关系不大,希望这个新设计能早日铺开,支持全系列平台和浏览器,让成G 的用户享受到新界面的方便。