【转】【译】让你的网站更炫酷的一些小 tips

• 原文连接 : 101 Ways to Make Your Website More Awesome

• 原文做者 : Nicholas Tart

• 译文出自 : 掘金翻译计划

• 译者 : 达仔

• 译文连接：https://github.com/xitu/gold-miner/blob/master/TODO/101-ways-to-make-your-website-more-awesome.md

• 校对者: jamweak、cyseria

上周，我和一位老客户聊天，她说：“尼克，我以为个人网站须要改进，但我不能肯定我具体须要作什么。”

而后我就去问了一圈，包括朋友、家人和其余非互联网行业的商务人士，他们都提到了相同的观点：

“我须要一个检查清单，由于我不知道怎样建站，这也是我要雇人来作这件事情的缘由。可是我依然须要知道这个过程涉及到哪些方面。”

所以，我列了一个咱们在 AwesomeWeb 上完成的优化清单（以及一些咱们还没完成的）。

我敢保证:

若是你能把列表的每一项问题都改好，你将会拥有业界里最好的网站之一。

你是怎么知道的？

在 AwesomeWeb 里，我已经评估过 1,000 多个自由职业者。据我所了解的状况，我从没见过一个网站能够把全部选框都打上勾的。

对于企业老板，根据这个列表，你能够了解到接下来能够作哪些改进工做，而后把它发给你的设计或者开发去修改。你甚至还能够本身去修复其中的一部分问题。

对于自由职业者，使用这个列表可让你作出更加酷炫的内容，而后回去找你的老客户们，对他们说：

“我从新回顾了以前的项目，咱们能够修复这里、这里和这里，给我 $500, $1000, $5000 而后你能够期待获得如下的改进结果……”

重点是…

…我但愿能够帮你构造出更加酷炫的网站。事不宜迟，如今进入正题，开始介绍这个列表：

酷炫的品牌

1. 挑选一个 专业的 logo，如今很难找到一个带有很棒的 logo 的网站或者博客，所以这是一个瞬间获取信任感的好方法。

2. 上传一个 支持 retina 屏幕的 favicon (在浏览器标签上显示的正方形小图标)。大部分网站的 favicon 都是 16x16 像素的，在 retina 屏幕会显得模糊。使用 X-Icon Editor 生成 64x64 像素大小的 favicon。

3. 使用 支持 retina 屏幕的图片。这很简单，只须要确保图片宽高是容器的两倍，而后显示时缩放就能够了。

4. 最多使用 2-3 种颜色。包括背景色、文字-动做颜色和强调色。

5. 选择调色板时，从 互补色或者三色组（complementary or triad colors）开始选择，而后再进行调整。好的颜色组合会给你带来充满故事感的设计。

