当我们设计网站并计划如何显示这些网站的内容时,我们经常会考虑到理想的情况。标题和文本区域被设想为具有一定长度,而伴随该文本的图像被设计为以允许它们在整体设计中按预期工作的尺寸显示。即使这些元素在响应式网站构建(它们应该是)中具有一定的流动性,但它们的灵活性也会受到限制。
如果您在CMS(内容管理系统)上部署网站并允许客户端管理该网站并随着时间的推移添加新内容,那么您设计的限制绝对会受到测试。相信您的客户会找到改变您从未梦想过的网站的方法。如果您没有考虑到在您的设计过程中使用过的理想情况之外的情况,那么该网站的布局可能会受到严重威胁。这就是为什么在启动该网站之前对所有网站内容和网站布局的各个方面进行压力测试尤为重要的原因。以下是有关如何执行此操作的一些提示。
测试图像大小
毫无疑问,人们打破网站布局的最常见方式是添加尺寸不合适的图像(这也是他们对网站整体性能产生负面影响并导致下载速度慢的方式)。这包括太大的图片,以及太小而无法在您的网站中使用的图片。
即使您使用CSS强制布局中的这些图像的大小,与该站点的原始规格严重超出规模的图像也会导致问题。如果图像的尺寸不正确,您的CSS可能会强制使用适当的宽度和高度显示图像,但图像本身及其纵横比可能会失真。这肯定会对您网站的外观产生负面影响,因为太小的图像会“被炸毁”并且会失去质量。使用CSS缩小的图像太大,看起来很好并且保持其质量,但文件大小对于它的使用方式来说可能是不合理的。
在测试您的网站工作时,请务必添加超出预期范围的图像。添加CSS和响应式图像技术,通过调整图像大小来解决这些挑战,或者在不正确的宽高比的情况下,还考虑使用类似CSS剪辑属性的东西来根据需要裁剪图像。
测试其他媒体
除了图像,还可以测试网站上的其他媒体,例如视频,并使用不同的大小和宽高比值查看这些元素在布局中的显示方式。再一次,请考虑您网站的响应特性以及它如何适用于不同的设备和屏幕尺寸。
测试文本标题
在图像之后,导致非网络专业人员管理的实时网站问题最多的下一个网站区域是文本标题。这些是(据称)短文本行,通常会启动页面内容或该页面上的部分。本段上面的文字“测试文本标题”就是一个例子。
如果您设计了一个网站来容纳这样的标题:
“测试文字标题”
但是您的客户使用CMS添加一个文章,其标题如下:
“在各种网页上测试文本标题,所有网页都有不同的大小要求和用户需求”
然后您的布局可能无法干净地容纳所有额外的文本。就像你应该通过添加远远超出最初设计尺寸的条目来对图像和媒体进行压力测试,所以你应该使用文本标题来确保它足够灵活,以便有效地显示甚至超长的线条,如一个在上面。
测试文本长度
坚持文本主题,您还需要测试页面上主要内容的不同文本长度。这包括非常非常长的文本以及非常非常短的文本 - 这实际上可能是导致许多页面布局失败的问题。
因为网页本身的大小会增加以适应它们包含的文本的高度,所以具有大量文本的页面通常只会根据需要进行高度缩放。除非你限制了页面的高度(你 不应该 如果您希望页面具有灵活性,那么额外的文本不会造成问题。文本太少是另一个问题 - 许多设计师在设计过程中忘记测试它。
文本太少会使页面看起来不完整甚至破碎,因此请务必缩小页面内容以查看这些实例中发生的情况,并对网站的CSS进行必要的调整以处理这些情况。
测试页面缩放
有视力问题的人可能正在使用网络浏览器的页面缩放功能来增加网页的大小。如果有人放大了,你的布局可能会崩溃。这是您可能希望将EM用作网站字体大小和媒体查询的度量单位的原因之一。由于EM是一个相对的度量单位(基于该浏览器的默认文本大小),因此它们更有利于流畅,灵活的网站布局。
测试您的网站页面缩放,不要只停留在一个或两个缩放级别。在各种级别上下放大您的网站,以确保您的网页按预期做出反应。
不要忘记下载速度和性能
在测试客户决策的布局影响时,不要忘记也要注意这些决策对网站性能的影响。这些客户端将添加的图像和内容可能会妨碍网站的下载速度,并严重破坏网站的整体可用性。计划这些添加的影响,并在开发过程中尽自己的一份力量,以尽量减少这些影响。
如果您的网站是使用性能预算构建的,请与您的客户共享此信息,并向他们展示如何针对性能指标测试网页。向他们解释维护这些已建立的页面大小和下载速度阈值的重要性,并向他们展示他们所做的添加如何影响整个网站。花点时间训练他们如何保持网站的正常运行。关于培训的主题……
客户培训至关重要
重要的是要对网站的图像,文本和其他页面元素进行压力测试,并创建能够解决极端情况的样式,但这绝不是客户培训的替代品。除了花时间训练客户如何有效地照顾和管理他们的网站之外,您的工作应该是对网站进行防护。最后,一个训练有素的客户,了解他们的责任以及他们在网站上做出的决策的影响,对于您保持网站正常运行并展现最佳状态的努力将是非常宝贵的。