首页 > 评论 > 关键词  > 响应式网站最新资讯  > 正文

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

2016-01-06 17:34 · 稿源:站长之家用户

什么是自适应网站?其实自适应更专业的说法是响应式网站。在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还说过,“最重要的是,响应式网页设计的初衷不是要取代移动网页”。

举报

  • 相关推荐
  • 响应反诈号召,叠纸《恋与深空》发布新歌宣传反诈知识

    11月7日全民反诈日,叠纸游戏《恋与深空》与上海公安联动发布反诈歌曲《深空反诈学》,由五位男主演唱,通过Q版动画普及反诈知识。该曲发布后反响热烈,微博视频阅读量超30万,抖音点赞量破10万,相关话题登上小红书热搜。同时上海公安发布跟唱视频,推广“金护”App。作为用户超7000万的全民游戏,《恋与深空》长期参与公益科普,包括体育推广、海洋保护及女性健康宣传,并入选2025年国家文化出口重点项目。

  • 如何提高网站在AI摘要中的可见性?网站 GEO 优化应该这样做

    在AI驱动的搜索时代,Google的AI摘要成为用户获取信息的首选方式,但也带来零点击加剧、网页点击率下降等挑战。文章提出从内容、结构、技术、权威与监测五大维度系统优化网站AI可见性:内容上采用问答结构、列表格式和语义覆盖;技术上确保页面可抓取、加载快速;强化E-E-A-T权威信号;并借助专业工具持续监测优化。通过综合策略可显著提升网站在AI摘要中的曝光机会。

  • 赫力昂响应世界骨松日开启“全生命周期骨骼健康月”科普行动

    10月20日是世界骨质疏松日。我国50岁以上人群骨质疏松患病率达19.2%,低骨量人群超2亿,97.2%居民钙摄入不足。专家建议分三级预防:儿童青少年需足量钙摄入提升峰值骨量;40岁以上人群需补充钙和骨胶原,增强骨韧性;老年患者应积极治疗,合理补钙。呼吁全民建立全生命周期骨骼健康管理意识,通过科学检测与营养干预提升健康水平。

  • B站回应拉黑指定用户可屏蔽开屏广告:不实信息

    近日,“B站拉黑指定用户可屏蔽开屏广告”话题登上热搜。起因是网友发现B站疑似通过零等级、无头像的隐藏账号发布视频实现开屏广告投放,网上还流传一份“拉黑名单”。部分网友称实测有效,但经媒体实测发现该方法无效。B站官方回应称此说法为不实信息,提醒用户理性看待网络谣言,切勿相信和传播。

  • 小米YU7全网首拆上热搜 雷军回应:欢迎同行和专家指点

    易车原创节目11月5日发布小米YU7全网首拆视频,官方称对车辆进行了彻底拆解。视频迅速引发关注,小米CEO雷军回应表示认真看完并推荐车主观看,同时欢迎同行和专家指点。视频详细展示了车身结构、电池安全设计、智能驾驶系统等关键部件,易车称YU7在用料、结构、三电、NVH等方面均经得起考验。网友称赞视频制作用心,雷军也肯定其专业性。

  • 进博会雁阵效应:三星助力供应链共同发展

    中国三星作为产业链头部企业,发挥“头雁”引领作用,通过赋能核心供应商、协同升级、现场帮扶、优化流程等方式,带动供应链伙伴共同发展。例如帮助洁美科技实现从“买膜加工”到“一体化生产”的转型,助力江苏新安电器完成质量体系升级,并推动供应链绿色管理,提升资源利用效率。三星以“发展引路人”角色,构建互利共赢的供应链生态,在进博会舞台上书写产业协同发展的生动实践。

  • 双11鸿蒙应用持续升级,小艺、应用市场等App让购物更省心

    双十一期间,华为应用市场推出"11.11好物集"专题,提供购物指南与达人穿搭参考,帮助用户高效筛选商品。鸿蒙系统的小艺助手支持商品比价、智能下单及多任务语音操作,简化购物流程。出境游用户可使用天际通流量服务,无需实体卡,按天计费;配合云空间自动释放本地存储,保障旅行照片视频安全同步。通过智慧功能与便捷服务,为用户打造更流畅、安全的消费与出行体验。

  • 如何检查你的网站是否被大模型引用?AI排名查询工具推荐

    本文探讨AI搜索时代网站流量获取新逻辑:传统SEO因Google搜索"零点击"现象失效,而71%用户通过AI工具研究购买决策。文章指出被大语言模型引用成为新流量入口,并推荐使用AIBase等GEO工具监测网站在豆包、DeepSeek等国内主流AI平台的曝光情况。提出三步操作法和三个优化建议:建立监控基线、定期检查变化、聚焦高转化场景。强调在AI搜索时代,内容被LLM引用已成为新的流量生命线。

  • 继感知位置后!海尔空调将发布可感知呼吸的新品,可自适应送风

    海尔空调推出麦浪舒适风系列,实现从“感知位置”到“感知呼吸”的智能升级。新品搭载UWB雷达系统,可精准识别人体位置与呼吸状态,实现“人近风柔、人离节能”的智能送风。Pro系列新增语音控风功能,支持70℃高温制冷和24小时制热不停机,外观采用一体化玻璃面板。10月25日该系列在天猫首发,为用户提供更懂需求的空气解决方案。

  • 苹果回应“iPhone面容解锁不用摄像头” 网友直呼:冷知识 才知道

    11月5日,“iPhone面容解锁不需要摄像头”话题引发热议。苹果官方澄清,面容ID并非通过前置摄像头,而是依赖原深感摄像头系统投射并分析数万个不可见点,生成面部深度图与红外图像,再通过安全隔区内的神经网络引擎进行数据比对。该系统能适应外貌变化,并在各种光线环境下工作。需注意,红外镜头仍属广义摄像头范畴,称“完全不需要摄像头”并不严谨。

今日大家都在搜的词: