大数跨境

利用层叠样式表驱动网页

利用层叠样式表驱动网页 电商实践
2008-10-16
2
导读:本杰明·崔(Benjamin Chui)并未在电子商务领域坐以待毙。这位“本氏折扣中心”(Ben’s Bargain Center)的创始人正大步穿行于旧金山的金融区,手中握着智能手机,随时准备访问其

陈本明并没有让电子商务事业停滞不前,这位“本氏折扣中心”的创始人正手持智能手机,在旧金山金融区大步前行,随时准备调用其电子商务网站的三个移动版本之一。

对于他的Bensbargains.net网站而言,向移动商务的过渡如同使用CSS一样简单。

“我们越来越倾向于使用层叠样式表(CSS),”这家运营九年的电子产品折扣网店创始人Chui表示。“我们的主站几乎完全由CSS定义。它让我们对内容和布局拥有更大的控制权。对于Ben’s Bargains的移动版本,我们也采用了同样的方法:利用CSS将内容重新包装以适应移动设备。”

根据思科IBSG在五月发布的《第三届年度电子商务调查》报告,Bensbargains.net是15%的零售商之一,这些零售商已将其网站适配至移动浏览器。尽管据报道许多零售商花费了5万至10万美元来创建新网站并寻找自动检测设备格式的方法以适配移动网络,但Benjamin Chui仅编写了几张样式表,并为连接到每种样式的新页面提供了首页链接。

Chui说:“我们以三种不同的移动CSS格式呈现内容:针对最小屏幕的单列、双列和三列。”

Chui继续说道:“iPhone用户会使用三列布局。现在,我们的移动站点几乎具备与功能齐全的主站相同的功能。用户仍然可以看到每个商品的用户评论和评价,并且可以像往常一样点击进入产品详情页。”

这比许多其他移动服务要领先一步。

样式表的简洁性

层叠样式表只是将电子商务网站适配到移动屏幕的一种方式。例如,订阅制媒体下载服务Safari Book Store为其外出使用的客户开发了全新的网站和用户界面。其他网站则将访问者重定向到为移动设备单独格式化子域名的页面。

虽然CSS并非唯一解决方案,但它提供了一种易于获取的方案。大多数电子商务网站已经在使用这种样式表,为桌面版页面设置一致的字体和布局。电商商家只需将相同的方案应用于调整现有内容的尺寸和形状,使其适应更小的移动屏幕。

这是加拿大安大略州和俄勒冈州尤金市设有办事处的托管购物车系统1shoppingcart.com所采取的策略;其电子商务软件产品经理迈克尔·瓦利特表示,该软件于2007年推出,其中一项亮点是“拥有完全重新设计的购物车界面,该界面从底层开始采用CSS重新设计”,“新设计使我们能够更快、更轻松地实施[全站]更改,而另一个好处是CSS在任何类型的浏览器(无论是否为移动端)上都能更普遍地显示——效果优于我们旧有的基于表格的页面。”

据挪威公司DetectRight的首席技术官Chris Abbott最新统计,仍有“数百种”支持网络的移动设备不支持CSS或用于创建CSS模板的XHTML编码。DetectRight是一家全球移动设备检测引擎提供商。“但这个数字正在减少,”Abbott说。鉴于《信息周刊》报道称,84.4%的手机用户尚未将手机接入互联网,presumably没有CSS支持功能的手机的购物者根本就不会上网。

整体网站设计的转变

为移动端实施CSS并不仅仅是创建几张样式表那么简单。事实上,许多标准的桌面网页设计元素无法在移动屏幕上正常显示,或者会堵塞移动屏幕。因此,使用CSS将当前内容适配到移动屏幕的网站通常必须配合至少一次小型的网站改版来推出。

“首要考虑是移动端的向后兼容性,即兼容较老的移动电话标准,”Chui在Bensbargains.net上表示。“因此,我们将整个产品展示系统切换到了简单的表格,这种表格自20世纪90年代以来就已存在。”

每列宽度不超过200像素,即最小可能移动端屏幕的尺寸(见图表)。“我们使用最基本的表格布局来仅展示表格数据——这正是表格最初的用途——它在所有设备上都能正常工作,”Chui说。“然后我们将网格定义为‘x’乘‘y’并定义内容。对于我们的单列布局,x仅为1;y则是我们要显示的项目数量。”

与此同时,主网站页面必须去除绝对测量值、框架、嵌套表格和弹出窗口。每个边距、边框和内边距都必须以百分比或相对单位指定,而不是像素。合并的行和列必须分开。字体格式必须改为Unicode,而非HTML标准。所有页面应缩小至10K以下,页面标题和标题必须以XML编写,并缩放以紧密适配最小设备屏幕的顶部。(请注意,像Phonefavs这样的移动端书签代理工具正凭借一键式网页访问迅速获得移动端用户群,它们将页面标题默认用作书签标题。)

确实,许多组织已经制定了移动网页设计的“协议”。包括万维网联盟(W3C)、无线通用资源文件(WURFL)、无线抽象库(WAL)以及全球移动网页创作实践。每种协议都涉及对从头开始的移动网站设计过程的进一步定制。

CSS避免同步站点

最终,使用CSS重新格式化桌面尺寸文本的主要优势在于其单一源头的简洁性。“展望未来,我们需要一个基于现有站点内容的移动站点,”Chui说。这样,每个新优惠只需更改一次主文件,而不必从一个网站格式到下一个格式进行一系列更改。

“随着智能手机的日益普及,趋势将转向移动端,”Chui说。“很难说这种转变是否会占据目前由个人电脑持有的相同购买空间;它也可能是一个全新的服务或产品类别,通过移动设备完成,例如在停车计时器处付款或从自动售货机购买饮料。”

一些业内人士认为,未来的移动网络将是冲动消费的来源,是在办公室网络或家人窥探视线之外的“秘密”购物,以及在实体店购物时的价格比较。“但无论发生什么,”Chui说,“得益于CSS,我们可以始终在场。”

资源

  • 移动网页最佳实践:来自W3C的60项最佳实践描述
  • Wap Review Mobile Web Directory,一个包含1,200多个移动网站评论和评级的目录。
  • XML验证器
  • 按脚本分类的Unicode字符代码表
  • 基本“拉丁”
  • UTF-8 编码表与 Unicode 字符
  • UTF-8 Unicode 字符集 – 适用于启用 UTF-8 的 HTML 页面
  • 字符集代码
  • PHP 中动态调整图像大小的代码
  • ImageMagick 的免费动态照片调整大小工具,适用于 Windows 和 Linux 平台
  • 第三届思科 IBSG 电子商务调查:移动成为零售增长渠道
【声明】内容源于网络
0
0
电商实践
电商实践
内容 8053
粉丝 0
电商实践 电商实践
总阅读37.4k
粉丝0
内容8.1k