101种让你的网站更棒的方法

Posted 2020-08-15 lpfuture

这篇文章最初出版于AwesomeBlog。

 

上周我和一个老客户聊天，她和我说，“Nick，我觉得我的网站需要改进，但是我却不确定到底需要做什么”。

于是我就去问了周围很多人，朋友、家人和一些非互联网方向的商务人士。他们都说了同样的话：

“我需要一个清单，因为我不知道如何去搭建一个网站，我不得不雇佣一些人，但到最后我依然不知道都做了什么。”

所以我列了一个我们在AwesomeWeb中所做的事情的清单（当然还有一些是还没做的）。

我可以打包票……

……如果你符合清单中的每一项，你将拥有一个非常棒的站点

你怎么确定？

在AwesomeWeb，我观察了一千多个世界各地最棒的自由职业者，我并没有看到过某个网站满足清单上的每一项。

作为一个企业的所有者，通过这个清单你就掌控之后的事情了。你可以把任务交给设计师或者开发人员，甚至可以自己亲自完成。

作为一个自由职业者，你可以参考这个清单来做的更棒，然后回去和之前的顾客说：“我回顾了下我们之前做的，然后发现我们可以调整这、这和这，你只需要支付500、1000、5000就可以看到很棒的效果了……”

总的来说呢，就是……

……我想帮你做出更棒的网站，从这个清单开始。

---

良好的品牌

1. 使用专业的logo。大家的网站和博客中很难发现一个设计精美的logo，但其实这是建立好印象的第一步。

2. 上传高分辨率适配（retina-ready）的favicon（在你浏览器tab页上的方块图标）。大多数的网站都是使用16x16像素的favicon，然而在高分辨率的屏幕上，他们就模糊了。你可以在X-Icon Editor上生成一个64x64像素的favicon。

3. 多使用高分辨率图像。至少要保证图片是它容器的二倍大，然后再缩小显示它。

4. 最多使用2-3种颜色。其中一个背景色，一个活动色，一个强调色。

5. 选择颜色的时候，首选互补色或三原色（complementary or triad colors），然后进行调整，好的颜色组合会让你拥有带着故事感的设计。

6. 拒绝纯黑色（#000）。纯净的黑色是不存在的，所以黑色用着看起来总是不太对的样子。实际黑色大部分都被用在作为其他颜色的阴影区域。

7. 拒绝中性灰（e.g. #ccc）[然而我经常用，囧- -]。如果你希望你的设计有某些特质，可以用浅黄色增加温暖，红色提供能量，还有蓝色来制造信任。

绝佳的排版

1. 挑选一款优质字体。一个网页中95%都是字。使用一款优质字体是改善印象最便捷的方式。

2. 使用最多2-3种字体。太多种字体会显得杂乱而且降低了加载速度。选择一种标题字体和段落字体，再有就是特殊例子的字体。

3. 设置网页body字体大小为16px。在大显示器上难以阅读比这小的字号。移动设备的字号则缩为12px。

4. 选择一种排版缩放比例，根据缩放比例来设置段落，H4，H3，H2，H1的字体大小。根据这个缩放比例来设置你的行高和文本距离。

5. 设计其他排版元素，例如引用、无序列表、有序列表、标题、帮助提示、通知、高亮文字、代码例子、缩略语以及地址。

6. 安装一款定制图标字体，例如 Font Awesome。用它代替图片来做一些社交媒体、导航按钮和交互图形的图标。图标字体加载更快，随意缩放，并且可以自由的更改颜色。

出色的布局

1. 基本布局使用三分法，将你页面横纵各分为三部分，然后根据线段交叉来排列关键点。

2. 维护一个纵向布局的栅格系统。将你的布局分为8列，12列或者16列。

3. 通过基线网格来保持一种垂直的结构。文本行中间的空间其实和内容块中间的空间同等重要。每行文字下都应该有一个基于基线的margin-bottom。

4. 留白太奢侈了，它主要是用来创造喘息的空间和维持视觉平衡。应当吸引读者的视线到最重要的地方。

5. 平衡虚拟元素例如按钮、输入框、表单、标题等等。你应当大致可以找到一条你希望用户跟随的轨迹。

友好的用户接口

1. 使用一个放大加粗的活动按钮。每一个页面都有一个goal，通常都是通过点击按钮实现的。所以要确保这个按钮不会被忽略

2. 给链接、按钮、输入框和文本域添加hover和active状态。如果你选择在hover状态是使按钮变亮，那么其他元素hover状态也应当保持一致。

