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

时间 2020-05-29

标签让你网站方法栏目网站开发繁體版

原文原文链接

这篇文章最初出版于AwesomeBlog。web

上周我和一个老客户聊天，她和我说，“Nick，我以为个人网站须要改进，可是我却不肯定到底须要作什么”。算法

因而我就去问了周围不少人，朋友、家人和一些非互联网方向的商务人士。他们都说了一样的话：数据库

“我须要一个清单，由于我不知道如何去搭建一个网站，我不得不雇佣一些人，但到最后我依然不知道都作了什么。”浏览器

因此我列了一个咱们在AwesomeWeb中所作的事情的清单（固然还有一些是还没作的）。缓存

我能够打包票……安全

……若是你符合清单中的每一项，你将拥有一个很是棒的站点服务器

你怎么肯定？网络

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

做为一个企业的全部者，经过这个清单你就掌控以后的事情了。你能够把任务交给设计师或者开发人员，甚至能够本身亲自完成。编辑器

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

总的来讲呢，就是……

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

良好的品牌

使用专业的logo。你们的网站和博客中很难发现一个设计精美的logo，但其实这是创建好印象的第一步。
上传高分辨率适配（retina-ready）的favicon（在你浏览器tab页上的方块图标）。大多数的网站都是使用16x16像素的favicon，然而在高分辨率的屏幕上，他们就模糊了。你能够在X-Icon Editor上生成一个64x64像素的favicon。
多使用高分辨率图像。至少要保证图片是它容器的二倍大，而后再缩小显示它。
最多使用2-3种颜色。其中一个背景色，一个活动色，一个强调色。
选择颜色的时候，首选互补色或三原色（complementary or triad colors），而后进行调整，好的颜色组合会让你拥有带着故事感的设计。
拒绝纯黑色（#000）。纯净的黑色是不存在的，因此黑色用着看起来老是不太对的样子。实际黑色大部分都被用在做为其余颜色的阴影区域。
拒绝中性灰（e.g. #ccc）[然而我常常用，囧- -]。若是你但愿你的设计有某些特质，能够用浅黄色增长温暖，红色提供能量，还有蓝色来制造信任。

绝佳的排版

挑选一款优质字体。一个网页中95%都是字。使用一款优质字体是改善印象最便捷的方式。
使用最多2-3种字体。太多种字体会显得杂乱并且下降了加载速度。选择一种标题字体和段落字体，再有就是特殊例子的字体。
设置网页body字体大小为16px。在大显示器上难以阅读比这小的字号。移动设备的字号则缩为12px。
选择一种排版缩放比例，根据缩放比例来设置段落，H4，H3，H2，H1的字体大小。根据这个缩放比例来设置你的行高和文本距离。
设计其余排版元素，例如引用、无序列表、有序列表、标题、帮助提示、通知、高亮文字、代码例子、缩略语以及地址。
安装一款定制图标字体，例如 Font Awesome。用它代替图片来作一些社交媒体、导航按钮和交互图形的图标。图标字体加载更快，随意缩放，而且能够自由的更改颜色。

出色的布局

基本布局使用三分法，将你页面横纵各分为三部分，而后根据线段交叉来排列关键点。
维护一个纵向布局的栅格系统。将你的布局分为8列，12列或者16列。
经过基线网格来保持一种垂直的结构。文本行中间的空间其实和内容块中间的空间同等重要。每行文字下都应该有一个基于基线的margin-bottom。
留白太奢侈了，它主要是用来创造喘息的空间和维持视觉平衡。应当吸引读者的视线到最重要的地方。
平衡虚拟元素例如按钮、输入框、表单、标题等等。你应当大体能够找到一条你但愿用户跟随的轨迹。

友好的用户接口

使用一个放大加粗的活动按钮。每个页面都有一个goal，一般都是经过点击按钮实现的。因此要确保这个按钮不会被忽略
给连接、按钮、输入框和文本域添加hover和active状态。若是你选择在hover状态是使按钮变亮，那么其余元素hover状态也应当保持一致。
保持表格样式的一致性。全部的文本域和输入框都应该样式统一，一样的边框颜色，背景色，悬停状态，点击状态，提示语，点击文字等等。设置好tabindex，这样就能够经过按下tab来依次访问这些元素。
改变已访问连接的颜色，从而使你的用户知道他们去过这些页面了。
一旦你有了本身的logo，色系，排版，布局以及图像尺寸，就应该创建一套风格指南。风格一致的组件才能构建出友好的用户接口。