6. 不要使用纯黑色 (#000000)。纯黑色是不存在的，因此在网上使用纯黑色看起来不合适。实际上，黑色应该老是做为其它颜色的深色阴影。

7. 不要使用浅灰色 (好比 #cccccc)。若是你但愿设计更显个性化，能够试着添加一点黄色显得温暖，添加红色给予能量，而蓝色产生信任。

酷炫的排版

1. 挑选一种 优质的字体。使用 Typekit 之类的服务吧。听说多达 95% 的网站都是有排版的，想要产生良好的第一印象，使用优质字体是最简单、成本最低的方法。

2. 最多使用 2-3 种字体。使用更多字体会显得杂乱，而且减慢加载时间。挑选一种字体用在头部，一种用在段落中，若是有须要的话，还能够挑选一种用在其它特殊状况里。

3. 设置 body 的字体大小为 最小 16px，更小的字体在大屏幕中不方便阅读，若是是移动端页面能够考虑的最小值为 12px。

4. 设置 排版缩放比例，就像（乐理中有）增四度，纯五度音程或者（在绘画使用）黄金比例。根据比例来设置段落文本大小，以及 H4, H3, H2 和 H1 标签。固然，文本的行高和间距也要基于这个比例。

5. 设计其它的 排版元素，包括引用、符号列表、数字编号列表、表格标题、帮助文本、警告框、高亮文本、代码示例、缩写甚至地址。

6. 选择一种 自定义图标字体，好比 Font Awesome，来代替图片和其它一些元素，好比社交媒体 logo、导航按钮、交互图形等。图标字体的加载速度更快，能够任意缩放，而且能够随意更改图标颜色。

酷炫的布局

1. 使用 三分法 来设计基本布局。水平垂直把布局划成三等分，而后当线段横穿时，设法对齐关键的焦点。

2. 使用一个网格系统来维护 垂直方向的网格。把你的布局分隔成 8 列、12 列或者 16 列的布局，列与列之间带有足够空白。

3. 使用 基线网格 保持垂直方向的调和感。文本行之间的空间，和内容块之间的空间都一样重要。每行文本应该都拥有必定的底部外边距，也就是位于基线的地方。

4. 空白 是奢侈的。空格的存在是为了创造呼吸空间和平衡，你应该把读者的眼球吸引到重要的地方去。

5. 均衡摆放视觉元素，好比按钮、输入框、表单和大标题等。你应该把眼睛眯起来，试着跟踪那些你想让用户关注到的路径点。

酷炫的用户界面

1. 使用大大的加粗的 行为按钮。每一个页面应该只有一个目标，并且几乎都是点击一个按钮而已。因此确保这个按钮不会被用户忽略。

2. 添加 鼠标悬停 (hover) 和鼠标点击 (active) 状态 的样式给连接、按钮、输入框和文字区域。若是你选择在鼠标悬停时让按钮颜色变亮，那你也应该对于连接和输入框边框给出一样的样式。

3. 保持 表单样式 的一致性。全部的文本区域和输入框都应该有相同的样式。包括相同的边框颜色、背景颜色、悬停状态、点击状态、占位符文字、点击状态文字等。确保 tabindex 属性的正确设置，以便用户可使用 tab 键在表单项之间用正确的顺序切换。

4. 改变 已经点击过的连接 的颜色，让用户知道他们已经去过那个页面了。

5. 一旦你拥有了本身的 logo、颜色、排版、布局和图像大小，你要创建一个 风格指南。好的用户界面应该使用风格一致的组件，其样式应该老是相同的。

酷炫的用户体验

1. 在按钮和其它表单域元素使用 微交互（microinteractions）。好比，点击上传按钮以后，提示文字能够变为 “正在上传” 或者 “处理中”。

2. 不要使用 scroll jacking （译注：经过从新定义鼠标滚动速度、幅度达到控制可视区域视觉效果的方式）！不要打乱浏览器的默认行为，虽然你可能会以为让滚动速度变成原来的两倍很不错，但事实并不是如此。

3. 放弃使用首页轮播。轮播会减小转化率，能够考虑使用更佳的方法来在有限空间显示更多信息。

4. 不要使用欢迎界面。当用户第一次打开首页时，用户但愿能直接看到首页内容。

5. 使用 标题、副标题、头段落、列表、表格标题 让你的内容更容易被检索。大部分人在浏览网页前，都会先检索一遍全文，再决定是否阅读。

6. 添加 描述性的占位符文字 到你的表单、输入框和下拉菜单。若是你想要让浏览者用某种特定方式来填写表单，你应该指引他怎么作。对于下拉菜单和选择框来讲，可让第一个选项变成描述，好比 “选择年份” 就比 “2016” 更合适。

7. 往表单添加 HTML5 验证，让用户在提交表单时能够清楚地知道哪些部分出现填写错误。

8. 经过避免含糊连接名字、减小杂乱排版、使用标点符号、保持简洁布局、添加图片提示（alt text）、使用大字号、保持文本和背景色的高对比度，可让你的网站 适用于视觉障碍人群。

9. 经过 BrokenLinkCheck.com 检查你的网站是否有 损坏的连接。修复这些坏链，避免让用户由于点击到它们而抓狂。

酷炫的开发

1. 确保你的站点是通过 移动端优化 的，也就是在任何设备上均可以响应式地显示。合理优化移动端的站点，加载速度更快，排行更高，而且能够提供更佳的用户体验。

2. 生成并 显示通过优化的图像。假设你上传了一张大图片，好比博文的特征图像，若是你想在站点的其余地方显示（好比侧边栏），应确保你在侧边栏显示的是图像的缩略图而非原图。

3. 全部图片和超连接都要添加 alt 和 title 属性。当遇到某种异常状况，图片没有正常加载出来的时候，网站应该在图片位置显示替换文字（alt text）。而且，当鼠标悬停在连接时，浏览器应该显示该连接的 title 属性的值。

4. 使用 <strong> 和 <em> 标签代替 <b> and <i>，以输出加粗和斜体字符。虽然他们的做用相同，可是有着根本区别。<b> 标签对应着一种样式，而 <strong> 标签则是一种语义化的表示，指明了应该如何理解这个标签的含义。

5. 去除多余的 HTML。当你复制粘贴内容到 WYSIWYG 编辑器（相似于 WordPress 的编辑器）的时候，它会添加许多没必要要的 span 标签与内联样式。时间长了，你的网站代码就会变得不可读了。

6. 说到这里，须要给你的 HTML 移除内联样式。99% 的样式规则都应该写进 CSS 文件，以便你能够在同一时间更新一个组件在全部页面的样式。

7. 使用 Sass 变量 代替原生 CSS，以保持颜色和其余组件能够在整个网站之间共用。这样，当你想要改变这个颜色时，只需改变一行代码而不是上百行。

8. 连接使用永久连接（permalinks）代替完整 URL。当你打算切换域名时，你的连接最好使用 代替完整路径 。对于一些图片资源和 CSS 背景，若是你不这么作，当域名变化的时候，你的全部资源都将会失效。

9. 开发一个 自定义插件 或者工具，为你的网站提供独特的功能。虽然自定义软件难以维护，可是这样作可让你的网站在众多相似网站中脱颖而出。

10. 测试 跨浏览器兼容性，确保你的网站能够在 Chrome, Firefox, Safari, Internet Explorer 和其它浏览器正常显示。虽然旧版 IE 在兼容性方面臭名昭著，可是能够经过 BrowserStack 进行人工检查。

11. 使用 W3C 的 Markup Validation Service（标记语言验证服务） 来检查 HTML 的明显错误。要记住，大部分网站的 HTML 都不是十分完善的。虽然这项检查并不是最高优先级，可是若是你的 HTML 没有错误，你会感到更开心。

12. 设定一个 模拟环境 用来改变你的当前网站。理想状况下，你应该有一个生产环境，是用户能看见的；以及一个模拟环境，供开发者做出更改。一旦更改已经准备好发布，就能够把模拟环境的代码部署到生产环境。

13. 在页面显示当前年份。当你看见一个站点的 copyright 年份不是最新的时候，你就会以为这个网站应该好久没维护了。可使用 PHP 或者相似的脚本语言，动态地显示当前年份，而不只仅是显示静态文本。（好比 © <established year> — <current year>）。

酷炫的搜索引擎优化

1. 为每一个页面选择一个关键词，这个关键词关系到你的页面排名。围绕这个关键词，优化这个页面的方方面面。固然，并非让你在每句话都提到这个词，能够动脑筋想一想你想让它排到第几位去。

2. 给每一个页面设定一个充满关键词的 title 标签。标题会显示在谷歌搜索结果的蓝色连接文字上，有 55 个字符的长度限制。

3. 每一个页面有且仅有一个 H1 标签。在大多数状况下，这个标签的文字应该和 title 标签相同。

4. 在页面内容中包含不少 H二、H3 和 H4 标签 ，以建立小标题和显出视觉层次感。

5. 用一个 特定的关键词 优化页面，能够经过把它包含在标题、H一、副标题和内容的前 1/3 部分。

6. 你的 meta 标签的描述（description） 会显示在搜索引擎的连接下方。因此确保你的每一个页面都包含 meta description，并确保在描述里包含关键词。

7. 你的 永久连接（permalink），也就是 URL 里紧随域名的部分（好比 domain.com/permalink-here/），应该包含破折号分隔开的关键词内容。

8. Google 把 域名的注册时长 考虑到算法中，他们认为，注册时间长的域名更有可能提供高质量的资源。提早注册你的域名吧，若是你的域名注册时间超过 10 年，相信你对你的事业是认真的。

9. 平均起来，SERP (搜索引擎结果页面) 的第一个结果，无论是任何关键词，打开的页面都很多于 2000 字/页。当你写文章或者建立页面时，若是你但愿页面的排名更高，试着至少写 2000 字吧。

10. 老是 建立站点地图 并命名为 sitemap.xml 文件，而后把它放进根目录，并让文件能够经过 domain.com/sitemap.xml 访问。这个文件能够告诉谷歌，你的全部页面的位置，并应该在添加新内容时更新地图。能够经过 Webmaster Tools 提交给谷歌。

11. 添加你的网站的 Google Webmaster Tools，而后你能够知道 Google 如何索引你的站点，并在遇到关键问题时保持更新。

12. 为了提升图片的排行，上传以前应该老是 重命名你的图片 和其它文件。（好比：rank_for_this_keyword_phrase.png）

13. 在站点中包含 robots.txt 文件，告诉爬虫哪些页面应该/不该该被索引。

14. 添加 canonical 重定向 把不带 www 的页面访问指向网站的 www 版本，或者反过来也能够。

15. 研究并整合每一个页面的 LSI 关键词（LSI: 潜在语义索引），以帮助提升页面在主关键词的排行。经过 Google 搜索一些关键词短语并寻找 “相关搜索” 连接，能够帮你找出 LSI 关键词。

16. 常常确保 你的内容之间能够互相链接。你的站点的每一个页面，都应该能够经过从首页开始的很少于三次点击访问到。

17. 添加 结构化的数据 到相关页面，以帮助 Google 合理索引你的内容。如下这些页面类型须要结构化的数据，包括：人物、产品、事件、公司、电影、书本、报刊评论等。使用 Schema Creator 能够帮你生成结构化的数据。

18. 使用 Google 的 PageSpeed Insights 工具，以确保你修复了全部可能下降页面速度的广泛问题。页面加载速度越快，排名越高。

酷炫的网页速度

1. 保持 页面流量低于 2MB。使用 tools.pingdom.com 检查主页面的加载流量，若是多于 2MB 说明内容太多了。

2. 保持 页面请求低于 50 个。页面中的每一个文件和图片都是一个 HTTP 请求，请求数越少，加载速度越快。平均每一个网页的请求数是 70 个。使用 GTmetrix 能够检查你的网页请求数。

3. 设计页面元素时，使用 CSS 代替背景图片。不要使用图片来显示按钮、表单或者其它通用的元素。CSS 的加载速度更快，而且在响应式布局中更加灵活。

4. 在图片上传以前 优化图像。好比 TinyPNG 这样的工具，能够帮助你在不下降分辨率或者图像质量的状况下，减小图片文件大小。

5. 使用 内容分发网络（Content Delivery Network） 来存储你的图片和其它大文件，并放在世界上的不一样区域中。CDN 经过策略定位好的服务器，存储分发你的文件，能够最大化加速页面速度，固然加载速度也根据访客的所在地区而有所差异。

6. 在上传你的代码文件到服务器以前，经过编译和压缩工具，最小化 JavaScript, HTML 和 CSS。对于 JavaScript，可使用 Closure Compiler。对于 HTML，可使用 HTML Minifier。对于 CSS，可使用 YUI Compressor。

7. 把 阻塞渲染的 JavaScript 移动到底部。惟一应该放在头部的脚本是那些会马上影响页面设计的内容（好比：自定义字体）。

8. 避免目标网页重定向。重定向触发额外的 HTTP 请求，会延迟页面渲染。

9. 借助 浏览器缓存，能够经过为页面和不常常更新的资源设置过时时间来实现。浏览器缓存会通知浏览器，从本地磁盘加载以前下载过的页面，以减小没必要要的网络请求。

10. 在服务器配置中启用 gzip 压缩。压缩能够减小多达 90% 的传输响应时间，大大减小了首次渲染页面的时间。

11. 在服务器配置中启用 Keep-Alive，以容许同一个 TCP 连接能够发送和接收多个 HTTP 请求，于是能够减小后来请求的延迟。

12. 升级为 专用服务器 或者更优质的主机服务，以下降服务器响应时间。当你使用共享的服务器环境时，你的站点一般放在一台须要同时响应至少上百个网站的服务器里，若是其它网站的流量很大，你的网站速度天然就会下降。

酷炫的平面设计

1. 做为可选的加分项，使用 自定义 ebook 封面。它不难建立，可是可让你的转化率大大提升。

2. 为你的主页和销售页面设计一个 自定义的平面图形或者插图。一个专门为站点设计的好插图，可让你的站点更加容易让人记住。

3. 建立一个或者一系列的自定义 博客特征图像设计。也就是你在 Facebook, Twitter, Pinterest 等社交网站传播时使用的图片。当用户看到和博客有所关联的某类型的图片时，他们会联想到文章多是你写的。

4. 给你本身和你的团队的每一个成员显示一张自定义的 头像插图或者漫画。相比于聘请专业的摄影师，自定义的漫画成本较低，特别是当你的团队增长新成员的时候。此外，对于新成员来讲这也是一份不错的礼物。

5. 自定义图表 以可视化的方式显示数据和其余内容，相比于同类的博客文章，更容易获取更多流量。人们更喜欢在 Pinterest 这样的网站上分享图表，或者是带着你的站点的反向连接并转发到他们本身的网站上。

6. 若是你创做了一个甚至一系列的视频，你应该拥有一个 定制的视频开场部分和/或结尾部分，让你们感觉到视频是专业的。不要说起其它的视频画面或者动画，能够帮助你的品牌更加突出。

酷炫的 Web 安全性

1. 安装 SSL 证书，以容许服务器端和浏览器之间创建安全链接。若是网站用到银行卡支付功能，大部分的检测软件都要求使用 SSL 证书。Google 称，用上 SSL 证书能够帮助提升网站的搜索排行。

2. 你用到的软件和插件要 保持最新版本。Wordpress 和其它 CMS 软件都会释放更新，一般是为了修复漏洞。若是你没有及时更新，你的网站被攻击也就是早晚的事情了。

3. 为管理员页面设置 双认证登陆。大部分的黑客入侵都是从登陆页开始的。

4. 检查并 删除恶意软件。若是你的网站曾经被入侵，黑客极可能会留下一些不容易发现的后门。若是你没有及时删除，你的网站可能会被谷歌列入黑名单，大大下降你的网站排行，并在用户打开网站时，警告用户离开。

5. 不要把 管理员帐号 称为 “admin”。删除默认的管理员帐号，并建立一个使用其余名字的新帐号。

6. 按期 备份数据库和网站文件。大部分备份软件和插件都只备份你的数据库，里面包括了数据和内容。但若是你把整个网站都丢了，你还须要文件内容的备份来还原网站。

酷炫的内容

1. 建立一个自定义 错误 404 页面，当用户尝试访问不存在的地址时，这个页面就会显示出来。可使用 404 页面把他们引导到首页，并帮助他们寻找他们想要的页面。

2. 除了主页以外，关于页面 多是用户最常访问的页面了。要确保这个页面可以很好地表明你和你的公司。

3. 联系方式页 帮助用户找到你，并且还可以创建你和访客甚至 Google 之间的信赖。当决定站点排名时，机器会寻找你的联系方式，而后找到邮箱地址、电话号码和地址。联系信息告诉 Google，这个站点更加值得信赖一点。

4. 在战略上，站点里拥有选填的表单是正确的，然而创建一个 准顾客收集页面 的想法也不错，除了一个高转化率的选填表格什么也不用放。当你但愿用户提交信息时，连接到该页面就好了。

5. 当用户订阅你的列表时，确保你能够给他们一个 确认页面，让他们能够确认邮箱地址。假如用户不能确认邮箱是否正确，他们可能就会把事情给忘了，而后不再会回来你的站点了。

6. 在点击邮箱里的确认连接后，给用户发送一个 感谢页面 让他们知道下一步能够作什么。这个页面是每一个订阅者都能看见并且只能看见一次的，所以这是一个绝佳机会鼓励用户去掏腰包购买内容。

7. 你的网站或者主题应该有一个 着陆页 模板，当你须要用户进行特定操做时，能够用上。

8. 若是你在网站上买东西，确保你有一个漂亮的 销售页面。从大字标题开始；为你的卖场留出足够空间；有可能的话作一个介绍视频；在页面底部指引用户如何购买。

酷炫的社交媒体

1. 在你的文章和页面上，限制 社交媒体按钮的数量，由于每一个按钮都会运行相关的脚本，额外增长页面加载时间。一般包含 1-5 个按钮比较合适，好比 Facebook、Twitter、LinkedIn、Pinterest、Google+ 等，这些网站是你的内容最容易被分享的地方。

2. 在你的 Facebook 页面、Twitter 帐号、YouTube 频道上建立 社交媒体的图片。对于第一次访问的用户，自定义的图片能够给予他们良好的第一印象，并鼓励他们点赞、关注、订阅你的页面、我的档和频道。

3. 设置 Facebook Open Graph META 标签 以确保你的内容被分享到 Facebook 时能够正常显示内容。可使用 Facebook Debugger 检查你的主页、文章和其它页面，并看到当别人把 URL 分享出去的时候是什么样子的。

4. 设置 Twitter Cards，目的是当你的站点 URL 被分享到 Twitter 时，丰富的图片和视频资源能够显示到卡片上。要开始使用 Twitter Cards 能够 点击这里

5. 设置 Google+ Snippets，以自定义用户分享站点到 Google+ 时看见的内容。你可使用 Snippet 指南 生成相关代码。即便你的网站在 Google+ 没那么受欢迎，Google 也能够知道你正确地添加了 meta 信息，从而带来必定的权重加成。

6. 弱化那些连接到我的档的社交媒体图标，可让图标变小或者放在页面底部。其实社交媒体营销的目的就是把用户导流到你的网站来，而不是反过来做用。

好了，我还有什么遗漏的吗？做为自由职业者或者老板，你有没有尝试过使用上述方法让网站变得酷炫呢？

期待你的回复，能够在原文留言或者在推特上联系 @wntart。

若是你但愿更多人看见这个列表，不妨推荐这篇文章给你们。让咱们一块儿把网站变得更加酷炫！

加油！尼克