3. 保持表格样式的一致性。所有的文本域和输入框都应该样式统一，同样的边框颜色，背景色，悬停状态，点击状态，提示语，点击文字等等。设置好tabindex，这样就可以通过按下tab来依次访问这些元素。

4. 改变已访问链接的颜色，从而使你的用户知道他们去过这些页面了。

5. 一旦你有了自己的logo，色系，排版，布局以及图像尺寸，就应该建立一套风格指南。风格一致的组件才能构建出友好的用户接口。

完美的用户体验

1. 添加微交互给按钮或其他区域。比如一个“上传”按钮被点击之后可以变成“正在上传”或者“处理中”。

2. No scroll jacking!不要改变浏览器的默认行为，你也许觉得鼠标滚轮的速度变为之前的二倍很好，然而你认为的并不是你认为的。

3. 去除主页的轮播。这样减少了转换，而且还有其他更好的方式在小的空间里展示更多的信息。

4. 不要使用欢迎页。当访客第一次访问你的网站更希望看到你的主页。

5. 使用标题，副标题，首段（lead paragraphs），列表和题注来使你的内容更容易浏览。大多数人在认真阅读一个网页前都是先大致浏览它一遍。

6. 添加描述性预留文字给所有的表单、输入框和下拉菜单。如果你希望别人可以用某些方式来填充一个区域，请告诉他们。例如下拉列表和选择区域，把描述放在第一个选项。“请选择年份”比“2016”好多了。

7. 在表单上添加HTML5验证[HTML5 validation]，以便于用户可以更清晰的意识到自己在尝试提交存在错误的表单。

8. 通过避免模糊的链接名，减少混乱的东西，使用标点符号，保持简洁的布局，给图片加入alt说明，使用大号文字，并且保证文字颜色和背景色的高对比度，来让你的站点对于视觉缺陷者来说是可访问的。

9. 用BrokenLinkCheck.com来检查你网站的失效的链接。为了防止人们点击失效链接时陷入癫狂还是快修复了吧233。

极致的开发

1. 确保你的网站是移动优化的可以在任何设备上响应式的显示。良好的移动优化网站加载更快，排名更高，并且带给用户更好的体验。

2. 生成并且展示最优尺寸的图片。如果你上传了一个很大的图片用来做博客的特征图，同时你想要把这张图展示在侧边栏等位置，那么你就应该确保展示的是缩小后的图片而不是原图。

3. 给每个图片和链接加上标签和标题。如果出于某些原因一个图片没有加载出来，你的网站就可以在这个图片原本的位置来显示它的标签。同样，当你鼠标悬停在一个链接上时，浏览器则会展示这个链接的标题。

4. 使用<strong>和<em>代替<b>和<i>来定义加粗和斜体文字。他们的效果是一样的，但是却有本质上的区别。<b>是一种样式，而<strong>则是指出了这个内容的意义。

5. 处理掉冗余的HTML。当你复制粘贴内容到一个可视化编辑器（像WordPress的虚拟视图）中是，它加入了很多无用的span和行内样式。这样会让你的网站可读性变的很差。

6. 说到这，就要说一下去除内联样式，99%的情况，都应该是使用一个可以更新所有组件实例的CSS文件，而不是一页页一行行的改。

7. 使用Sass变量代替CSS来保持网站中颜色和组件的一致性。当想要改变一种颜色和这个颜色的阴影的时候，更新一行就完美实现了。

8. 与永久链接链接而不是URL以防你更改域名。例如，当要加入某个链接时，你的html应当是<a href = "/slug-goes-here">而不是<a href = "http://domain.com/slug-goes/here">。图片资源和CSS也是同理。如果你不这样做，当你把网站放到新的域名下的时候，你链接的所有资源文件和页面不存在了。

9. 开发自定义插件或者是利用提供特有功能的工具在网站上使用。自定义软件很难维护但是与同类网站相比却能提供很强的竞争力。

10. 测试跨浏览器兼容性来确保你的网站可以在Chrome，火狐，Safari，IE等浏览器上都可以正常显示。大家都知道低版本的IE浏览器在展示网站时差的一[哔---]，所以可以使用BrowserStack来手动检测。

11. 使用W3C的标记验证服务来发现你HTML中显眼的错误。要知道，大多数网站都都没完美使用正确的HTML。这一条的优先级不是最高的，但是如果在页面中没有任何错误会让你很舒适。

12. 建立一个模拟环境来展示最近的修改。理想情况下是有一个成品网站，来给所有人看，并且有一个开发网站，来给开发人员做修改。一旦修改好了可以上线了，在把开发网站推送到成品网站上。

