现代网页设计最佳实践:功能性、图形图像与标题设计

在过去的十到二十年中,网站设计的发展速度如此之快,以至于很难跟上当前的趋势和最佳实践。不久之前,基于表(table)的网页设计被认为是最先进的,而CSS则是闻所未闻的。为了解决这个问题,有时几乎不可能找到关于“正确设计”最新信息。

为此,我们已经收集了100多种用于设计现代网站的最佳实践,涵盖了从CSS和编码到图像、图形和版式的所有内容。连同实践本身一起,您可以获取更多信息,以帮助您直观地了解我们在说什么。

功能性

创建自定义404页面

404页在网站设计的宏伟计划中经常被忽略,但是即使用户所寻找的内容不存在,它也可以是一种让用户留在您网站上的好方法。无论您是选择有趣,认真还是介于两者之间,都可以在用户进入404页面时向他们提供有用的信息,包括用于搜索其所需内容的链接以及指向您网站首页的链接。

确保在您的网站上包括搜索功能

除非您的网站非常非常小(一页或两页),否则请包含一个搜索框,以使用户可以更轻松地查找内容。确保搜索结果也以易于浏览的格式进行组织。

确保所有链接正常工作

这甚至不应该是我们必须提及的内容,但是请确保您的网站上没有任何损坏的链接。这既适用于内部链接,也适用于通向其他站点的链接。

测试您的表格

确保您的表单按照预期的方式工作。这包括正确提交,发送所有确认电子邮件,以及在成功提交和失败之后都发送正确的消息(您正在测试以查看不通过表单会发生什么情况,对吗?)。

确保元素在不同的浏览器中正常运行

Firefox中显示的内容可能与您在Google Chrome,Internet Explorer,Safari和/或Opera中的显示方式不同。有可用的在线实用程序,使您可以看到您的网站在不同的浏览器,这些浏览器的不同版本以及不同的操作系统中的显示方式。

图形和图像

优化您的ALT标签

Alt标签有两个作用。首先,如果您的图片由于某种原因而无法加载,那么它会让浏览您网页的任何人都知道该图片应该是什么。其次,由于搜索引擎无法读取图像,因此alt标签会告诉搜索蜘蛛该图像显示的内容,并且可以大大改善您的搜索结果。在每个图像上添加一个alt标签仅需花费一两秒钟的时间,其好处是值得的。

使用图像标题标签

标题(title)标签也可以对SEO产生积极影响。但更重要的是,如果您在网站上使用JavaScript,则标题标签可让您仅使用标题轻松调用对象。

查看每个图形或图像对整个网站的总体影响

图形和图像可以极大地改变您网站的外观以及用户对其意图的理解。确保您考虑到每个图形或图像如何改变网站的整体外观。这包括注意配色方案,图像内的负空间以及图像的实际内容。

注意文件大小和加载时间

确保优化了图像以快速加载。当然,同时不要将它们压缩到看起来失真或像素化的程度。

始终指定图像高度

没有什么比正在阅读某些东西然后在加载图像时页面突然跳下的过程更糟糕的了。如果指定图像的高度,则在页面加载时会自动为图像保留足够的空间,并防止那些烦人的页面跳转。

标题设计

将logo链接到主页

用户已经期望标题,尤其是标题中的logo将链接回到网站的主页。不要让您的工作有所不同(或什么都不做),以使他们感到失望或迷惑。

不要害怕大标题

大标题可以为您的网站增加很多视觉效果。只需记住标题将在屏幕上向下推其他内容的程度,以及这将对站点用户产生的影响。如果可能,请确保标题中包含一些内容,以便让新访客立即知道您的网站内容。

在标题中包含logo以外的内容

标头是向用户提供有关您网站的其他信息的好地方。无论是标语线、导航、搜索框还是下载内容或订阅RSS feed的图标,都不要忽略标题中添加内容的影响。

确保传达您想要的东西

您网站的标题实际上是新访客看到的第一件事,确保它引起了他们的注意,将他们引导到您希望他们去的地方,并给人留下了积极的第一印象。

注:本文翻译引用自国外