每年春天我们都会重新设计我们的网站。这一次我们选择了响应式设计，并添加了一些我们在过程中学到的HTML5和CSS3技巧。我们还在这个构建中更多地考虑了我们的内容策略和受众。查看“重建我们的网站”系列的第1部分！

我们的受众是谁？

任何设计/构建/商业计划中的第一个问题应该是：我们的受众是谁？

你想象谁会来到你的网站/业务，为什么？他们从你这里想要什么？

如果你有一个现有的网站/系统，有几个方法可以来看这个问题

1. 你业务/品牌的Facebook数据为你提供了关于你的人口统计的直接信息（甚至年龄组和性别）。
2. Google Analytics：你可以根据他们如何查看你的网站来了解你的受众。
   1. 桌面与移动（你是否应该选择响应式设计？）
   2. 一天中的时间（例如：人们白天在家浏览）
   3. 位置（例如：为什么伦敦的人们会来你的网站？）
   4. 搜索关键词
   5. 你网站上最受欢迎的页面（为什么这个页面会有这么多的点击？是什么关键词吸引人们进来？）
3. Twitter：谁关注你/你的业务？
4. 向你的同事、朋友、家人、陌生人以及你自己询问你的受众可以包括哪些人。

最后一个问题是最重要的。你能将哪些人包括在你的受众中，而你目前还没有？你如何在不疏远现有受众的情况下实现这一点？

注意：如果你还没有建立现有的网站/系统，你可能需要做第4步和一些竞争对手研究，以便开始。谷歌是你的朋友，所以使用它！

让我们谈谈颜色

到现在为止，你应该知道你的受众是谁。在我们的案例中，我们恰好有一个20多岁到40多岁的男性强人口统计。那么我们做了什么？我们喜欢我们之前使用的颜色，但在开始构建之前决定为整个网站定义一组颜色。这样我们就可以保持一致性。

但我们是如何选择这些颜色的呢？蓝色恰好是信任的颜色。不同的颜色会引发不同的情绪，选择正确的颜色将帮助你实现你的目标。

红色 - 红色能够唤起许多不同的情感。浅红色让人联想到爱情和女性化。鲜艳的红色可以代表激情、速度和危险。深红色常常唤起成熟的感觉。
黄色 - 黄色唤起一定的能量。它通常与阳光联系在一起。它也可以唤起谨慎，这就是为什么有那么多黄色交通标志。
橙色 - 这是一种红色和黄色的良好混合。它唤起了红色和黄色所能提供的激情和能量，但以一种更吸引人的方式。
蓝色 - 蓝色常常唤起信任和健康的感觉。这就是为什么医疗保健领域主要使用蓝色。浅蓝色常常给人一种年轻的感觉。
绿色 - 绿色是一种平衡良好的颜色，给人一种安全感。它通常用来代表自然。深绿色常常与金钱联系在一起，因此给人一种财富感。
紫色 - 紫色平静且常与创造力联系在一起。深紫色使事物看起来奢华，而浅紫色使事物看起来浪漫。

我们决定继续扩大现有客户群，而不是扩展到不同的细分市场。我们采取了一些已知有效的方法，并将其应用于我们的网站，同时在许多不同的方面进行扩展。

先绘图再编码

在编码之前，我们首先使用Adobe Illustrator创建了一个线框。这样，我们可以在将其转换为代码之前确定我们的外观。代码要昂贵得多，也耗时得多。当你知道最终结果应该是什么样子时，编码会更顺畅。你最终得到的代码也会更干净。干净的代码 = 更快的网站。

框架

一旦我们同意了网站的外观，我们就开始编码我们的HTML/CSS框架。框架由在整个网站中使用的重复元素组成。在这个例子中，重复的主题是H元素，如H2和H3。

通过提前编码这些元素，我们可以轻松地将它们集成到其他代码中。实际上，我们甚至创建了一个自定义的K2默认模板的Bootstrapped版本。这样，我们知道CSS类名遵循某种约定。我们可以在可能的情况下使用破折号而不是驼峰命名法。

注意：我们决定使用Bootstrap作为我们的底层框架，因为Joomla 3.5（Joomla的下一个长期支持版本）也将使用Bootstrap。我们确实有一个基于LESS的压缩插件，但我们决定不在本网站的版本中使用它。这可能会稍后发布。