电商商家必须了解的五大网页设计概念

编者按：电子商务商家使用复杂的技术来运营业务。我们推出了“需要了解”系列，以帮助商家对这些技术有一个基本的了解，因为我们认识到大多数商家并不是网页开发人员或程序员。在本期中，特约编辑阿曼多·罗吉奥解释了五个有用的网页设计概念。

一个电子商务企业要取得成功，需要营销、设计、开发、会计和运营方面的专业知识。

电子商务商家可以将大部分服务外包。但仅仅因为有提供商可用，并不意味着商家不应该对这些概念有一些基本的了解。这包括网页开发问题。

因此，我整理了一份非技术性电子商务商家应该了解的五个重要网页设计概念的列表。这些概念会对网站性能产生正面或负面影响，从而影响网站的成功。

了解HTML表格的局限性

表格数据很有帮助，尤其是在比较电子商务网站上的产品或服务计划时。你可以排列产品属性，并为购物者提供做出良好购买决策所需的信息。

电子商务网站上的 HTML 表格正面示例不胜枚举，你可以参考 Newegg 上的笔记本电脑比较表或 MacAfee 上最近的病毒威胁表（记住软件销售也属于电子商务）作为例子，这两张表格都能提升用户体验并快速传达信息。

但是，表格的使用可能会过度，电子商务商家应该理解这一点。一些网页设计师和开发人员作弊，使用HTML表格进行页面布局。例如，在一个表格单元格中放置标题，在另一个表格单元格中放置图片，在另一个表格单元格中放置文本。虽然这看起来可能没什么大不了的，但它会导致几个问题。

• 使用HTML表格进行布局会混淆一些搜索引擎机器人，并损害搜索引擎优化（SEO）。作为布局的表格会破坏自然的内容流，并将不相关的材料重新定位在一起，使得一些爬虫更难正确索引。
• 也存在无障碍性问题。因为布局表格可以并且经常将相关项目分开。例如，一个产品表可能在第一行放置产品图片，在第二行放置标题，在第三行放置链接，而不是将图片与标题与链接关联起来。该表将图片与图片与图片关联起来。
• 代码臃肿。一般来说，使用HTML表格进行布局需要更多的标记，这会使您的网站页面加载速度变慢，并根据您网站的大小要求您在网络托管上投入更多资金。
• 布局表格可能会使您的网站更难升级，也更难过渡到其他平台，如移动设备。

作为一个规则，确保你聘请的网页设计师只使用HTML表格来处理表格数据。你必须自己决定，例如，你认为产品类别页面，比如第七墨水的“男士”页面，是否是表格数据；但仅供参考，第七墨水没有使用表格进行布局。

文档类型声明（分隔符，定义）指导浏览器

另一个重要的网页设计概念是文档类型声明（DTD）。DTD，也称为文档类型分隔符或文档类型定义，用于告知浏览器正在处理的文档类型，从而使浏览器能够更轻松地正确渲染相应的网页。

换句话说，DTD 告诉浏览器该页面遵循哪组规则——XML、XHTML 1.0 还是 HTML 5。

如果选择了错误的 DTD，或者你的网页设计师忽视了她自己决定使用的规则，浏览器可能不确定如何操作，从而错误地渲染你的页面，使你的网站看起来不专业，甚至破坏网站的某些功能。

这一概念的关键在于确保你的网页设计师对代码进行验证，像万维网联盟 (W3C) 标记验证服务这样的验证工具可以告诉你你的网站是否遵循其自身声明的规则手册；如果通过验证，那就太好了；如果没有，让你的网页设计师修复它，或者至少解释原因。

Web 标准和浏览器采用至关重要

网络是有标准的，并非无法无天的“西部荒野”。如果没有 Web 标准化，互联网就无法支持电子商务。事实上，上述的 DTD 就是标准。

本质上，Web 标准是一套公认的行为规范，使我能够编写符合标准的代码，并期望无论我是在 PC 还是 Apple Mac 上，使用 Internet Explorer 还是 Firefox，或是笔记本电脑还是手机，这段代码都能以大致相似的方式运行。

如果没有 Web 标准，我就必须为每个浏览器和每个平台创建完全不同的网页。（在 20 世纪 90 年代初，网页设计师确实曾这样做过。）

一般来说，Web 标准是有效的，但仍存在一些問題。例如，微软的 Internet Explorer（IE）浏览器是我所知兼容性最差的浏览器。例如，它不支持事件捕获、CSS 圆角、标准的边距和内边距方法，并且在版本 7 之前也不支持可移植网络图形（PNG）的 alpha 透明度。这意味着你的网页设计师或开发人员必须额外工作，以确保你的网站在 IE 中正确渲染。

我应该注意，没有任何 Web 浏览器是完全兼容的，但通常浏览器的兼容性越高，其功能就越强大。请查看即将推出的可缩放矢量图形（SVG）API 演示。在撰写本文时，这个演示（我意识到它并不是一个非常实用的应用）仅在相对较新版本的 Google Chrome 或 Apple Safari 中有效。一旦更多浏览器采用此标准，开发人员就能在电子商务网站中引入大量额外功能。

作为商家，需要记住的是，你应该至少在三种不同的浏览器——IE、Firefox 和 Chrome——中检查你的网站，以确保其渲染效果一致。

将内容与表现分离

从开发角度来看，电子商务网页有三个基本方面：内容、呈现和规则。

内容描述了你在网站上放置的优质素材，例如产品描述、帮助客户的教程文章，甚至产品评论。

呈现描述了你的内容在页面上的外观或与购物者的交互方式，例如背景图像、内容区域周围的边框，或者 Icon Dock 上类似拖放式购物车的异步 JavaScript 和 XML 函数。

规则——通常也被称为模型——代表网站背后的逻辑，例如计算实时运费、添加税费或计算折扣。

在良好的网页设计和开发中，内容、呈现和规则是分离的，以便更容易维护网站，例如将所有层叠样式表 (CSS) 放在一个或两个外部文件中，而不是将样式（呈现）直接放在每个页面上，显然要好得多。

如果三个月后我想更改页面的外观，我只需在一个外部 CSS 文件中进行更改即可完成。如果我没有将样式分离，我就必须手动更改站点上的每一个页面。

同样，如果我使用 JavaScript 为顾客提供某种交互功能，最好将所有 JavaScript 代码存储在一个文件夹中，然后让每个页面引用该文件夹中的 JavaScript，而不是将代码直接嵌入到页面中。

以这种方式分离内容和表现层似乎非常直观，但仍有许多传统网页设计师不这样做。

你要验证站点是否在头部包含样式表链接和脚本引用，它们看起来可能类似于来自 Barnes & Noble 的这些示例：

<link href="http://images.barnesandnoble.com/presources/community/css/community.css" rel="stylesheet">

以及……

<script src="http://images.barnesandnoble.com/presources/community/js/jquery-latest.js" type="text/javascript"></script>

相比之下，你绝对不希望看到像下面这个示例那样的代码，这是我从一个真实的电子商务网站中提取的：

<body bgcolor="#ffffff" onload="javascript:_utmSetTrans()">

内容管理系统是必要的

内容管理系统（CMS）是一种协作、版本控制和存储软件，通常作为 Web 应用程序实现。本质上，CMS 允许你的业务将内容（例如产品规格）存储在数据库中，然后在需要时访问该数据库以创建动态网页。

假设你有十个产品。为每个产品创建一个 HTML 页面并不难。如果你需要更改其中一个页面上的某些内容，打开该页面并进行修改可能也不难。当然，如果更改涉及整个站点的导航，你就需要进行十次更改，这可能会带来负担。

现在假设你有 100 个产品。管理 100 个独立的网页会变得多么困难？

如果你有 1,000 个产品呢？你应该明白我的意思了。

CMS 通过将内容存储在数据库中使用页面模板来解决这个问题。当它需要为顾客渲染一个页面时，它会从数据库中获取相应的产品规格，并将其放入模板中。组合后的内容和模板被渲染，从而生成一个动态创建的网页。

如果你需要更改产品信息，只需对数据库进行一次更改；如果你需要更改模板，无论总共有多少产品，你可能只需要对模板文件进行一次更改。

对于你的电子商务商店，你将需要使用内容管理系统 (CMS)，顺便说一下，一些购物车也是电子商务 CMS，例如 Elastic Path、Magento、Volusion、Interspire、LemonStand、Shopify 以及许多其他非常强大的电子商务 CMS，而其他购物车如 Instinct 的 WP e-Commerce 则嵌入到其他 Web CMS 中。

只需找到适合你业务需求的解决方案，并注意实际上几乎没有不使用 CMS 的业务理由。

总结

有许多优秀的网页设计专业人士。通过理解这五个基本设计概念，电子商务商家可以更好地与这些专业人士沟通，并了解其自身电子商务网站所涉及的设计问题。