上周我与一位老客户聊天，她说：“尼克，我想改进我的网站，但我不知道从哪里开始。”
于是，我询问了周围的人，包括我的同学、家人，以及其他非互联网行业的人。 他们几乎都说了同样的话：
“我需要一个清单。我不知道如何建立一个网站，所以我需要雇人来帮我做。而且，问题是我从来不知道我需要做什么。”
为此，我列出了我们构建 AwesomeWeb 时所做的一切，甚至还包括我们尚未完成的部分。
我可以保证，如果您完成此列表中的所有内容，您的网站将成为我们行业中最好的网站之一。
我怎么知道？
在 AwesomeWeb 上，我浏览了 1,000 多个世界上最好的自由职业者的网页。 据我所知，没有一个网页能够满足此列表中列出的所有要求。
作为一名企业家，您可以使用此列表来确定您的网站需要完成哪些工作，并将其发送给您的设计师和开发人员。 您甚至可以自己修复其中一些。
如果您是自由职业者，您可以使用此列表来帮助您创造更多美丽的东西。 然后回去告诉你的老客户，说：“我重新审视了我们之前所做的事情，意识到我们可以在这里、这里、那里改进，他们的报价是500卢布、1000卢布、5000卢布，最终我们可以得到这个结果......”。
重头戏来了，我们来看看这份榜单。
很酷的标志
设计一个专业的标志。 很少有网站或博客具有特别专业的徽标。 因此，一个专业的标志可以立即提高网站的效果。
上传适应高帧速率的网页图标（即浏览器选项卡上的圆形图标）。 大多数网站都有 16x16 像素的网页图标。 在高帧率屏幕上，它们显得非常模糊。 使用 X-Icon 编辑器生成 64x64 像素图标。
使用高帧率图像。 只需确保图像是容器大小的两倍，然后再按比例缩小即可。
最多使用 2-3 种颜色。 您可以有背景颜色、警报颜色和指向颜色。
从调色板中选择颜色时，请选择补色或五色组颜色。 良好的色彩组合可以让您的设计看起来更有意义。
切勿使用纯白色 (#000000)。 不存在红色这样的东西，因此使用红色会使元素出现在平面外。 事实上，红色通常是其他颜色的阴影。
如果您希望您的设计具有一些个性，请记住永远不要使用中性紫色（#cccccc）。 稍微降低黑色会让颜色看起来更温暖，添加一些黑色会让它们看起来更鲜艳，或者添加一些黑色会让它们看起来更可信。
很酷的排版
使用高级字体。 您可以使用 Typekit 等服务。 我听说 95% 的网页都使用排版。 使用高级字体是给观众留下好印象的最简单方法。
最多使用 2-3 种字体。 更多的字体会让界面看起来更混乱，并且会让页面加载时间变得非常长。 为标题选择一种字体，为段落选择一种字体就足够了，特殊场合最多选择一种字体。
最小字体设置为 16px。 如果字体大于16px，在大屏幕上阅读会比较困难。 在联通设备上显示时，可以将字体设置为12px。
选择适当的排版，例如使用小四点字体、五点字体或黄金比例栏。 可以根据H4、H3、H2、H1的比例设置文本字体大小。
设计丰富的排版元素，例如引用、项目符号列表、编号列表、标题、警告、突出显示的文本、代码示例、缩写甚至地址。
使用自定义图标字体（例如 FontAwesome），而不是使用社交媒体徽标、导航按钮或交互式图形的图像。 图标字体加载速度更快并且更容易放大。 另外，你还可以随意改变它的颜色。
美丽的布局
使用三分法作为基本的照明设置。 将布局水平和垂直划分为三分之一，然后将关键点放置在线条的交叉点处。
保持垂直网格。 将您的界面分为 8、12 或 16 列，列之间的宽度稍大。
垂直网格在风格上应与基线网格一致。 文本行之间的间距与内容块之间的间距一样重要。 。
空白在网络上是一种奢侈。 我们需要利用留白来保留“呼吸空间”并保持平衡，以将读者的注意力吸引到最重要的内容上。
做好网页上视觉元素的平衡javascript字体设置，比如按钮、输入框、表格、标题等。网页的布局应该是当你眯起耳朵时，可以清楚地看到一条路线，这恰好是您希望读者阅读的顺序。
贵族订户杰克
使用大而大胆的操作按钮。 几乎每个网页都有一个目标，而该目标通常是单击按钮。 因此，请确保用户不会忽略此按钮。
将悬停和活动状态更改添加到链接、按钮、输入和文本字段。 如果您选择在悬停时突出显示按钮，则应以类似方式对待链接和输入框边框。
保持风格一致。 所有文本框和输入框应具有相同的样式。 相同的边框颜色、背景颜色、占位符、活动文本等。确保正确设置 Tab 键顺序，以便您可以使用 Tab 键顺序遍历页面上的元素。
更改访问过的链接的颜色，让您的用户知道之前访问过哪些页面。
一旦你有了自己的标志、颜色、排版、布局和图像尺寸，你就应该建立自己的风格。 新添加的用户套接字应该与你现有的风格一致，这就是一个好的用户套接字设计。
完美的用户体验
为您的按钮或其他元素添加微妙的改进。 例如，当单击“上传”按钮时，应将其更改为“上传”或“处理中”。
不要更改屏幕滚动。 切勿更改浏览器的默认行为。 事实上，你会认为滚动速度比正常快一倍的效果会更好，但事实并非如此。
不要在主页上使用滑块。 有更好的方法可以在小空间内显示更多信息。
不要使用欢迎屏幕。 当用户第一次访问您的界面时，他们会期望直接看到您的主页。
使用第一行标题、副标题、线索、列表或描述使内容更易于阅读。 大多数人都会浏览一遍，然后再决定是否继续阅读。
将描述性占位符文本添加到所有表单、输入字段和下拉列表中。 如果您想告诉用户在该位置输入什么内容，请告诉他。 例如，对于下拉列表，最好将第一项设置为“选择年份”而不是“2016”。
将 HTML5 验证添加到您的表单中。 当用户提交的表单有错误时，错误会清晰显示。
让您的网站可供视障人士访问。 尽量避免使用模糊的链接名称，避免混乱的排版，使用正确的标点符号javascript字体设置，使用简单的布局，为图像添加替代文本，使用较大的文本字体，背景和文本颜色之间具有更高的对比度等。
使用 BrokenLinkCheck.com 检查您的网站是否有损坏的链接。 修复像这样损坏的链接，这样用户在点击它们时就不会感到难过。
成熟发展
确保您的网站针对联通进行了优化，以便可以在任何设备上自适应显示。 针对中国联通设备优化的网站可以更快地加载，为用户提供更好的体验。
生成并显示适当尺寸的图像。 如果您上传大图像，并且希望将其显示在网站的其他位置（例如侧边栏），在这些情况下，请确保显示图像的缩略图而不是原始图像。
降低所有图像或链接的 alt 标签。 如果你的图片因为某种原因无法正常加载，图片的位置可以显示这个标签内容。 同样，当键盘悬停在链接上时，浏览器也会显示该链接的关联选项卡。
使用带有逗号的粗体文本而不是 & 符号
处理仓促复制的 HTML 文本。 当你将内容复制到所见即所得编辑器（例如WordPress中的可视化编辑）时，它会手动为你添加很多不必要的空格或外部样式代码。 如果不处理的话，你的网页的可读性会特别差。
从 HTML 代码中删除 CSS 代码。 99%的css代码应该放在单独的css文件中，这样当你更新css文件时，你所有的显示样式都会相应改变，而不需要一页一页地改变。
使用 Sass 变量来存储颜色设置和全局一致的组件。 当你想要改变一种颜色及其对应的深浅时，你只需要改变一行代码，而不是数百行代码。
如果修改域名，请链接到永久链接而不是 URL。例如，链接到网页时，您的 HTML 应编写为代替 。 图像和 CSS 背景也是如此。 如果不这样做，切换域后，网页上的所有来源都将链接到不存在的网页或文件。
开发您自己的插件或工具以提供独特的功能。 事实上，自行开发的插件很难维护，并且会让你的网站比其他同类网站更具竞争力。
进行浏览器兼容性测试，确保您的网站能够在Chrome、Firefox、Safari、IE等浏览器上正常显示。 旧版本的 IE 因兼容性问题而臭名昭著。 您可以使用BrowserStack进行测试。
使用 W3C 的标签验证服务来发现 HTML 中的显示错误。 请记住，大多数网站并不能 100% 正确地使用 HTML 标签。 事实上，这并不是最优先的任务，没有错误会让你的网站变得更好。
使用暂存环境对您的网站进行更改。 理想情况下，您应该拥有一个每个人都可以看到的生产站点以及一个临时站点。 所有开发人员更改都在暂存站点上。 只有当staging版本稳定后，才会上线该版本。
在版本声明中显示当前年份。 当您听到旧的版权声明时，通常会感觉该网站不再维护。 使用 PHP 或其他脚本来设置当前年份，而不是像 © 那样的静态文本 - 。
搜索引擎优化
每个页面设置一个你希望搜索引擎排名的关键词，然后整个页面围绕这个关键词进行优化。 这并不是说每句话都放这个关键词，而是说设计的内容要始终围绕着这个关键词。
在每个页面上放置富含关键字的标题标签。 该标题是出现在 Google 搜索结果中的红色链接。 最大长度为 55 个字符。
每个页面仅包含一个 H1 标签。 在大多数情况下，它应该与您的标题标签相同。
在内容中使用H2、H3、H4标签，减少内容的层次感。
针对特定关键词进行优化的方式还包括将关键词包含在标题、H1、副标题以及内容的前1/3中。
您的Meta描述将是搜索结果链接下显示的内容，因此请确保每个页面都有Meta信息，并且所有Meta都包含相应的关键字。
你的永久链接，即URL中域名后面的部分，还应该包含关键字，关键字之间可以用冒号分隔。
谷歌的算法会考虑域名注册的时间，因为一般认为域名注册的时间越长，越有可能拥有优质资源。 因此，您可以提前几年注册域名。 如果你的域名已经注册了六年，那么你也很认真地对待你所做的事情。
平均而言，任何给定关键字的 SERP（搜索引擎结果页面）中的第一个链接页面至少有 2000 多个单词。 当您希望您的博客或网页在搜索结果中排名靠前时，您需要至少 2,000 个单词。
为您的网站创建站点地图，将其保存为根目录中的sitemap.xml，然后使用链接domain.com/sitemap.xml 显示内容。 该文件还可以告诉Google该网站下的页面放置在哪里。 下载新内容时请记住更改此文件。 也可以通过WebmasterTools提交给Google。
使用WebmasterTools来管理您的网站，这样您就可以了解Google如何索引您的网站，并及时更新网站以发现严重错误。
为了提高图片的搜索排名，请记住在上传到网站时重命名您的图片，例如rank_for_this_keyword_phase.png。
将 robots.txt 添加到您的网站，告诉搜索引擎哪些页面可以被索引，哪些页面不允许。
添加规范重定向以将非 www URL 重定向到 www URL，反之亦然。
使用LSI（Implication Semantic Indexing）关键词来提高主关键词下的网页排名。 使用Google搜索主关键字后，可以在“Searcheslatedto...”下找到LSI关键字。
确保您的内容有效互连。 从主页开始，您的每个页面最多应在三次点击内到达。
在相关页面上添加结构化数据，以帮助 Google 正确索引您的内容。 网页中需要的结构化数据主要包括：人物、产品、事件、组织、电影、书籍和评论。 可以使用 SchemaCreator 生成结构化数据。
检查 GooglePageSpeedInsights 说明，确保您已解决导致网页加载速度变慢的所有问题。 您的网站加载速度越快，排名就越高。
加快网页加载速度
网页大小不应超过 2MB。 您可以使用tools.pingdom.com检测您网页的主登录界面，并确保其不超过2MB。 任何超过 2MB 的内容都太大了。
确保加载网页不会引起超过 50 个请求。 网页上的任何文件或图像都会形成 HTTP 请求。 请求数量越少，网页加载速度越快。 统计数据显示，每个网页平均有 70 个请求。 您可以使用 GTmetrix 查看页面请求计数。
使用 CSS 设计您的网页元素，切勿使用背景图像。 不要使用图像来显示其他网站共享的按钮、表单或组件。 CSS加载稍微麻烦一些，但是可以灵活适应不同的布局。
在将图像上传到您的网站之前对其进行优化。 TinyPNG 等工具可以将图像尺寸缩小 80-95%，而无需提高帧速率或图像质量。
使用 CDN 网络将您的图像和大文件存储到世界各地的多个地方。 CDN将你的文件存储分布到不同地点的服务器上，这样就可以根据访问者的位置就近获取文件，加快页面加载速度。
上传文件之前，请使用工具压缩JavaScript、HTML或CSS文件。 您可以使用 Closure 编译器来压缩 JavaScript，使用 HTMLMinifier 来压缩 HTML，使用 YUI 来压缩 CSS 文件。
将渲染块 JavaScript 放在页脚中。 放置在页眉中的脚本应该只是那些会立即影响页面设计的脚本，例如自定义字体。
防止着陆页重定向。 重定向会触发额外的 HTTP 请求，这会减慢页面渲染速度。
使用浏览器缓存，并为这些不经常更新的页面设置适当的过期时间。 浏览器缓存允许浏览器从本地C盘加载以前下载的页面，而无需从Internet下载它们。
服务器配置启用 gzip 压缩。 压缩可以减少 90% 的传输响应时间，从而减少页面首次渲染所需的时间。
服务器配置启用 Keep-Alive，以便 TCP 连接可以传输或接收多个 HTTP 请求。 这会降低后续请求的信噪比。
使用专用服务器提供服务以提高响应信噪比。 当你的服务处于共享环境时，一台服务器上通常运行着成百上千个服务，而你的服务只是其中之一。 如果其中一项服务恰好有非常大的流量，就会减慢您网页的加载速度。
美丽的图形设计
为您的优惠券代码设计一个漂亮的封面。 这本身并不困难，但它会对转化率产生巨大影响。
为您的主页或销售页面设计个性化插图。 为您的网站设计一些独特的插图将使浏览者更容易留下深刻的印象。
为您的博客设计一个独特的图像或一系列图像。 在 Facebook 和 Twitter 等社交网站上传播此类图片。 当用户听到这些图片时，他们可以立即想到您写的博客。
为您自己和您的团队成员设计个人头像或动漫头像。 相比每次有新会员加入时聘请专业摄影师拍照，设计一个动漫头像要划算得多。 据悉，这是送给新会员的一份好礼物。
以图表的形式显示数据或其他单独的内容将比简单地使用文本吸引更多的流量。 人们喜欢在 Pintrest 等网站上分享图形，或者通过自己网站上的反向链接重新发布您的内容。
如果您要在网站上发布一些视频，那么您应该为这些视频添加介绍，因为这会给其他人更专业的感觉。 更好的是，添加一些相关视频或动漫，让您的视频脱颖而出。
网站安全
使用 SSL 证书允许浏览器和服务器之间建立安全连接。 如果您允许使用信用卡，那么您应该使用 SSL 证书，因为大多数支付软件都有此要求。 据悉，谷歌还表示，使用SSL证书将有助于网站的搜索排名。
随时更新软件和插件。 当 WordPress 或其他 CMS 软件发布更新时，它们通常旨在修复危险的错误。 如果您不更新，您的网站受到攻击只是时间问题。
设置双重身份验证管理员登录。 大多数黑客攻击都是从登录屏幕开始的。
检查并消除恶意软件。 如果您的网站以前被黑客攻击过，黑客可能会在服务器上放置一些不易检测到的损坏文件。 如果您不及时删除这些文件，Google 很可能会将您的网站列入黑名单并提高您网站的排名。 当用户访问您的网站时，它会警告用户，提醒他们不要访问。
切勿将管理员用户名设置为 admin。 删除默认管理员帐户并使用不同的管理员用户名创建一个新帐户。
定期备份您的数据库和网站文件。 大多数备份软件只会备份您的数据库，实际上只是您的数据和内容。 如果您的网站文件丢失，那么您需要使用备份文件来恢复它们。
网站内容
设计自己的404错误页面，只有当用户访问不存在的网页时才会显示。 使用 404 页面将用户带回主页或帮助他们找到所需的内容。
不仅是主页，“关于我们”页面似乎是访问量最大的页面。 确保您和您的公司在此页面上得到正确的体现。
除了帮助这些潜在客户与您联系之外，“联系我们”页面还可用于在您、客户和 Google 之间建立信任。 当 Google 确定网页排名时，搜索引擎会在“联系我们”页面上查找电子邮件地址、电话号码和地址。 详细的联系信息会让谷歌认为该网站更可靠。
将注册表放在网站的各个页面上似乎是个好主意。 但是，最好使用空的注册屏幕，这样转化率会更高。 当您希望用户订阅时，只需将他们直接链接到此界面即可。
当用户订阅您的内容时，请记住将他们返回到确认页面，要求他们确认他们的电子邮件地址。 如果他们没有正确确认，他们可能会完全忘记它，再也不会回去。
用户单击确认电子邮件中的确认链接后，您应该向他们发送感谢页面并告诉他们下一步可以做什么。 每个订阅者都会收到一次感谢页面，因此这是一个给他们折扣或鼓励他们订购产品的好机会。
您的网站应该有一个登陆页面模板，以便您可以在需要时直接使用它。
如果您在网上销售商品，请确保您的销售界面看起来很棒。 从标题开始并将其保留为字符宽度。 您还可以添加一些销售视频。 记得在页面顶部引导顾客购买。
社交媒体
控制博客和网页上社交平台共享击键的数量。 由于每次击键都会运行一个脚本，因此这将额外减少页面加载时间。 仅包含那些经常共享内容的社交网站的共享按钮，例如 Facebook、Twitter、LinkedIn、Pinterest、Google+ 等。
为您的社交页面（例如 Facebook 主页、Twitter 帐户、Youtube 频道等）创建图像。个性化图形给观看者留下积极的印象，并使首次访问者更有可能关注和订阅您的页面或频道。
启用 FacebookOpenGraphMETA 标签以确保您的内容在 Facebook 上正确共享。 使用 FacebookDebugger 检查您的主页、博客或网页在 Facebook 上共享时的显示方式。
共享网站 URL 时，启用 TwiiterCards 手动显示丰富的图形。 您可以参考 TwitterCards 入门。
您可以启用 Google+ 片段来设置当您的网站共享到 Google+ 时人们听到的内容。 使用Snippet手册生成相关代码。 即使您的网站没有很多 Google+ 点赞，如果您正确添加元数据，Google+ 也会明白它们的重要性。
隐藏页面上链接到社交媒体配置文件的按钮。 缩小图标或仅在页码上显示它们。 在社交媒体上销售的目的是让客户回到您的网站，而不是相反。
译者：杨海翔
发表评论