如何避免简单的响应性错误。

如何避免简单的响应性错误(图1)

全球近49%的网络流量来自移动设备(不包括平板电脑)。如果你不设计适合移动设备的网站,你可能会失去大量的目标用户。此外,如果你希望提高你的搜索引擎优化,你不能忽视智能手机;百度优先使用移动优先索引。

所有这些都需要响应式的网页设计,通过这种设计,您的网站的元素可以根据屏幕尺寸进行调整。在创建响应式设计时,您可能会犯一些常见的错误。为了帮助您避免这些问题,我们在下面列出了一些可能的响应式设计陷阱及其解决方案。

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

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

如果您在响应式设计中只关注设备大小的断点,则您的网站可能无法在新设备上正确显示。不要将自己限制在当前断点设备的维度上。相反,选择真正的响应式设计,可以在任何大小的屏幕上调整。

一个很好的想法是采用移动优先的方法,即您为最小的屏幕构建网站,然后慢慢地将其扩展到更大的屏幕。如果可穿戴设备对你的网站很重要,你应该从这些设备开始设计。

随着规模的扩大,您的网站设计可能会开始感到紧张。在这种情况下,可以向其中添加媒体查询,以便进行必要的更改。这将帮助你的设计在每一步都保持舒适。你需要继续这个过程,直到你达到最大的屏幕尺寸。理想情况下,这将是2800像素,因为大多数用户的分辨率低于这个。

使用这种方法,您的断点只在需要时才会被引入,而不是根据设备大小。这可以帮助你提供一个无缝的浏览体验,你的访客跨所有设备。你可以使用LambdaTest或BrowserStack等工具来检查你的网站在新设备上的表现是否良好。

2、不考虑文件大小

视觉元素可以让你的网站对用户更有吸引力,然而,你必须小心当你添加到你的网站。它们通常比文本文件大,会降低页面加载速度。随着页面加载时间的增加,跳出率也会增加。事实上,Akamai表示,在2017年的假期期间,网页加载时间增加了1.5秒,而回弹率增加了6%。

因此,有必要优化您的图像和视频,以减少其大小。您可以使用TinyPNG或压缩JPEG等工具来实现这一点。如果你是WordPress用户,你可以安装Smush插件来完成这项工作。

缩小CSS、Html和Javascript文件也会有所帮助。您还应该考虑浏览器缓存,它可以提高返回访问者的页面加载速度。最后,删除所有不必要的第三方工具和JavaScript依赖。要检查当前页面加载速度并找到可能的解决方案,可以使用百度PageSpeed Insights。你也可以使用百度的移动网站速度工具来查看你的网站在移动设备上的加载速度。

3、没有使用自适应图像管理

虽然图像的文件大小很重要,但它的尺寸也很重要。你可能不用担心在传统的网站设计中使用不同尺寸的图像。然而,当涉及到响应式设计时,错过图像管理可能会给您的用户体验带来灾难性的后果。你最不希望你的访客看到的是在小屏幕上显示的巨大图像。

为了避免这个陷阱,您应该使用自适应图像管理技术。你可以采取以下方法来实现这一点:

基于分辨率的选择:提供具有不同分辨率的相同图像;

基于设备像素比率的选择:使图像看起来清晰,并根据屏幕大小减少可感知的人为影响;

基于视图的选择:根据使用的设备及其方向改变图像;

艺术指导:根据显示改变或裁剪图像,以改善其观看体验。

4、隐藏的内容

在创建响应式网站设计时,您可能犯的最大错误之一是隐藏内容。您可以这样做,以适合您的网站在一个较小的屏幕或增加您的页面加载速度。然而,你必须不惜一切代价避免它。记住,人们访问你的网站不是为了寻找一个小的样本。他们想要和在台式机上一样的浏览体验。

你的目标应该是为他们提供这种全方位的体验。这是必要的,因为他们中的许多人可能在一天内从多个设备访问您的网站。这就是为什么您必须确保在响应式设计中保持内容的一致性。当然,您可以通过渐进增强在不同设备之间对内容进行不同的优先级排序。

5、保持一致的导航

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

当你的屏幕变小时,一个一致的导航条可能会占据一半的屏幕,并可能完全破坏浏览体验。您应该考虑使用屏幕大小缩小导航,并可以将其更改为一个汉堡包菜单。

除了导航之外,按钮大小和视觉布局也不应该保持一致。然而,字体、链接和颜色处理应该是一致的。

总结

如果你想接触到所有的目标受众,你就不能避免响应式设计。但是,在实现它时必须小心,避免所有可能的错误。让你的访客在所有设备上都有一致的浏览体验,不向他们隐藏任何信息。优化您的文件大小,以提高您的页面加载速度。此外,使用自适应图像管理技术来根据屏幕大小减少或增加图像尺寸。

不要让你的导航保持一致,因为它可能会破坏浏览体验。同样的规则也适用于按钮和视觉布局。最后,进行真正的响应式设计,不要局限于基于当前设备设计断点。当你在设计你的网站时,关键是要以移动为先。

本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/224530.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2023年2月21日 09:32
下一篇 2023年2月21日 09:32

相关推荐

  • 介绍主流的付费广告网络推广方式特点,针对不同推广方式对症下药解决转化率。

    快速效果,广告,这是许多企业所熟知的,想在短时间内通过网络吸引足够的流量,增加转化率,广告是快和有效的手段。有预算,但很多人不知道投放广告的渠道和方式。今天,我们将介绍主流的付费广告网络推广方法,...

    2023年2月17日
    04
  • 确保您的网站建设符合ADA规范。

    作为公司或非营利组织,重要的是要进行自我教育,并确保您的网站符合ADA规范,并可供所有网站用户(包括残障人士和视力障碍者)使用。在本指南中,我们介绍了尚未经过ADA优化的网站可能遇到的一些常见问题,以及我...

    2023年2月20日 SEO操作
    07
  • 哪家百度移动终端优化排名公司比较好。

    随着移动设备的发展,人们几乎拥有了一台智能机器。与此同时,移动设备上用户的搜索量也越来越大。现在移动端的用户流量已经远远超出PC端,企业在网站关键词排名上,不仅要考虑PC端,移动端的关键词排名也要引起...

    2023年3月1日
    01
  • alexa网站排名分析。

    一、不将排名十万以后的网站拿出来比 SEO优化中心 新站刚上线的时候,往往排名并不是很稳定,而ALEXA网站排名也不会很好,但是也有一些有排名的,这会让站长或者是某些企业老板感到沾沾自喜,实际上这些网站完美...

    2022年8月20日
    0135
  • BAT变成了百度面临出局,新格局的网络营销怎么做。

    BAT大家都知道,是指国内互联网三巨头,百度、阿里巴巴、腾讯。现在为什么BAT变成AT了?看看三家公司现在的市值你就明白了,阿里巴巴市值4486亿美元,腾讯市值3193亿美元,而百度市值839亿美元,显然BAT中的B掉队...

    2023年2月14日
    01
  • "智斗"网站首页排名突然消失。

    随着搜索引擎算法不断地调整,很多企业的网站排名或多或少都会受到一定的影响,甚至一些网站首页突然消失,这对企业网络营销的影响不言而喻,而针对这类型的网站问题,就要及时的解决,否则对网站排名的影响也就...

    2022年8月21日
    0104
  • wap网站排名经验总结分享。

    一、网页设计思路无论是 PC端还是手机端,我们所做的最后都是把网站的内容,以合理的排名,合理的界面呈现给那些浏览了网站的人们。所以,手机端的网页设计显得尤为重要。值得注意的优化技巧包括:减少使用 FLASH...

    2023年3月2日
    016
  • 为什么网络营销非常重要。

    作为企业主,您知道有数百种不同的营销渠道和策略来扩大您的业务。您也知道您的营销预算不是无限的,所以您必须选择您所选择的。但是随着消费者继续增加对互联网的依赖,作为一种研究和采购工具,您必须将其纳入...

    2022年8月23日
    0111

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息