UI.

5个简单的响应式漏洞(以及如何避免它们)

josipmlinarić. 经过 josipmlinarić.  |  2月28日,2020年

几乎 所有Web流量的49% 全球源自移动设备(不包括平板电脑)。如果您没有设计移动友好的网站,您可能会失去此大量目标受众。此外,如果您想改进您的SEO,您不能忽视智能手机;谷歌优先考虑手机 移动式索引.

所有这些都可以通过您的网站的元素根据屏幕尺寸进行调整的响应式网页设计。在创建响应设计时,您可能最终会产生一些常见的错误。为了帮助您避开它们,我们将一些可能的敏感设计陷阱及其解决方案组合在一起。

 

1.使用设备大小作为断点

根据OpenSignal,还有 24,000个不同的Android设备 2015年;这个数字在过去五年中增加了。由于有这么多品种设备,屏幕尺寸也很大。为确保您的网站在所有设备上提供无缝的浏览体验,您需要获得您的断点。 

如果您专注于响应设计中的设备大小断点,您的网站可能无法在较新设备上正确显示。不要将自己限制在当前设备的断点的尺寸。相反,可以获得可以在任何屏幕尺寸上调整良好的真正响应的设计。 

如果您专注于响应式设计中的设备大小断点,您的网站可能无法正确显示在较新设备上

一个好主意是占用移动第一方法,您可以为最小的屏幕构建您的网站,然后慢慢将其缩放到更大的屏幕尺寸。如果可穿戴设备对您的网站很重要,则应开始使用这些设备。 

在您正在扩展时,您的网站设计可能会感到紧张。在这种情况下,您可以将媒体查询添加到其中以进行必要的更改。这将有助于您的设计在每一步都仍然舒适。在达到最大的屏幕尺寸之前,您需要继续此过程。理想情况下,这将是高达2800像素,因为大多数用户的分辨率低于此。 

使用此方法,只有在需要时才会引入您的断点,而不是根据设备大小。这可以帮助您对所有设备的访客提供无缝的浏览体验。您可以使用工具 lambdaTest. 或者 browserstack. 检查您的网站是否符合新设备。

 

2.不考虑文件大小

可视元素可以使您的网站对用户更具吸引力。但是,当您将它们添加到您的网站时,您必须小心。它们通常大于文本文件,可以减慢页面加载速度。随着页面加载时间增加,您的反弹率也是如此。事实上,根据Akamai的说法,反弹率 increased by 6% 在2017年假期在2017年期间加载了1.5秒的时候。 

因此有必要优化您的图像和视频以减少其尺寸。你可以使用像这样的工具 Tinypng. or  压缩JPEG. 为了达成这个。如果您是WordPress用户,则可以安装 Smush 插件可以为您完成此工作。 

缩小CSS,HTML和JavaScript文件也可以提供帮助。您还应该考虑浏览器缓存,这可以增加页面加载速度的返回访客。最后,删除所有不必要的第三方工具和JavaScript依赖项。要检查当前页面加载速度并找到可能的解决方案,可以使用 谷歌 Pagespeed见解。你也可以使用 移动网站速度工具 从谷歌查看您的网站在手机上的加载程度。

 

3.不使用自适应图像管理

虽然图像的文件大小很重要,但其尺寸也很重要。您可能不担心在传统网站设计中使用不同维度的图像。但是,在恢复性设计方面,遗失在图像管理中可能是您​​的用户体验的灾难性。最后一件事你希望你的访客看到的是一个小屏幕上的巨大图像。

为避免这种陷阱,您应该使用自适应图像管理技术。您可以参加以下方法来实现这一目标:

  • 基于分辨率的选择:提供具有不同分辨率的相同图像;
  • 基于设备 - 像素 - 比率的选择:使图像显示在屏幕尺寸的基础上显得清晰,减少可感知的伪像;
  • 基于视口的选择:基于所使用的设备及其方向的不同图像;
  • 艺术方向:根据显示屏更改或裁剪图像以改善其观看体验。

 

4.隐藏内容

在图像管理中错过了可能是您的用户体验的灾难性

您可以在创建网站的响应设计时可以制作的最大错误之一是隐藏内容。您可能会在较小的屏幕上拟合您的网站或增加页面加载速度。但是,您必须以所有成本避免它。请记住,人们不会来到您的网站只是为了寻找一个小样本。他们希望他们在桌面上相同的浏览体验。

您的目标应该是为他们提供此全部的经验。这是必要的,因为其中许多人可能会在一天内从多个设备访问您的网站。这就是为什么你必须确保在响应设计中保持内容的一致性。当然,您可以通过设备跨设备不同地优先顺序内容 渐进式增强.

 

5.保持一致的导航

对所有设备的访问者提供一致的浏览体验至关重要。但是,绝对一致性也不好。您可以在尝试这样做的同时提交的最大错误之一是在所有屏幕大小上保持一致的导航。 

当屏幕尺寸减少时,一致的导航栏可能最终占用一半屏幕,可能完全破坏浏览体验。您应该考虑通过屏幕尺寸缩小导航,并可以将其更改为汉堡菜单。

 随着导航,按钮尺寸和视觉布局也不应保持一致。但是,字体,链接和颜色处理应保持一致。 

 

最后的想法

如果您希望达到整个目标受众,您无法避免响应性设计。但是,您必须在实现它的同时小心并避免所有可能的错误。为访问者提供一致的所有设备的浏览体验,并不隐藏其中的任何信息。优化文件大小以提高页面加载速度。此外,使用自适应图像管理技术根据屏幕尺寸减少或增加图像尺寸。 

不要将导航保持一致,因为它可能会破坏浏览体验。同样的规则也适用于按钮和视觉布局。最后,为了真正的响应设计,并不限制自己根据当前设备设计断点。当您设计网站时,关键是移动 - 首先。

 

特色图像 通过拆卸.