完美的用户体验

添加微交互给按钮或其余区域。好比一个“上传”按钮被点击以后能够变成“正在上传”或者“处理中”。
No scroll jacking!不要改变浏览器的默认行为，你也许以为鼠标滚轮的速度变为以前的二倍很好，然而你认为的并非你认为的。
去除主页的轮播。这样减小了转换，并且还有其余更好的方式在小的空间里展现更多的信息。
不要使用欢迎页。当访客第一次访问你的网站更但愿看到你的主页。
使用标题，副标题，首段（lead paragraphs），列表和题注来使你的内容更容易浏览。大多数人在认真阅读一个网页前都是先大体浏览它一遍。
添加描述性预留文字给全部的表单、输入框和下拉菜单。若是你但愿别人能够用某些方式来填充一个区域，请告诉他们。例以下拉列表和选择区域，把描述放在第一个选项。“请选择年份”比“2016”好多了。
在表单上添加HTML5验证[HTML5 validation]，以便于用户能够更清晰的意识到本身在尝试提交存在错误的表单。
经过避免模糊的连接名，减小混乱的东西，使用标点符号，保持简洁的布局，给图片加入alt说明，使用大号文字，而且保证文字颜色和背景色的高对比度，来让你的站点对于视觉缺陷者来讲是可访问的。
用BrokenLinkCheck.com来检查你网站的失效的连接。为了防止人们点击失效连接时陷入癫狂仍是快修复了吧233。

极致的开发

确保你的网站是移动优化的能够在任何设备上响应式的显示。良好的移动优化网站加载更快，排名更高，而且带给用户更好的体验。
生成而且展现最优尺寸的图片。若是你上传了一个很大的图片用来作博客的特征图，同时你想要把这张图展现在侧边栏等位置，那么你就应该确保展现的是缩小后的图片而不是原图。
给每一个图片和连接加上标签和标题。若是出于某些缘由一个图片没有加载出来，你的网站就能够在这个图片本来的位置来显示它的标签。一样，当你鼠标悬停在一个连接上时，浏览器则会展现这个连接的标题。
使用和代替和来定义加粗和斜体文字。他们的效果是同样的，可是却有本质上的区别。是一种样式，而则是指出了这个内容的意义。
处理掉冗余的HTML。当你复制粘贴内容到一个可视化编辑器（像WordPress的虚拟视图）中是，它加入了不少无用的span和行内样式。这样会让你的网站可读性变的不好。
说到这，就要说一下去除内联样式，99%的状况，都应该是使用一个能够更新全部组件实例的CSS文件，而不是一页页一行行的改。
使用Sass变量代替CSS来保持网站中颜色和组件的一致性。当想要改变一种颜色和这个颜色的阴影的时候，更新一行就完美实现了。
与永久连接连接而不是URL以防你更改域名。例如，当要加入某个连接时，你的HTML应当是<a href = "/slug-goes-here">而不是<a href = "http://domain.com/slug-goes/here">。图片资源和CSS也是同理。若是你不这样作，当你把网站放到新的域名下的时候，你连接的全部资源文件和页面不存在了。
开发自定义插件或者是利用提供特有功能的工具在网站上使用。自定义软件很难维护可是与同类网站相比却能提供很强的竞争力。
测试跨浏览器兼容性来确保你的网站能够在Chrome，火狐，Safari，IE等浏览器上均可以正常显示。你们都知道低版本的IE浏览器在展现网站时差的一[哔---]，因此可使用BrowserStack来手动检测。
使用W3C的标记验证服务来发现你HTML中显眼的错误。要知道，大多数网站都都没完美使用正确的HTML。这一条的优先级不是最高的，可是若是在页面中没有任何错误会让你很温馨。
创建一个模拟环境来展现最近的修改。理想状况下是有一个成品网站，来给全部人看，而且有一个开发网站，来给开发人员作修改。一旦修改好了能够上线了，在把开发网站推送到成品网站上。
在页脚的Copyright中展现当前年份。当你看到一个网站使用过去的Copyright，你就会假想是否是这个页面已经没人维护了。可使用PHP或者相似的脚原本在静态文字中展现当前年份（e.g. ©<established year> — <current year>）

非凡的搜索引擎优化

