你有一个“响应网站”吗?这是一个网站,其布局会根据访问者的设备和屏幕大小而变化。响应式网页设计现在是行业最佳实践。它是Google推荐的,可以通过网络在数百万个网站上找到。然而,在一个简单地“适应”不同屏幕尺寸的网站和一个真正响应的网站之间存在很大的差异。
我经常看到公司重新设计他们的网站并推出新闻稿,颂扬他们新的移动设备友好设计的优点。当我访问这些网站时,我经常发现的是一种确实可以缩放和更改以适应不同屏幕的布局,但这就是他们采用响应性的想法。这还不够。一个真正响应的网站不仅可以缩放以适应更小或更大的屏幕。在这些网站上,您还会发现以下重要特征。
1.优化的性能
没有人喜欢等待网站加载,当有人使用的移动设备连接可能不太理想时,需要快速加载网站更为重要。
那么如何优化网站的性能呢?如果您作为重新设计的一部分开始使用新网站,那么您应该将创建性能预算作为该项目的一部分。如果您正在使用现有网站并且不是从头开始,那么第一步是测试您网站的性能,以了解您今天所处的位置。
一旦您获得了站点在性能方面的基准,您就可以开始进行必要的改进以提高下载速度。一个很好的起点可能是您网站的图片。太大的图像是缓慢加载网站的罪魁祸首,因此优化图像以进行网络传输可以从性能角度真正帮助您的网站。
现实情况是,改善网站性能和快速下载速度是所有访问者都会欣赏的好处。毕竟,没有人抱怨网站加载“太快”,但如果一个网站加载太长时间,它绝对会让人们离开,无论它是否响应“适合”他们的屏幕。
2.智能内容层次结构
当一个网站在大屏幕上显示时,由于可用的屏幕空间很大,您可以通过各种方式放置内容。您通常可以同时在屏幕上显示重要的消息和图像,新闻更新,活动信息和网站导航。这允许访问者轻松快速地扫描整个页面的内容并确定对他们重要的内容。
当您采用该网站设计并将其转换为小屏幕设备(如手机)时,此方案会发生巨大变化。突然之间,你正在使用之前的屏幕空间的一小部分。这意味着您需要决定首先出现在网站上的内容,跟随它的内容等等。而不是一次看到所有内容,您可能只有空间来显示一两件事(其中一件可能是导航)。这意味着需要进行层次结构决策。不幸的是,通常决定屏幕上第一个是什么,然后是第二个等等的是页面本身编码的方式。在构建响应式网站时,最简单的方法是首先在屏幕上显示代码中的第一个内容,然后是代码中的第二个项目,依此类推。不幸的是,在一台设备上最重要的可能并不像另一台设备那样重要。一个真正响应的网站理解内容的层次结构应该根据不同的情况而改变,并且它应该明智地显示它在哪里显示。
CSS布局技术的改进,包括CSS网格布局,Flexbox等,允许网页设计人员和开发人员在智能布局内容时有更多选择,而不是被HTML代码中内容区域的确切顺序所束缚。随着设备环境以及我们网站用户的需求不断发展,利用这些新的布局技术将变得更加重要。
3.考虑设备优势和劣势的经验
坚持设备主题 - 有人可以用来访问您网站的每个设备都有该平台固有的优点和缺点。一个出色的响应式站点了解不同设备的功能和限制,并使用它们创建最适合访问者当时可能使用的任何设备的自定义体验。
例如,手机包含许多您在传统台式计算机中找不到的功能。 GPS是以移动为中心的功能的一个示例(是的,您也可以在桌面上获取一般位置信息,但设备GPS更加准确)。您的网站可能会使用GPS信息巧妙地向一个人发送非常详细和具体的分步指导信息或特殊优惠,具体取决于他们当时的确切位置。
实践中这个原理的另一个例子是一个了解您正在使用什么类型的屏幕显示的网站,并发送最适合该显示的图像。如果您的屏幕具有高像素密度,则可以决定将更高质量的图像发送到该屏幕。然而,这些相同的图像在功能较弱的屏幕上毫无意义,并且在没有实际原因的情况下下载额外文件大小时会损失额外的质量。
非常好的响应式网站会考虑整个用户体验,并且不仅可以根据设备类型或屏幕大小来定制体验,还可以根据硬件的其他重要方面来定制体验。
4.内容与上下文
最初,响应式网页设计因其网站布局响应不同屏幕尺寸的想法而得名,但您可以响应的不仅仅是屏幕尺寸。在前面使用设备的优点和缺点的示例的基础上,您可以使用这些以及日期和时间等其他数据来真正定制网站体验。
想象一个大型贸易展览活动的网站。响应式网站将更改网站页面的布局以使用不同的屏幕进行缩放,您还可以使用日期来确定哪些内容最重要。如果是事件发生前的一段时间,您可能需要突出显示注册信息。但是,如果事件实际发生在那一刻,则注册可能不是最重要的内容。相反,您可以决定当天的事件安排更为关键,因为它与该用户的直接需求更相关。
更进一步,您可以使用设备的GPS来确定它们在贸易展览会上的实际位置。您可以根据他们的位置为他们提供互动内容,向他们展示附近的展位或即将开始的会议。
5.可访问性
我们将看一个网站如何真正响应访问者需求的最后一个例子是考虑网站的可访问性。网站应该能够被尽可能多的人使用,包括那些残疾人。您的网站应该能够被需要屏幕阅读器或其他辅助软件的人用来访问其内容。通过这种方式,您的网站可以满足他们的需求,因为您已经确保体验虽然对于残障访问者来说是不同的,但仍然是合适的。
通过响应尽可能多的数据点,而不仅仅是屏幕大小,网站可以不仅仅是“移动友好”。它可以成为一种真正的响应式体验,无论在哪种意义上。