为什么响应式(自适应)网站是一个坑

2021-12-07 08:43:51
摘要:什么是自适应网站?其实自适应更专业的说法是响应式网站。在2010年5月,Ethan Marcotte提出的响应式网站的概念,通俗的说,就是一个网站可以兼容不同的终端,不用为每个分辨率设备做一个特定的版本的网站。近年来,各种大屏幕移动设备的普及,响应式网站也受到了更多人的青睐。

什么是自适应网站?其实自适应更专业的说法是响应式网站。在2010年5月,Ethan Marcotte提出的响应式网站的概念,通俗的说,就是一个网站可以兼容不同的终端,不用为每个分辨率设备做一个特定的版本的网站。近年来,各种大屏幕移动设备的普及,响应式网站也受到了更多人的青睐。甚至大多数的人认为,响应式网站是实现友好移动目标,更好、更快、更省的方案。


但事实又是否这样呢?对热衷响应式或自适应的人,不难想象:网站适应了移动设备的显示,界面也非常美观,你可能觉得一切都很好,网站也实现了友好移动的目标。然而不要开心得太早,数据表明:这种响应式设计,会令你的用户和经济效益流失30-50%。


想知道真相是什么?因为自适应和响应式根本就是一个坑!响应式网站有几个致命缺点:



1.响应式设计仅是改善移动体验并没达到最优化。


不管是自适应设计,还是响应式设计,它们的基本原则是:尽可能不要因为设备不同而导致显示不同的内容(比如在低分辩率的终端上会删减某些内容)。试想,显示在电脑1440x900分辨率屏幕上的内容,要在手机的320x240分辨率屏幕上显示,你会发现,可视区域变小,内容都挤一起,页面拉长,排版顺序错乱,使用困难度增加等等。所以自适应和响应式设计,都是选择性把内容隐藏,以适应小页面,减少上述的问题出现。但这样一来,页面的表现效果就没那么理想了,交互体验也达不到移动端的最优,把控不好网站就会给用户不伦不类的感觉。


某响应式网站在移动端上的显示缺陷(右侧为移动版)


例如上面的响应式网站,右边移动端明显将在左边电脑端有展示的产品都隐藏了,这对从电脑端切换到移动端的用户是很不友好的。而且移动端的交互设计也不是我们熟悉的。还有很明显的一点是,同一个网站风格差异却如此大,感觉就是两个网站。如果是单独设计的移动网站,它就能避免像上面响应式网站那种显示上的突兀,例如下面的一些电脑端和移动端网站的对比:




腾讯网的电脑版和移动版对比


天猫商城的电脑版和移动版对比


360官网的电脑版和移动版对比



从上面腾讯、天猫、360等它们的做法看到:个性化的宫格布局,流行的移动端界面,合理地显示网站信息。显然这些才是我们所熟悉的移动端表现,交互上更贴近APP的UI风格,更好的用户体验。为什么他们能把网站在移动端的表现处理得如此好?因为他们都是专门做了一个移动版的网站,并没有采用自适应设计,因此,网站的设计没有受到自适应方案的限制。


2.响应式设计并不利于百度的关键词优化和排名。


因为用户在不同终端的搜索习惯不同,所以百度对移动网站和电脑网站的关键词处理策略也不相同。而对于响应式的方案,不同终端访问到的网页代码是一样的,这样就不能在电脑端和移动端设置不同的关键词。这无疑是给百度关键词优化增添了大大的阻碍。


另外,百度的搜索排名也是有移动端和电脑端之分的。针对这方面,更适合使用独立的移动端网站专门做移动端的百度排名,这样不会影响电脑端的百度排名,两个版本的网站百度优化也可以独立进行。


所以,如果你的网站需要进行商业推广的话,那还是独立做一个移动版网站更好,而不是使用响应式网站。


3.响应式网站无法区分移动端,浪费带宽,加载耗时长。


响应式(自适应)设计的实现方式,往往是缩小或者隐藏电脑版网站的内容,使之适应移动端的窄屏。但隐藏的内容依然会加载,低分辨率设备会加载高质量的图片或者视频,不分屏幕尺寸都提供相同大小的网页。这样的话,响应式网站加载的内容相比非响应式网站会增加20-50%。加载内容多,速度慢,浪费流量。在国内高流量费面前,用户是想都不用想就会放弃使用你的网站的。


响应式网站相对非响应式网站的加载耗时,一般都会延长1-2秒,在2G、3G网络情况下更严重。而Google统计的数据是加载时间每延长0.4秒就会有0.59%的用户流失,电商类代表亚马逊则表示每延长0.1秒就会有1%的用户流失,资讯门户类的雅虎则是每延长0.4秒就会流失5-9%的用户。所以你的响应式网站每天流失了多少用户,你可以对号入座算一算。


4.响应式对于ie6,7,8浏览器简直是悲剧。


响应式或者自适应方案里,运用了很多html5新特性,而这些新特性只有高级的现代浏览器才支持,而在ie6,7,8来说几乎是看不了的,甚至在ie9,10的表现也只是差强人意。从cnzz数据中心统计的国内浏览器使用率来看,ie占比高达36.29%。请问你能承受36.29%的用户流失吗?



响应式网站在IE上体验或将失去36.29%的用户


现在你是否已经察觉,不管是淘宝、天猫、京东、唯品会,还是腾讯、百度、新浪、360为什么都不用响应式了吧?我们丝毫不会怀疑:响应式或自适应仅仅是一个坑。而正确的做法是分开建设电脑端和移动端网站。专门建设一个移动版的网站才是可行的法则,这样才能更灵活,提供更专业、更优的移动体验和个性化、多样化的设计。


我们可能会疑问为什么市场上响应式网站会那么火?真相是,响应式或自适应设计,仅是是设计师的主观决定,他们认为电脑网站界面不再适用移动网站界面,然后非作出相应的改变不可。甚至存在更可笑的情况,程序员为了卖弄技术而使用响应式,建站公司为了显得更高大上多骗点钱而抛出响应式等等。响应式的运用在很多情况下都是没必要的,也没什么值得大家去追棒。


所以我们的建议就是:最好为你的电脑网站推出移动版本,将关注重点要放在网站信息展示、网站性能、用户体验、经济效益、用户留存等关键点上。


这里或许还有一件事,可能你并不知道,响应式之父Ethan Marcotte还说过,“最重要的是,响应式网页设计的初衷不是要取代移动网页”。


小程序二维码

查看演示

微信公众号二维码

关注微信公众号

你觉得这篇文章怎么样?

96 0

我们立足于合肥面向安徽乃至全国全球市场,我们拥有一支经验丰富、创意独到、团结协作的专业技术团队。我们立志把最好的技术通过最有效、最简单的方式提供给客户,为客户提供最佳的解决方案,我们将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,帮助客户在新经济时代下,把握商机和发展空间,并获得绝对的竞争力!我们专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商!

扫描二维码与小二CMS创始人沟通

7*24小时为您服务

小二CMS专注于高端网站定制、系统开发、商城开发、外贸网站建设、公众号开发、小程序开发、网站优化推广、安全运维等技术领域。是高端定制网站领域著名服务商!

本文标题:为什么响应式(自适应)网站是一个坑
免责声明:文章《为什么响应式(自适应)网站是一个坑》来至网络,文章表达观点不代表本站观点,文章版权属于原作者所有,若有侵权,请联系本站站长处理!
—— 小二CMS创始人微信 ——
关于我们

小二CMS​ 专注高端网站建设及定制,同时深耕微信小程序开发、移动端开发,拥有丰富的企业建站与多终端项目经验。多年来成功交付众多案例——包括企业品牌官网、营销型网站、B2C商城系统、行业门户网站,以及高性能微信小程序、跨平台移动端应用等。我们提供从策划、设计、开发、部署到安全的一站式专业解决方案,覆盖网站、小程序与移动端全终端,确保项目高效落地与优质体验。小二CMS持续研发国内领先、功能强大、扩展灵活的高端行业通用网站+小程序+移动端系统,不止于技术实现,更以全终端数字化能力成就客户的商业成功。

我们的优势

十二载专注高端网站建设
服务上千企业积淀厚口碑
资深策划洞悉行业与用户
前沿设计研发彰显硬实力
前端代码深融契合好优化
千家案例实证品质可信赖
精英团队高效协同创精品
多重防护保障数据与运行
贴心服务换位洞察客所需

独家源码出售握牢自主权
完备项目管理保稳提效能
完善售后体系全程护无忧
深厚运营经验赋能快发展
时刻研发领新技术占先机
跨端适配畅行多屏与场景
持续迭代快速响应新需求
严控品质每环节臻于至善
架构灵活便二次开发拓展

我们的不同

我们是一支年轻而充满激情的团队,痴迷代码,沉醉设计,坚信设计与编程不仅是工作,更是生活的信仰——“非设计,不生活;无兄弟,不编程!”年轻,却不失深厚积淀。团队成员来自国内外顶尖设计公司与软件企业,精通网站设计与开发,已成功交付数百个项目,涵盖品牌官网、电商平台、小程序及移动端应用。我们坚持以用心服务立身,用实力赢得信赖。使命:以技术之力,助力改变命运。宗旨:客户第一,品质至上。信念:客户的成功,才是我们真正的成功。

不忘初心,方得始终
中高端网站定制开发服务商
与我们取得联系

好作品自己会说话,

我们敬畏您给予的点滴信任 !

期待携手合作,请立即咨询我们:
QQ咨询
微信咨询
我们用心,期待您成为我们的客户
联系QQ客服

QQ扫码联系客服

联系微信客服

微信扫码联系客服

微信号:
添加微信好友, 详细咨询相关信息。

复制并跳转微信
19810950281