选出你但愿每一个页面依此排序的关键词。根据这个关键词对页面每一个部分进行优化，但并非把这个关键词放到每一个句子中，而是灵活表现出你但愿它怎么排序。
给每一个页面设置富关键字的标题元素。在Google的搜索结果中，标题会以55个字符之内的蓝色连接的形式展现。
限制每一个页面中有且仅有一个H1。大多数状况下，H1的内容应该和标题元素的内容是相同的。
使用大量的H2，H3和H4建立副标题来使你页面的内容富有层次感。
经过一个被标题，H1，副标题和前1/3内容包含的特定关键字来优化页面。
你的meta描述将会在展现在搜索结果中连接下的描述里。确保你每一个页面都加入了meta描述而且在描述中包含了关键词
URL中，在域名后的固定连接(i.e. domain.com/permalink-here/)，应该包含由破折号分割的关键词。
Google的算法中考虑了域名的年龄，由于一个注册了不少年的域名更像一个高品质的来源。提早几年来注册你的域名。一旦你的域名注册了十年了，能够证实你有认真对待你的事业。
平均来讲，任意关键词SERP(search engine results page搜索引擎结果页)的第一个结果都是一个超过2000字/页的页面。若是想要搭建一个排行好的博客或者页面，试着去保证至少2000个字。
惯于使用一个sitemap.xml文件建立网站地图，并将这个文件放在根目录下使其能够在 domain.com/sitemap.xml上展现。它将会使Google知道你全部页面的位置而且应当在你加入新内容时自动更新。经过 Webmaster Tools将文件提交到Google。
为你的站点添加Google Webmaster Tools，以便于你能够看见站点的Google排名而且若是出现危险状况时维持更新。
为了使图片排名提升，记得在网站上传前重命名图片和其余文件(e.g. 根据此关键词提高排名.png)。
在网站中包含一个robots.txt文件来告诉web爬虫哪些页面应该索引哪些不该该索引。
添加一个典型重定向来使网站中不含www的访问跳转到www版本，反之亦然。
从新搜索而且整合每一个页面的潜在语义索引(latent semantic indexing)词来帮助提高主关键词的排名。经过搜索你的关键词而后选择相关搜索来寻找你须要的潜在语义索引词。
确保内容中互相跳转的连接是可用的。应该保证每一个页面最多从首页点击三次就能够访问。
在相关的页面添加结构化数据以便于Google能够争取索引你的内容。须要定制结构化数据的页面类型有人物，产品，时间，组织，电影，书，回顾等。可使用Schema Creator来生成结构化数据。
经过Google的PageSpeed Insights来确保你解决了因此常见的影响网页速度的问题。网页加载速越快就会带来排名的相应提高。

出色的页面速度

保持网页小于2MB。使用tools.pingdom.com来检查你的主登陆页。不管怎样都不能超过2MB。
保持页面请求少于50。每一个文件或者图片都会带来一个HTTP请求，请求数量越少，页面加载速度越快。每一个页面平均有70个请求，使用GTmetrix来查看具体请求。
用CSS代替背景图片来设计页面。绝对不要用一张图片来作按钮，表格或者其余网页中基本组件。CSS加载的更快而且在响应式布局中更加灵活。
在网站加载图片以前优化他们。想TinyPNG这种工具能够减少图片文件的大小80%-95%而且保证不失真。
创建一个内容分发网络在世界不一样的位置分发图片和一些大文件。CDNs能够基于访问者的物理位置来智能的选择当地的服务器以达到最大的加载速度。
在上传以前，使用编译和压缩工具来缩小JavaScript，HTML和CSS文件。JavaScript可使用Closure Compiler。HTML可使用HTML Minifier。CSS可使用YUI Compressor。
把阻塞渲染的JavaScript移动到footer中。只有一开始就影响页面设计的脚本才应该放到header中（e.g. 定制字体）。
避免登陆页重定向。重定向会触发一个额外的HTTP请求以至于延迟页面渲染。
经过给不常常更新的页面设定有效期限来减小浏览器缓存。浏览器缓存会告知浏览器去加载本地磁盘以前下载好的页面，取代经过网络加载。
在服务器配置中容许gzip压缩。压缩能够在第一次渲染页面时减小90%传输应答时间。
在服务器设置中容许长链接，这样可让同一个TCP链接收发多组HTTP请求，所以减小后面请求的延迟。
升级成为一个专用服务器或者添加额外服务器来提高服务器响应时间。当你使用一个共享主机环境时，你的网站只是同一个服务器中微不足道的一部分。若是其余的站点的大量开销形成拥堵，将会下降你页面的速度。

精致的图像设计

