编者按:九月时,我们发表了《为免费移动优化电子商务网站招募志愿者》,邀请商家参与一项移动优化案例研究,我们将逐步跟踪创建移动网站的过程。数十家商家提交了他们的网站,经过审核流程后,我们将选择范围缩小至DecalGirl.com。以下是该案例研究的第二部分。
第一部分,《为移动设备优化电子商务网站,第一部分:入门》,我们在十一月作为MobilizeToday.com(一家移动开发公司)和DecalGirl.com(一家销售移动设备“皮肤”的电子商务公司)开始探索如何最好地推进此项目的策略时发表。现在,经过十一月的扎实工作,我们来回顾他们的进展。
开发经验大有裨益
MobilizeToday 在早期就发现,DecalGirl.com 的联合创始人兼首席执行官 Ryan Peters 在对其网站进行移动优化方面处于独特地位:他是整个 DecalGirl.com 网站的原始开发者,包括其定制购物车。他对网站设计的丰富经验和完全创意控制权,使他能够比大多数商家更深度地参与 MobilizeToday 的 Steven Trugbild 的开发工作。
Ryan Peters
得益于 Peters 的网络开发经验,他帮助 MobilizeToday.com 获取了 DecalGirl.com 的必要内容,并去除了传统桌面版网站布局和设计的限制。这种定制的服务器端功能极大地助力了 MobilizeToday。Trugbild 对 Peters 的专业知识表示赞赏,并称这使得 MobilizeToday 能够以最理想的方式构建移动页面:使用不受原始网站设计限制的灵活内容。
Trugbild 表示,受限于原始桌面版网站的结构和视觉特性是移动优化的常见局限。他指出,通常情况下,由于移动开发者可能不了解桌面网站所使用的代码语言或服务器端的数据库结构,因此为开发者提供定制化的服务器端功能更具挑战性。Peters 是一个罕见的例外,它允许实现最大的设计自由。
移动优化选项与挑战
据 Trugbild 称,拥有移动友好型网站的最理想方式是同时构建移动版和桌面版。这使得两个版本的基础相互兼容,从而为设计提供了更高的灵活性。
然而,在实践中,Trugbild 理解大多数网站在设计时并未考虑移动友好性。Trugbild 建议拥有现有电子商务网站的商家考虑以下三种方案:
- 自定义购物车。如果原网站开发商提供移动友好型解决方案,则聘请该公司进行开发。并非所有网站开发商都提供此类服务。即使由同一家开发商进行移动优化,也需要重新构建原网站功能的部分内容,且成本可能高昂。
- 托管或授权购物车。从购物车提供商处获取移动兼容性。某些购物车可能会额外收费甚至免费提供解决方案。如果某购物车尚未提供移动解决方案,商家可能只需等待提供商开发移动解决方案(或是否开发)。
- 自定义、托管或授权购物车。聘请一家新的移动优化公司以合理成本帮助解决该问题,很可能使用移动CSS。新开发公司将利用现有网站设计来构建移动版,而非重建整个网站,这有助于控制成本,但会限制设计选择。
第一个原型
在开发初期,Peters 概述了希望在移动网站上看到的主要元素:
- DecalGirl.com 的公司标志;
- 搜索功能;
- 包含多个主要风格类别的主菜单(例如 iPod、电子书阅读器、媒体播放器);
- 包含热门可选皮肤/保护壳类别的子部分;
- 社交媒体网站的链接。
Trugbild 发现 Peters 的愿景与自己的理念高度契合,强调了“简单、轻量且用户友好”的移动主页的重要性。Trugbild 还强调了对主页外观和整体导航进行缩放以适应较小移动设备屏幕的重要性。
带着这些初步想法,Trugbild利用DecalGirl.com桌面网站现有的配色和菜单结构,交付了首个模拟设计稿。主菜单采用灵活布局宽度,可自动适配移动设备的屏幕尺寸,并兼容竖屏或横屏浏览模式。
MobilizeToday为DecalGirl.com移动端首页制作的模拟设计稿
聚焦移动端设计
Peters认为首次尝试的模拟设计稿内容过于密集。凭借他的开发经验,他决定按照自己的理念重新设计菜单。Peters大幅简化了菜单功能——他没有复制桌面端的导航和菜单布局,而是将选项压缩为三个主要(且可扩展)的项目。
Peters对移动端首页的重新设计
随后,他在美学风格上采用了DecalGirl.com上展示的一款皮肤设计,而非沿用原始桌面网站的配色方案。
Peters还在图形中添加了购物车图标及数量数值,以显示购物车中的商品数量,并增加了“查看完整版”链接,使购物者能够退出移动版,访问网站的常规版本。
总结
Ryan Peters凭借其开发专长,使DecalGirl.com的内容能够在DecalGirl自己的Web服务器上通过MobilizeToday.com进行访问。这加速了MobilizeToday的优化工作。在此基础上,MobilizeToday.com交付了DecalGirl.com移动版的布局模拟设计稿,随后Peters对其进行了调整,以符合其追求简洁与专业化设计的目标。
在下一期内容中,我们将关注DecalGirl移动端菜单的最终设计,并回顾该网站在各种移动设备上的兼容性表现。

