9月,我们发布“免费志愿者参与移动优化电商网站”活动,邀请一位商家作为志愿者参与移动优化案例研究,逐步跟踪创建移动网站的全过程。数十位商家提交申请,经审核后最终选定DecalGirl.com。
DecalGirl 首页。
接下来数月,我们将跟随MobilizeToday.com开发者Steven Trugbild和Jeff Haydn,记录他们为DecalGirl.com进行移动端优化的全过程。选择MobilizeToday主要基于其专业能力以及免费优化的意愿;而选择该在线零售商则主要考量三个因素:购物车系统、网站设计与结构。
在 iPhone 上查看的 DecalGirl “传统”网站。
关于 DecalGirl.com
Ryan Peters与其妻Amanda于2003年创立DecalGirl.com。这家位于特拉华州利维斯(Lewes, Del.)的在线零售商主营电子设备保护贴与外壳,产品在当地制造包装,现有员工26人。Peters自20世纪90年代起从事电商开发,并开发了支持信用卡、Google Checkout、PayPal及Amazon Checkout的专有电商引擎。
Peters表示,该站月访问量30万至50万次,页面浏览量400万至500万次;转化率约3.66%,其中6%至7%的访客来自移动设备。
总体而言,DecalGirl.com的定制平台及强大设计使其成为优化最佳候选者及典型案例。Peters称,其对网站优化的兴趣始于初代iPhone发布之时。
“我们在2009年第四季度推出当前版本网站,虽可在移动设备上运行,但体验并不流畅。”Peters说。
不同的优化方法
优化启动前,Peters需确定项目范围,包括移动端外观与界面。MobilizeToday的Steven Trugbild将选项归纳为三类:优化方法、兼容性及内容优先级。
Ryan Peters
商家可选择对现有站点应用移动CSS,或搭建独立移动站。本系列中,Trugbild和Haydn将采用移动CSS方案,因DecalGirl.com未使用表格且内联样式极少,该方法效果显著。
“尽管如此,该方法仍有局限,”Trugbild指出。主要难点在于预定义HTML带来的设计限制,以及需逐页应用移动CSS,尽管部分元素可通过CSS隐藏。
众多移动设备与平台
Peters还需选定适配设备。除市场主流的iPhone和Android外,其他平台与浏览器亦在考虑之列。
另一关键设计要素是首页内容块排序,涵盖标志、菜单、搜索功能、热门页面及社交媒体链接等,需明确优先级以决定移动用户的浏览顺序。
后续文章将按流程连载
截至2011年1月,我们将持续更新,展示范围制定与变更实施过程。关于项目总体目标,Peters提出以下展望:
“设计上将大幅精简——核心视觉元素为产品图片……我希望承载更多移动流量,并将基础服务延伸至客服、账户管理及订单追踪等领域。虽不确定能否直接提升销售额,但应能改善用户整体交互体验。”

