上周,我引用了2009年销售的具备互联网功能的移动设备数量的估算数据,并指出这一数字已经超过了便携式和台式电脑的销售总量。在这里,我将向您展示一些有用的工具,用于评估您的网站在当前形式下在移动设备上的运行效果。
观察您的在线商店在移动设备上的表现,最好的方法是直接使用移动设备。但您也可以使用一些免费的在线工具来模拟移动浏览器对您网站的影响。
我使用 TheFreeTiger.com(一所我在密苏里大学参与创办的在线学生刊物)测试了这些工具。我们和许多转型为在线出版商的记者一样,对 CSS 并不熟悉,因此我们使用 Drupal 内容管理系统来开发我们的网站。测试结果令人警醒——我们在移动端优化方面还有很多工作要做。
The Free Tiger 首页。
mobiReady 页面测试
这是一个很好的起点,可以查看特定页面在移动优化方面与普遍接受的标准相比表现如何。mobiReady页面测试会根据W3C移动网页最佳实践对您输入的任何URL进行评估,从而帮助用户确保在移动设备上浏览网站时获得最佳体验。
TheFreeTiger.com 的首页在测试中得了 2 分(满分 5 分),总体预测是,该页面在手机上的显示效果会非常差,甚至可能无法显示。下面列出了各项设计和发展方面的通过、失败和警告标准,这些都会影响移动浏览体验。我们最大的问题是图形尺寸过大,且使用了特定测量值,超出了手机屏幕的尺寸限制。
mobiReady 页面顶部。
这个工具最棒之处在于,它能区分开发标准,并指出页面上违反规则的具体示例。这对于找出哪些图片太大以及页面的哪些部分过度依赖外部资源或表格非常有帮助。
mobiReady 页面底部。
Opera 的小屏视图
除了其流行的移动浏览器 Opera Mini 之外,标准浏览器还提供了一个小屏视图,可用于模拟移动屏幕。如果您在移动优化站点上在大屏和小屏视图之间切换,可以看到站点如何为移动设备或大屏使用不同的渲染指令集。我用 Opera 的首页试了一下。
Opera 首页。
Opera 首页(较小)。
然后我又用 TheFreeTiger.com 试了一次。体验不算糟糕,但也绝对算不上愉快。我们需要更好地安排内容布局,使更重要的功能显示在比招聘页面更高的位置,而那个招聘页面使用的是我们用来招募更多员工的 Uncle Sam Tiger 图标。
Opera 上的 The Free Tiger。
iPhone Tester
这款在线工具由一位澳大利亚开发者在 iPhone 发布前夜为 Atmail 设计,是一种有用的方法,可以让您初步了解您的页面在 iPhone 上如何显示。输入您网站的 URL,您就可以看到 iPhone 渲染效果的近似预览。虚拟设备侧面的一个按钮允许用户切换到横向视图。
iPhone 上的 The Free Tiger。
我们主页上的图片渲染正常,但显然在 iPhone 上太宽了,需要大量手动导航。页眉和页脚过大;用户必须多次横向滚动才能看到网站的主标题和标志。我甚至无法找到任何无需缩放或滚动调整就能完整阅读的标题。
Android SDK
设置此模拟器有些棘手,但它允许用户在计算机上创建虚拟Android设备,因此非常适合测试移动功能。点击此处下载Android SDK,然后按照Ben Hedrington为Mac提供的简单教程或为PC提供的教程进行操作。
我选择下载最新版本的 Android,即 Android 2.1。TheFreeTiger.com 的主页渲染效果相当不错,除了页眉中有一些不需要的文本外,但其他页面上的视频和音频均未能正确加载。当你花大量时间制作这些内容时,重要的是要知道,任何使用 Android 设备访问该网站的用户都无法看到它们。
Android 上的 The Free Tiger。
解决方案
通过在这一系列移动模拟器上运行他们的网站,商家可以大致了解其内容在移动用户眼中的呈现效果。修复导致渲染不良或加载时间过长的一些问题,往往只需为每个页面创建一个简化版本即可。
总部位于俄克拉荷马州塔尔萨市的网页设计公司MDS Media Group的总裁Matt Swezey表示,他过去几个月一直在为其社交城市指南创建移动版,StreetMavens.com。他表示,该网站“会自动检测移动浏览器并显示当前页面的轻量级版本。”
StreetMavens.com 的移动版本。
Swezey 在电子邮件中表示:“我强烈建议向移动设备提供不同的内容,例如更小、经过优化的图片,尽可能用文本代替图片,并剔除在移动浏览器中运行不佳的任何重型 JavaScript。”
他确实承认,对于拥有庞大产品目录的电子商务商家来说,这样做可能很困难。商家可能需要为标准页面和移动页面使用不同的产品图片,以及其他方面的差异。
最终,商家优化其网站以适应移动设备的能力取决于他们的购物车系统。一些购物车确实为用户提供了这些功能。Kryptonic, Inc.(ClickCartPro 的制造商)的总裁兼首席开发者 Nick Hendler 在电子邮件中表示,他的购物车使用 XHTML Strict 代码,这是 W3C 为移动开发者制定的标准。他还表示,用户有能力调整其模板。
Hendler 说:“目前,我们的用户可以调整显示模板(我们称之为‘皮肤’)中的 CSS 和显示设置,以为移动设备提供替代布局。”
由于移动设备的数量正在迅速增长,且移动流量在某些时候可能会超过计算机流量,移动优化可能会成为商家在选择购物车时的一个更重要的优先考虑因素。