13. 在页脚的Copyright中展示当前年份。当你看到一个网站使用过去的Copyright，你就会假想是不是这个页面已经没人维护了。可以使用php或者类似的脚本来在静态文字中展示当前年份（e.g. ?<established year>?—?<current year>）

非凡的搜索引擎优化

1. 选出你希望每个页面依此排序的关键词。根据这个关键词对页面每个部分进行优化，但并不是把这个关键词放到每个句子中，而是灵活表现出你希望它怎么排序。

2. 给每个页面设置富关键字的标题元素。在Google的搜索结果中，标题会以55个字符以内的蓝色链接的形式展示。

3. 限制每个页面中有且仅有一个H1。大多数情况下，H1的内容应该和标题元素的内容是相同的。

4. 使用大量的H2，H3和H4创建副标题来使你页面的内容富有层次感。

5. 通过一个被标题，H1，副标题和前1/3内容包含的特定关键字来优化页面。

6. 你的meta描述将会在展示在搜索结果中链接下的描述里。确保你每个页面都加入了meta描述并且在描述中包含了关键词

7. URL中，在域名后的固定链接(i.e. domain.com/permalink-here/)，应该包含由破折号分割的关键词。

8. Google的算法中考虑了域名的年龄，因为一个注册了很多年的域名更像一个高品质的来源。提前几年来注册你的域名。一旦你的域名注册了十年了，可以证明你有认真对待你的事业。

9. 平均来说，任意关键词SERP(search engine results page搜索引擎结果页)的第一个结果都是一个超过2000字/页的页面。如果想要搭建一个排行好的博客或者页面，试着去保证至少2000个字。

10. 惯于使用一个sitemap.xml文件创建网站地图，并将这个文件放在根目录下使其可以在 domain.com/sitemap.xml上展示。它将会使Google知道你所有页面的位置并且应当在你加入新内容时自动更新。通过 Webmaster Tools将文件提交到Google。

11. 为你的站点添加Google Webmaster Tools，以便于你可以看见站点的Google排名并且如果出现危险情况时维持更新。

12. 为了使图片排名提高，记得在网站上传前重命名图片和其他文件(e.g. 根据此关键词提升排名.png)。

13. 在网站中包含一个robots.txt文件来告诉web爬虫哪些页面应该索引哪些不应该索引。

14. 添加一个典型重定向来使网站中不含www的访问跳转到www版本，反之亦然。

15. 重新搜索并且整合每个页面的潜在语义索引(latent semantic indexing)词来帮助提升主关键词的排名。通过搜索你的关键词然后选择相关搜索来寻找你需要的潜在语义索引词。

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这种工具可以减小图片文件的大小80%-95%并且保证不失真。

5. 建立一个内容分发网络在世界不同的位置分发图片和一些大文件。CDNs可以基于访问者的物理位置来智能的选择当地的服务器以达到最大的加载速度。

6. 在上传之前，使用编译和压缩工具来缩小JavaScript，HTML和CSS文件。javascript可以使用Closure Compiler。HTML可以使用HTML Minifier。CSS可以使用YUI Compressor。

7. 把阻塞渲染的JavaScript移动到footer中。只有一开始就影响页面设计的脚本才应该放到header中（e.g. 定制字体）。

8. 避免登录页重定向。重定向会触发一个额外的HTTP请求以致于延迟页面渲染。

9. 通过给不经常更新的页面设定有效期限来减少浏览器缓存。浏览器缓存会告知浏览器去加载本地磁盘之前下载好的页面，取代通过网络加载。

10. 在服务器配置中允许gzip压缩。压缩可以在第一次渲染页面时减少90%传输应答时间。

11. 在服务器设置中允许长连接，这样可以让同一个TCP连接收发多组HTTP请求，因此减少后面请求的延迟。

12. 升级成为一个专用服务器或者添加额外服务器来提升服务器响应时间。当你使用一个共享主机环境时，你的网站只是同一个服务器中微不足道的一部分。如果其他的站点的大量开销造成拥堵，将会降低你页面的速度。

精致的图像设计

1. 设计一个自定义的电子书封面。这是一件不复杂却可以带来很大转换率的事情。

2. 给主页和售卖页设计一个自定义图解。一个好的图解可以用一个简单的方式让别人认知你的网站，并且留下深刻印象。

3. 创建一个或者一系列自定义的博客特征图像。也就是用来在Facebook，Twitter，Pinterest等平台展示。当用户看到与博文相关的某类型图像，他们就知道这个是你写的文章了。