设计一个自定义的电子书封面。这是一件不复杂却能够带来很大转换率的事情。
给主页和售卖页设计一个自定义图解。一个好的图解能够用一个简单的方式让别人认知你的网站，而且留下深入印象。
建立一个或者一系列自定义的博客特征图像。也就是用来在Facebook，Twitter，Pinterest等平台展现。当用户看到与博文相关的某类型图像，他们就知道这个是你写的文章了。
展现你和你团队成员个性化的插图和漫画头像。相比较每次新成员加入就雇佣专业的摄影师，个性化的漫画头像则是便宜些的选择。何况，这个一个给新成员的很棒的礼物。
使用定制图表相对于使用博客能够更加直观的来展现数据和一些其余内容来获取更多的流量。人们都喜欢在Pinterest这类网站上分享图表或者在他们本身的站点上转发而且带上一个引向你网站的连接。
若是你作了一个或一系列视频，你就应当有自定义的片头片尾让其拥有更专业的感受。而且不说起其余视频的图像和动画将会使你的品牌更加突出。

周密的Web安全

安装一个SSL证书来保证web服务器发起安全链接给浏览器。当你接受信用卡的时候，大多数的校验软件都须要一个SSL证书。Google曾经说起，一个SSL证书能够提高你的搜索排名。
保证你的软件和插件的更新。当WordPress和其余CMS软件发布更新的时候，一般都是修补一些漏洞。若是你没有更新，那么你的网站被攻击就只是时间问题了。
在管理页面设置双重认证登陆入口。大多数的攻击都开始于登陆页。
检查并移除恶意软件。若是你的网站以前被攻击过，那么他们极可能加入了不容易被发现的感染文件进去。若是你不及时移除它，你的网站就可能被Google拉进黑名单，从而下降排名，而且当用户访问的时候就会收到警告。
绝对不要把你的管理员名称设置成“admin”。删除掉默认管理员帐户，而且建立一个不一样用户名的新帐户。
按期备份数据库和网站文件。大部分备份软件和插件一般只会备份你数据库中的数据和内容。然而一旦你丢失了你的站点，你就可能须要一个网站文件的备份来恢复它。

精彩的内容

定义个性化的404错误页，它将会在每当用户想要访问不存在的页面时被展现出来。使用404页面来引导他们回到主页或者帮助他们找到他们搜索的地方。
除了主页以外，about页面大概是网站中被访问最多的页面了。因此确保它展现了你和你公司良好的形象。
联系页面能够帮助人们联系到你，而且还能够起到在你，访客以及Google之间创建信任的做用。当肯定要提高你网站排名的时候，机器人就会去你的联系页面来搜索邮箱，电话和地址。联系方式可让Google以为这个站点更可信。
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.[求指点]
当有人订阅你的列表的时候，你应当给他们发送一个确认页面，让他们确认邮箱信息。否则若是他们没有给出正确的邮箱，那么他有可能会忘记你的站点而且不再记得这件事。
在用户点击了确认连接后，请给他们展现一个感谢页面，而且他们能够知道下一步作什么。每一个订阅者都看到这个页面而且只看到一次，因此这是个很好的机会与他们创建交易或者鼓励他们购买。
当用户采起某些指定的行动的时候，网站就应当展现出一个登陆页模板。
若是你想卖点东西，首先确认你有一个好看的销售页。以一个大标题开始，而且为销售模块留够空间，也能够添加一个销售视频。而后指引用户在页面底部进行购买。

丰富的社交媒体

在博客和页面中限制社交媒体按钮的数量，由于每一个按钮都要运行一个脚本，所以页面增长了额外的加载时间。只保留1-5个按钮，例如：Facebook，Twitter，LinkedIn，Pinterest，Google+等这些常常用来分享内容的平台。
给你的Facebook页面，Twitter帐号和YouTube频道建立社交媒体图像。自定义图片能够立竿见影的让第一次进入的访客喜欢，follow，订阅你的页面。
设置Facebook开放图形META标签来确保你的内容能够在Facebook上正确的分享。在别人分享你的主页、博文等的URL的时候，使用Facebook Debugger来检查页面是如何展现的。
设置Twitter Cards，使网站的URL被分享的时候，可让丰富的图片和视频绑定到你的微博上。
设置Google+ Snippets来定制你网站分享到Google+上的样式。使用Snippet guide能够生成代码。即便你的网站没有获得不少Google+的喜好，Google也会由于你正确添加了meta数据从而有一些提高。
把网站中连接到我的简介的社交媒体图标藏起来，能够把它们设置的小一点或者将它们放在footer中。社交媒体营销的目的就是将用户引向你的网站，而不是别的什么。