即将启动大型新网站项目

上周，我被一家公司邀请担任顾问，该公司正在进行大型网站重新设计项目。我想写下一些想法，与处于类似境地的任何人分享。

您不能忽视移动端。

查看任何关于移动设备使用情况的图表，它都会告诉您答案。每天都有数百万台移动设备 进入世界。忽视这一点将导致您自食其果。

您需要决定是否要构建一个专门针对移动端的网站。

移动端是一个完全不同的世界。他们的屏幕空间确实更小。他们通常具有较低的带宽。他们通常拥有台式机没有的用户输入方式（例如：滑动、捏合或摇晃），反之亦然（例如：鼠标光标、右键单击或修饰键）。

您能否在一个网站中处理所有这些问题？也许可以。响应式设计可以帮助解决这个问题，并且对于许多网站来说是一个很棒的解决方案。但是，不要为了响应式设计而损害台式机和移动端的体验。您可能需要将网站拆分为两个——这可以确保网站速度更快、更容易开发。但是现在有两个网站需要保持同步，这也会带来自身的挑战。

您的 CMS 必须处于良好状态。

您应该能够向您的 CMS 提出任何请求并获得相应的回应。我需要该产品的全尺寸图像——给你。现在我需要相关产品的缩略图——给你。我想要该文章的标题、副标题和简介段落——给你。我想要一堆内容放到这个模板里——给你——现在放到不同的模板里——给你。我想通过 Ajax 请求一些内容，只获取内容，不带任何标记——给你。在项目开始时，是构建/选择/自定义适合您的 CMS 的绝佳机会。

需要指南？请尝试阅读 Karen McGrane 撰写的书籍 《移动端内容策略》。

Karen 在她的演讲中提到，有些公司因为被他们的 CMS 拖累，无法适应移动端和未来的内容交付方式，最终会倒闭。我相信她说的是对的。

您需要为您的 CSS 制定计划。

对于项目中选择的几乎所有其他技术，您都有多种选择，但您始终需要使用 CSS。CSS 既简单又复杂（一天学会，终生掌握）。在一个大型项目中，您确实需要开发一个设计系统。这意味着可重用的组件和设计模式，可以帮助您快速构建并保持一致性。

需要指南？请尝试阅读 SMACSS。作为其中的一小部分，我想说 避免使用 ID。

保持代码整洁。

当我们交互的代码整洁且一致时，每个人都会更快乐。即使它与您自己的风格不完全匹配，一致性也是最重要的。建立一个样式指南。这里有一些样式指南供您参考。

您应该预处理您的 CSS。

使用像 Sass 这样的预处理器可以更容易地构建设计系统（并且 CSS 通常也更容易编写）。您可以设置颜色变量以保持一致性。使用 Compass 或 Bourbon 可以免费获得 CSS3 混合宏。您可以将模式分解成单独的文件以保持清晰和组织。您可以在编写 CSS 时压缩它，因此性能实际上是您工作流程的一部分（小型连接文件 = 快速）。

您需要考虑 JavaScript 架构。

您几乎肯定会使用 jQuery，这在今天已经成为默认选择。您几乎肯定需要进行一些 DOM 操作和 Ajax，而 jQuery 在这些方面非常出色。但是 jQuery 无法帮助您构建网站的架构。例如，哪些页面需要哪些 JavaScript？哪些内容应该放在全局 JS 文件中，哪些内容应该放在页面特定的 JS 文件中？如何管理这些依赖关系？如何编写 JavaScript 以避免其成为一团乱麻的全局变量和函数，并将其组织成逻辑块。

也许 Backbone.js 可以提供帮助。也许 Require.js（或类似的库）可以提供帮助。如果您使用的是 Ruby on Rails，那么资产管道可能会有所帮助。也许仅仅是 CodeKit 附加/前置和连接 JavaScript 的功能就可以提供帮助。

需要指南？Rebecca Murphey 撰写了关于这类主题的文章。

您需要考虑版本控制。

团队开发需要版本控制。Git 是一个不错的选择。我不是版本控制大师，但它的普及程度以及可以找到的资源本身就说明了一切。分支和合并相当容易。