4. 展示你和你团队成员个性化的插图和漫画头像。相比较每次新成员加入就雇佣专业的摄影师，个性化的漫画头像则是便宜些的选择。况且，这个一个给新成员的很棒的礼物。

5. 使用定制图表相对于使用博客可以更加直观的来展示数据和一些其他内容来获取更多的流量。人们都喜欢在Pinterest这类网站上分享图表或者在他们自己的站点上转发并且带上一个引向你网站的链接。

6. 如果你做了一个或一系列视频，你就应当有自定义的片头片尾让其拥有更专业的感觉。并且不提及其他视频的图像和动画将会使你的品牌更加突出。

周密的Web安全

1. 安装一个SSL证书来保证web服务器发起安全连接给浏览器。当你接受信用卡的时候，大多数的校验软件都需要一个SSL证书。Google曾经提及，一个SSL证书可以提升你的搜索排名。

2. 保证你的软件和插件的更新。当WordPress和其他CMS软件发布更新的时候，通常都是修补一些漏洞。如果你没有更新，那么你的网站被攻击就只是时间问题了。

3. 在管理页面设置双重认证登录入口。大多数的攻击都开始于登录页。

4. 检查并移除恶意软件。如果你的网站之前被攻击过，那么他们很可能加入了不容易被发现的感染文件进去。如果你不及时移除它，你的网站就可能被Google拉进黑名单，从而降低排名，并且当用户访问的时候就会收到警告。

5. 绝对不要把你的管理员名称设置成“admin”。删除掉默认管理员账户，并且创建一个不同用户名的新账户。

6. 定期备份数据库和网站文件。大部分备份软件和插件通常只会备份你数据库中的数据和内容。然而一旦你丢失了你的站点，你就可能需要一个网站文件的备份来恢复它。

精彩的内容

1. 定义个性化的404错误页，它将会在每当用户想要访问不存在的页面时被展示出来。使用404页面来引导他们回到主页或者帮助他们找到他们搜索的地方。

2. 除了主页之外，about页面大概是网站中被访问最多的页面了。所以确保它展示了你和你公司良好的形象。

3. 联系页面可以帮助人们联系到你，并且还可以起到在你，访客以及Google之间建立信任的作用。当确定要提升你网站排名的时候，机器人就会去你的联系页面来搜索邮箱，电话和地址。联系方式可以让Google觉得这个站点更可信。

4. It’s good to have opt-in forms strategically sprinkled throughout your site, but it’s also smart to have a squeeze page with nothing but a high-converting opt-in. When you want someone to subscribe, link to that page.[求指点]

5. 当有人订阅你的列表的时候，你应当给他们发送一个确认页面，让他们确认邮箱信息。不然如果他们没有给出正确的邮箱，那么他有可能会忘记你的站点并且再也不记得这件事。

6. 在用户点击了确认链接后，请给他们展示一个感谢页面，并且他们可以知道下一步做什么。每个订阅者都看到这个页面并且只看到一次，所以这是个很好的机会与他们建立交易或者鼓励他们购买。

7. 当用户采取某些指定的行动的时候，网站就应当展示出一个登录页模板。

8. 如果你想卖点东西，首先确认你有一个好看的销售页。以一个大标题开始，并且为销售模块留够空间，也可以添加一个销售视频。然后指引用户在页面底部进行购买。

丰富的社交媒体

1. 在博客和页面中限制社交媒体按钮的数量，因为每个按钮都要运行一个脚本，因此页面增加了额外的加载时间。只保留1-5个按钮，例如：Facebook，Twitter，LinkedIn，Pinterest，Google+等这些经常用来分享内容的平台。

2. 给你的Facebook页面，Twitter账号和YouTube频道创建社交媒体图像。自定义图片可以立竿见影的让第一次进入的访客喜欢，follow，订阅你的页面。

3. 设置Facebook开放图形META标签来确保你的内容可以在Facebook上正确的分享。在别人分享你的主页、博文等的URL的时候，使用Facebook Debugger来检查页面是如何展示的。

4. 设置Twitter Cards，使网站的URL被分享的时候，可以让丰富的图片和视频绑定到你的微博上。

5. 设置Google+ Snippets来定制你网站分享到Google+上的样式。使用Snippet guide可以生成代码。即使你的网站没有得到很多Google+的喜爱，Google也会因为你正确添加了meta数据从而有一些提升。

6. 把网站中链接到个人简介的社交媒体图标藏起来，可以把它们设置的小一点或者将它们放在footer中。社交媒体营销的目的就是将用户引向你的网站，而不是别的什么。