译者：杨海祥

原文：101 Ways to Make Your Website More Awesome

本文为极客学院Wiki组织翻译，转载请注明出处。

时间：2016.3.15

上周我和一个老客户聊天，她说：“Nick， 我想改进一下我的网站但是我却不知道从何下手。”

所以，我向周围人问了一圈，包括我的朋友、家人以及其它一些不是互联网行业的人。他们几乎都说了相同的内容：

“我需要一个清单。我不知道怎么搭建一个网站，所以我需要雇佣一个人来帮我完成。但是，问题是我仍然不知道我需要做些什么内容”。

因此，我列了一个清单，其中包含了我们在搭建 AwesomeWeb 网站所做的所有事，甚至包括我们还没有做的一部分。

我可以保证如果你完成了这份清单上的所有工作，你的网站将会成为你们行业最好的网站之一。

我怎么知道呢？

在 AwesomeWeb 网站上，我查看了 1000 多个世界上最优秀的自由职业工作者的网页。据我所知，没有任何一个网页可以完全达到列表所列出的所有要求。

作为企业家，你可以使用这份列表来判断你的网站还需做哪些工作，并将它们发给你的设计人员与开发人员。你甚至可以自己去修复其中一小部分问题。

如果你是自由职业工作者，你可以用这份清单来帮助你制作出更加漂亮的东西。然后回头告诉你的老顾客，说：“我重新检查了一下我们曾经做的东西发现我们可以改进一下这儿、这儿以及那儿，它们的报价分别是 500 美元、1000 美元、5000 美元，最终可以达到这样结果......”。

重头戏来了，下面一起来看看这份清单吧。

酷炫的商标

1. 设计一个专业的 Logo。很少发现有哪些网站或者博客有非常专业的 Logo。因此一个专业的 Logo 可以立即增加网站的可信度。
2. 上传高分辨率适配网页图标（即浏览器标签上的方形图标）。大多数站点都是 16 x 16 像素的网页图标。但是在高分辨率屏幕上，它们会变得非常模糊。使用 X-Icon 编辑器可以生成 64 x 64 像素的图标。
3. 使用高分辨率图片。只需要确保图像是容器的两倍大小，然后再将按比例缩小即可。
4. 最多使用 2-3 种颜色。你可以有一种背景颜色、一种号召提醒颜色以及一种强调颜色。
5. 从调色板选择颜色时，选择互补色或者三色组颜色。好的颜色组合可以让你的设计看上去更有内涵。
6. 永远不要使用纯黑色 (#000000)。并不存在黑色这样一种颜色，所以使用黑色会元素出上去在平面外一样。事实上，黑色往往是其它颜色的暗影。
7. 如果你想你的设计看上去有个性一些，请记住永远不要使用中性灰色 (#cccccc)。稍微增加一些黄色会让颜色看上去更温暖，加一些红色会让颜色看上去更有活力，或者加一些蓝色让它看上去更可信。

酷炫的排版

1. 使用 premium 字体。可以使用诸如 Typekit 这类的服务。据说 95% 的网页都使用的是排印。使用 premium 字体是给浏览者留下好印象最简单方式。
2. 最多使用 2-3 种字体。字体越多会让界面看上去越乱同时还会使得页面加载时间非常长。选择一种标题字体与一种段落字体就足够子，最多再选一种用于特殊场合的字体。
3. 字体最小设置为 16 px。如果字体小于 16 px，则大屏幕上阅读起来比较吃力。显示在移动设备上时，可以将字体设置为 12 px。
4. 选择合适的排版，比如使用小四号字体、五号字体或者黄金比例。可以按照 H4、H3、H2、H1 的比例设置文本字体大小。
5. 设计丰富的排版元素，比如引用、子弹型列表、数字列表、标题、警告、高亮文本、代码示例、缩写甚至是地址。
6. 使用自定义图标字体比如 Font Awesome 替换使用图片作为社交媒体 Logo、导航按钮或者交互式图像。图标字体可以更快加载而且更容易放大。除此之外，你还可以随意的改变其颜色。

优美的布局

1. 使用三分法作为基本构图。将你的布局的水平和竖直方向分别分成三份，然后将关键点放在线的交叉处。
2. 维护一个垂直网格。将你的界面分成 8、12 或者 16 列，列与列之间的间距要稍微大一些。
3. 垂直网格应该与基线网格保持风格一致。文本行之间的空间和内容块之间的空间一样重要。。
4. 空白是网页上的奢侈品。我们需要利用空白预留 “呼吸空间” 以及保持平衡，把读者的眼球吸引到最重要的内容处。
5. 做好网页上视觉元素之间的平衡，例如按钮、输入框、表单、大标题等。网页布局应该达到这样的效果：当眯起你的眼睛时，你能清晰地看到一条路线，而这正好就是你希望读者的阅读顺序。

优雅的用户接口

1. 使用大的、加粗的动作按钮。几乎每个网页都有一个目标，而往往这个目标就是点击一个按钮。所以，请确保这个按钮不会被用户忽略。
2. 为你的链接、按钮、输入以及文本框添加悬停、活跃状态变化。如果你选择在悬停时加亮你的按钮，那么你也应该类似地处理你的链接和输入框的边框。
3. 保持风格一致。所有文本框与输入框的风格应该是相同的。相同的边框颜色、背景颜色、占位符、活动文字等。确保你的 tab 键切换顺序正确设置，这样你可以使用 tab 键顺序遍历网页上的元素。
4. 改变已访问链接的颜色，以便让你的用户知道这些页面之前已经被访问过。
5. 一旦你有了自己的 Logo、颜色、排版、布局以及图片大小后你应该建立自己的风格。新加的用户接口应该和你已有的风格保持一致，这才算有一个好的用户接口设计。

完美的用户体验

1. 在你的按扭或者其它元素上添加细微的改进。例如，当 “上传” 按钮被点击后，你应该将其改变为 “上传中” 或者 “处理中”。
2. 不要修改屏幕滚动。千万不要修改浏览器的默认动作。也许你会认为滚动条滚动比正常情况快两倍效果会好一些，但事实上并不是这样。
3. 主页不要使用浮动块。在小空间上显示更多的信息有其它更好的方法。
4. 不要使用欢迎界面。用户第一次访问你的界面时，他们会希望直接看到你的主页。
5. 使用首行标题、子标题、导语、列表或者说明让内容更容易阅读。大多数人都会先大概扫描一遍再决定是否继续阅读的。
6. 在你所有的表单、输入框以及下拉单中添加描述型占位文本。如果你想告诉用户在该位置输入什么内容，那么直接告诉他。例如对于一个下拉列表，将第一项设置为 “选择年份” 比设置为 “2016” 更好一些。
7. 在你的表单上添加 HTML5 验证。当用户提交的表单有错误时，将该错误明确地显示出来。
8. 让你的网站对有视觉障碍的人群友好一些。尽量避免使用模糊的链接名字、避免排版凌乱、正确使用标点符号、使用简单布局、为图片添加替换文字、使用较大的文本字体、背景色与文字颜色对比度高一些等。
9. 使用 BrokenLinkCheck.com 检测网站中的坏链接。修复这些失效的链接以免用户点击到它们的时候感觉到不爽。

成熟的开发

1. 确保你的网站是针对移动端优化过的，以便它可以自适应地展示在任何设备上。针对移动设备优化过的网站可以加载得更快一些，可以让用户获得更加好的使用体验。
2. 生成并显示合适大小的图片。如果你上传了一张很大的图片，而你希望将其展示在网站的其它地方，比如侧边条，这种情况下请确保你显示的是该图的缩略图而不是原始图片。
3. 为所有的图片或链接增加 alt 标签。如果由于某些原因你的图片没有正常加载，那么图片的位置就可显示这些标签内容。类似的，当你的鼠标悬停在链接上时，你的浏览器也会显示链接相关的标签。
4. 使用 < strong > 与 < em > 加粗文本与增加下划线，而不要使用 < b > 和 < i >。虽然它们有同样的效果，但是它们有本质的区别。< b > 是一种风格，但是 < strong > 却说明了应该怎么理解这些内容。
5. 处理草率复制的 HTML 文本。当你把内容拷贝到 WYSIWYG 编辑器 (比如 WordPress 里的可视化编辑) 时，它会自动给你添加很多不必要的空格或者内置风格代码。如果不处理一下，你网页的可读性就会非常的差。
6. 从 HTML 代码中删除 css 代码。99% 的 css 代码都应该放在独立的 css 文件中，这样当你更新 css 文件后，你的所有显示的风格都会相应的发生变化，而不需要一个页面一个页面地去修改。
7. 请用 Sass 变量来保存你的颜色设置，以及全局一致的组件。当你想修改颜色以及该颜色对应的阴影色时，你只需要修改一行代码而不用去修改几百行代码。
8. 以防更改域名，请链接到永久链接而不要链接到 URL。例如，链接到一个网页时，你的 HTML 应该写成 < a href=“/slug-goes-here”> 而不是 < a href=“http://domain.com/slug-goes-here”>。同样，对于图片以及 css 背景也是一样的。如果你没有这样做，那么切换域名后，网页上所有的源都会链接到不存在网页或文件。
9. 开发自主的插件或者工具以提供某些独特的功能。虽然自主研发的插件很难维护，但是会让你网站相比于其它类似网站更有竞争力。
10. 做好浏览器兼容性测试，保证你的网站在 Chrome、Firefox、Safari、IE 以及其它浏览器上都可以合适的显示。老版本的 IE 的兼容性问题简直是臭名昭著。可以使用 BrowserStack 进行测试。
11. 使用 W3C 的标签验证服务发现 HTML 中的显示错误。请记住，绝大多数网站都并不是 100% 正确地使用 HTML 标签的。虽然这一项并不是最高优先级的任务，但是没有错误会让你的网站更好一些。
12. 使用 staging 环境来修改你的网站。理想情况下，你应该有一个所有人都能看到的生产环境网站，以及 staging 站点。所有的开发人员的修改都在 staging 站点上。只有当 stagging 版本稳定后，再将该版本上线。
13. 在版本声明处显示当前年份。当你看到一个老的版权声明时，你往往会认为这个网站已经不再维护了。使用 PHP 或者其它脚本来设置当前年份，而不要使用静态文本，例如 © < esatablised >-< current year >。

搜索引擎优化

1. 每个页面设置一个希望搜索引擎用来排序的关键词，然后整个页面都围绕该关键词进行优化。这并不是意味着在每个句子里都放上这个关键字，而是说在准备内容应该时刻围绕该关键词。
2. 在每个页面上都放上富关键字标题标签。该标题就是显示在 Google 搜索结果中的蓝色链接。最多不能超过 55 个字符。
3. 每个页面只包含一个 H1 标签。大多数情况下，它应该和你的标题标签是一样的。
4. 在内容中使用 H2、H3 以及 H4 标签增加内容的层次感。
5. 优化特定关键字的方法还包括在标题、H1、子标题、以及前 1/3 的内容中包含该关键字。
6. 你的 Meta 描述会是展示在搜索结果链接下面的内容，所以请确保每个页面都有 Meta 信息，且所有的 Meta 都包含了相应的关键词。
7. 你的永久链接，也就是域名后的 URL 部分，也应该包含关键词，这些词之间可以用破折号隔开。
8. Google 的算法中会考虑域名注册的时间，因为一般认为一个域名注册的时间越长其拥有高质量资源的可能性越大。所以你可以提前几年就注册你的域名。如果你的域名已注册了十年，那么你也会认真对待你所做的事。
9. 平均来说，任意给定关键字的 SERP (搜索引擎结果页) 的第一个链接网页都至少有超过 2000 个字。当你想让你写的博客或者创建的网页在搜索结果有一个好的排名时，那么你至少要有 2000 个字。
10. 为你的网站创建一个站内地图，将其存储为 sitemap.xml 置于根目录下，就可以在使用链接 domain.com/sitemap.xml 显示该内容。该文件还可以告诉 Google 此站点下的页面都放在哪些地方。当你增加新的内容后请记得修改该文件。也可以通过 Webmaster Tools 将其提交到 Google。
11. 使用 Webmaster Tools 管理你的网站，这样你就可以知道 Google 如何索引你的网站，及时更新网站严重的错误。
12. 要想提高你的图片的搜索排名，那么在上传至网站时请记得重命名你的图片，例如 rank_for_this_keyword_phase.png。
13. 在网站中添加 robots.txt 以告诉搜索引擎哪些页面允许索引，哪些不允许索引。
14. 添加规范的重定向，将你的非 www 网址重定向到 www 网址，反之亦然。
15. 使用 LSI (隐含语义索引) 关键字提高网页在主关键字下的排名。使用 Google 搜索主关键字然后在 “Searches related to ...” 下就可以找到 LSI 关键字了。
16. 确保你的内容之间能有效的互联。从主页开始，你的每个网页都应该在最多三次的点击下就能到达。
17. 在相关的页面上添加结构化的数据以帮助 Google 合适的索引你的内容。网页中需要的结构化数据主要包括：人物、产品、事件、组织、电影、书以及评论。可以使用 Schema Creator 生成结构化数据。
18. 检查 Google PageSpeed Insights 说明，确保你已经解决了所有拖慢你网页加载速度的问题。你的网站加载越快，那么它的排名也就越高。

加速网页加载

1. 网页大小不要超过 2 MB。可以使用 tools.pingdom.com 检查你网页的主登录界面，保证其不会过超过 2 MB。任何超过 2 MB 的内容都太大了。
2. 保证加载一个网页不会产生超过 50 个请求。任何网页上的文件或图片都会产生一个 HTTP 请求。请求数量越少，网页加载得越快。统计显示平均每个网页有 70 个请求。可以使用 GTmetrix 查看你的页面请求数。
3. 用 CSS 设计你的网页元素，千万不要使用背景图片。不要使用图片显示按钮、表单或者其它站点共享的组件。CSS 加载会更加快一些，而且可以灵活地适应不同的布局。
4. 上传图片到你的站点之前请先优化你的图片。像 TinyPNG 这类的工具，可以在不降低分辨率和图片质量的前提下将图片的大小减小 80-95%。
5. 利用 CDN 网络将你的图片以及大文件存储到世界多个地方。CDN 将你的文件存储分发到不同位置的服务器上，这样可以根据访问者的位置就近获得文件从而加速页面加载。
6. 上传文件前，请先使用工具压缩 JavaScript、HTML 或者 CSS 文件。你可以使用 Closure 编译器压缩 JavaScript，使用 HTML Minifier 压缩 HTML，使用 YUI 压缩 CSS 文件。
7. 把渲染块的 JavaScript 放到页脚去。放在 header 中的脚本只应该是那些会立马影响页面设计的脚本，例如自定义的字体。
8. 避免登录页的重定向。重定向会触发一次额外的 HTTP 请求，这会拖慢页面渲染。
9. 为那些不经常更新的页面使用浏览器缓存并设置合适的失效时间。浏览器缓存允许浏览器从本地磁盘中加载之前下载的页面，而不需要通过网络下载。
10. 服务器配置启用 gzip 压缩。压缩可以减少 90% 的传输响应时间，这会缩短页面第一次渲染的时间。
11. 服务器配置启用 Keep-Alive，这样一个 TCP 连接可以传输或接收多个 HTTP 请求。这样可以减小后续请求的时延。
12. 使用专用服务器提供服务以降低响应时延。当你的服务在共享的环境时，通常一个服务器上会有成百上千个服务在运行，而你的服务只是其中之一。如果正好其中某个服务的流量非常的大，那么它会拖慢你的网页加载速度。

优美的图形设计

1. 为你的优惠码设计一个好看的封面。这件事本身并不难，但是却对转化率会有很大的影响。
2. 为主页或者销售页面设计个性化的插图。为你的网站特意设计一些有特色的插图会更容易让浏览者印象深刻。
3. 为你的博客设计一个或者一系列有特色的图片。把这些图片在 Facebook、Twitter 这些社交网站上传播。当一个用户看到这些图片时，他们就能立马联想到你写的博客。
4. 为你自己以及你的团队成员设计个人头像或者是一些漫画头像。与每次有新成员加入时都请专业摄影视为其拍摄相比，设计一个漫画形象会便宜很多。此外，这对于新成员还是一份不错的礼物。
5. 将数据或者其它某些内容以图表的方式展示出来会比单纯地使用使用文字更能吸引流量。人们都喜欢在网站（例如 Pintrest ）上分享图表或者在他们自己网站上通过回链的方式转发你的内容。
6. 如果你会在你的网站上发布一些视频，那么你应该为这些视频添加简介，因为这样会给别人更加专业的感觉。添加一些能让你的视频更为突出的相关视频或者动画就更好了。

网站安全

1. 使用 SSL 证书以允许浏览器与服务器之间建立安全连接。如果你允许使用信用卡，那么你更应该使用 SSL 安全证书，因为绝大部分结账软件都有这样的要求。此外，Google 也说到使用 SSL 证书有助于网站的搜索排名。
2. 随时更新软件与插件。当 WordPress 或者其它 CMS 软件发布更新时，它们往往都是为了修复一些危险漏洞。如果你不更新，那么你的网站被攻击就只是时间的问题。
3. 设置双认证管理员登录。大部分黑客攻击都是从登录界面开始的。
4. 检测并清除恶意软件。如果你的网站曾经被黑过，那么这些黑客可能在服务器上放了一些不容易被发现的破损文件。如果不及时地删除这些文件，Google 很可能会把你的网站列入黑名单中，并降低网站的排名。当用户访问你的网站时，它还会警告用户提醒他们不要访问。
5. 千万不要将管理员用户名设置为 admin。删除默认管理员账户再新建一个不同的管理员用户名。
6. 定期备份你的数据库和网站文件。大多数备份软件都只会备份你的数据库，实际上只备份了你的数据和内容。但是如果你的网站文件丢失了，这时候你就需要使用备份文件来恢复了。

网站内容

1. 自己设计 404 错误页面，当用户访问不存在的网页时就会显示该页面。使用 404 页面将用户带回主页或者帮助他们找到他们正在找的内容。
2. 除了主页外，"关于我们" 页面也许是最多被访问的页面了。请确保该页面上正确地展示了你以及你的公司。
3. “联系我们” 页面除了帮助那些潜在客户联系你之外，还可以用于在你、客户以及 Google 之间建立信任关系。Google 在决定网页排名时，搜索引擎会在 “联系我们” 网页寻找邮箱、电话号码以及地址。详细的联系信息会让 Google 觉得网站会更可靠一些。
4. 把注册表单放在网站的各个页面也许是个不错的注意。不过，使用一个空的但是会有更高转化率的注册界面会更好一些。当你希望用户订阅时，直接将其链接至该界面即可。
5. 当用户订阅你的内容时，请记得给他们返回确认页以要求他们确认他们的电子邮箱。如果他们没有正确地进行确认，他们可能会完全忘记这事再也不会回来。
6. 用户在确认邮件中点击确认链接后，你应该给他们发送感谢页同时告诉他们接下来可以做什么。感谢页面每个订阅者会收到一次且仅一次，所以这是一个绝佳的机会给他们一个优惠价或鼓励他们购买产品。
7. 你的网站应该有一个登录页模板，这样当你需要的时候就可以直接使用它。
8. 如果你是在网上销售什么东西，请确保你的销售界面要非常好看。从标题开始，留好字符间距。你也可以添加一些销售视频。在页面的底部记得引导顾客去购买。

社交媒体

1. 控制你的博客和网页上的社交平台分享按钮数量，因为每个按钮都会运行一段脚本，这会额外地增加页面的加载时间。只包含内容常被分享的那些社交网站的分享按钮即可，例如 Faceboock、 Twitter、LinkedIn、Pinterest、Google+ 等。
2. 为你的社交页面创建图片，例如 Facebook 主页、Twiiter 账户、Youtube 频道等。个性化的图片会给浏览者留下积极的印像，会让首次访问用户更可能关注、订阅你的页面或频道。
3. 启用 Facebook Open Graph META 标签以确保你的内容在 Facebook 上正确地被分享。使用 Facebook Debugger 检查你的的主页、博客或者网页在 Facebook 上被分享时是如何显示的。
4. 启用 Twiiter Cards 以便网站 URL 被分享时自动显示丰富的图片。可以参考 Twitter Cards 入门。
5. 当你的网站被分享到 Google+ 时，你可以启用 Google+ Snippets 设置人们看到的内容。使用 Snippet 指南 生成相关代码。即使你的网站没有很多 Google+ 的赞，如果你正确的添加了元数据， Google+ 也会明白它们比较重要。
6. 在页面中隐藏链接到社交媒体主页的按钮。把这些图标缩小或者只在页脚上显示它们。依靠社交媒体销售目的是把客户带回到你的网站，而不是相反作用。

好了，我还漏掉了什么没？作为自由职业者或者企业家的你还有其它让网站变得酷炫的方法吗？