拥有一个原始的主分支，没有人从中工作。然后是暂存分支。然后是各个“功能”分支。您可以随时从暂存分支合并到功能分支以保持同步。然后在功能准备好后将它们合并到暂存分支中。暂存分支用于测试以及所有功能汇集的地方。然后准备好后，将其合并到主分支。

除了保持代码同步和跟踪更改的明显优势之外，它还使整个团队能够通过查看提交来查看其他人正在做什么。这有助于团队问责制。

您需要考虑暂存和部署。

上面提到的暂存分支？最好让它自动部署（部署 = 将文件移动到生产服务器）到测试服务器。理想情况下，这个测试服务器与您的生产服务器尽可能地相同。在那里进行测试。然后，当它准备就绪时，将暂存分支移动到“生产环境”（您的用户实际使用的生产服务器）。

部署本身是一个很大的话题。您可能会缓存资产，因此您需要在更改的资产上清除缓存，而不要清除未更改的资产上的缓存。

Web 应用程序 Beanstalk 提供 Git 存储库托管和部署功能。Capistrano 是一个用于构建您自己的部署项目的工具。

您需要考虑强大的托管方案。

您能否动态升级服务器？他们如何处理繁重的负载？您是否正在进行负载均衡？您的托管服务提供商的客户支持如何？他们会提供 24/7 的响应吗？成本是多少？是否足以将托管业务内部化？

你的服务器性能由谁监控？是你的团队还是托管服务商？你的主机提供商可能拥有监控服务器性能的工具。New Relic 就是一款可以帮助你实现此目的的应用。

大多数大型网站都配备专门的服务器运维人员（或团队）。这需要一门独特的技能，与开发不同。

让用户体验 (UX) 引导项目。

你做出的每一个决定都应该围绕如何提升用户体验。尽量避免因技术难度而做出决策。这可能意味着你需要专门的用户体验团队。更理想的情况是，团队中的每个人都理解并重视用户体验，并将其作为优先事项。这不仅仅是设计方面的事情，而是贯穿始终的理念。

从一开始就考虑性能。

性能往往被网站团队放在“稍后”处理。现在你有一个绝佳的机会，可以从一开始就做出明智的性能决策。尽可能减少加载的资源。尽可能压缩资源。尽可能利用服务器和客户端缓存。确保你的服务器管理员关注响应时间等关键指标。

需要指导？Steve Souders 的书籍和博客非常棒。

确保团队充满热情。

构建大型网站是一项庞大而全面的工作。完成这项工作本身就很有挑战性，而要做好则更加困难。你需要一个拥有广泛技能的团队，并且可能需要一位经验丰富的项目负责人来掌控全局。这需要时间和耐心，也需要资金投入。最重要的是，每个人都需要对项目充满热情。如果你对正在构建的内容缺乏热情，就很难做出明智的决策。如果你没有动力克服困难，那么遇到的挑战就更难解决。

来自 Twitter

我在 Twitter 上提问：“对于即将启动一个大型新网站项目的人，你会给出什么建议？”我得到了很多有价值的回复。

@chriscoyier 算出时间和预算，然后至少乘以三倍。

— Ryan McLaughlin (@ryanmclaughlin) 2012年12月18日

@chriscoyier 组织。组织。组织。组织。设计。组织。组织。组织。

— Tim Panicucci (@tpanicucci) 2012年12月18日

@chriscoyier 解雇不称职的开发人员，并从一开始就聘用能够胜任的人。

— Nando Vieira (@fnando) 2012年12月18日

@chriscoyier 规划和原型设计。真正理解你需要解决的每个问题的各个方面。

— Paul Lewis (@aerotwist) 2012年12月18日

@chriscoyier 对于前端开发人员，我建议查看整个网站并识别组件。考虑 CSS 架构。

— Jeff Bridgforth (@webcraftsman) 2012年12月18日

@chriscoyier “量两次，切一次。”（或者说“需求，需求，需求。”）

— Chris Cashdollar (@ccashdollar) 2012年12月18日

@chriscoyier 买好酒。

— ★ jen strickland ★ (@inkpixelspaper) 2012年12月18日