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

如何避免简单的响应性错误(图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月14日 SEO操作
    03
  • 「湖州seo」人工优化和软件优化区别。

    今天湖州seo在这里和大家一起来说说关于人工优化和软件优化区别,网站优化主要有两种方式:人工优化和软件优化,相比起来,软件优化比人工优化智能。标题中可以出现很多关键词,而人工优化在标题和关键词设置上有很…

    2022年8月23日
    088
  • 网站改版该怎么做好SEO优化

    网站优化在工作中可能会出现一些意外,比如网站被攻击,网站数据错误,网站程序乱码等,网站改版、网站更换域名等问题,导致网站要做一些大的调整。更换域名网站的URl也会变动,如果链接没有处理好,还会造成大量的…

    2022年5月21日
    0213
  • 掌握用户体验的核心价值,合理做好网站优化布局。

    SEO网站布局决定了网站的整体的效果,尤其是在网站网页的布局上会更加的重要,如果网站的网页布局打造的不是很好,那么这个网站即将在下一次的排名中名落深山,也是现代有实力网站关注的内容,对于SEO网站布局是真…

    2023年2月14日
    00
  • 通过网站日志分析可以帮助SEO站长了解网站优化情况。

    在进行搜索引擎优化时,我们需要经常分析网站日志。网站日志的分析和诊断就像在网站上看医生一样。通过对网站日志的分析,我们可以更清楚地了解网站的健康状况,这有助于我们更好地做网站的SEO优化。今天,SEO外包…

    2022年9月2日
    092
  • 做网络营销的,这些常用工具怎么能不知道。

    工欲善其事,必先利其器!尤其是我们做网络营销的,更得对各式的营销工具有所了解,这样我们才能出其不意,出兵必胜!那么到底有哪些高效的营销工具呢?今天我们的网络营销培训就分享给大家: 一、创意写作神器 创意一…

    2023年2月14日 SEO操作
    03
  • 新站上线需要做哪些布局需要做哪些工作。

    网站优化的新站上线后应该怎么做?新站上线后如何做才能提升排名,才能实现网站盈利,使用那些方法可以让我们的网站发挥作用,实现企业营销利益最大化!作为seo优化人员,你首先需要设置标题,描述等,提交百度链接等…

    2022年8月24日
    098
  • 企业需要做网络推广吗?如何做网络推广。

    现在的时代是网络时代,网民数量呈直线增长的趋势,人们的消费领域越来越从线下走向线上,企业的营销模式自然会随着消费市场的变化而变化。然而,由于缺乏网络推广意识,很多企业在网络推广上投入了大量资源,却屡…

    2023年2月19日
    01

联系我们

QQ:951076433

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