建站如何区分和选择响应式布局与自适应式布局

原创 码农  2019-12-24 10:49:16  阅读 410 次 评论 0 条

经常有客户甚至是后端程序猿,会问网页的响应式布局和自适应布局是有什么样的区别?这篇文章可以给小白们答疑。


随着智能手机、ipad等智能移动设备的普及,推动了网站风格样式的更新迭代。为解决PC端和移动端不同访客的用户体验问题,众多的建站产品供应商分别提出了响应式布局和自适应布局的概念。


但是很多人乃至互联网营销老手对于这个概念依然云里雾里,两者究竟如何区分?企业建站该如何选择呢?针对这些问题,下面做了一些研究整理:

响应式布局
建站如何区分和选择响应式布局与自适应式布局 建站 第1张

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。响应式布局是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。


简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。优点就是面对不同分辨率设备灵活性较强,能够快捷解决多设备显示适应问题

但,这种布局由于要同时兼容各种设备,代码量臃肿,从而加重了浏览器的数据接收负担,加载时间也会随之变长。

最主要的是,PC和移动端使用同一个网站,不利于百度的关键词优化和排名因为用户在不同终端的搜索习惯不同,所以百度对移动网站和电脑网站的关键词处理策略也不相同。而对于响应式的方案,不同终端访问到的网页代码是一样的,这样就不能在电脑端和移动端设置不同的关键词。

同时,响应式网站不利于手机版专题页单独做商业推广,这是响应式设计网站最致命的弱点。

而且这种折衷性质的设计解决方案,还会因多方面因素影响,需要在一定程度上改变网站原有的布局结构,会出现用户混淆的情况,从而达不到最佳的效果

建站如何区分和选择响应式布局与自适应式布局 建站 第2张


举个简单的例子,很多人一定还记得一种即可当电动车又可做旅行箱的多功能旅行箱。表面看上去这种多功能满足了人们的多种需求,但由于在设计时要兼顾两个方面的功能,很容易因为一些局限性导致两个方面都不是特别实用,而且要两面兼顾,制作成本实际比分别做两个物件还要高。

同理,响应式网站在PC端和移动端各自一些特别的实现和设计有时候是没有办法同时兼顾实现的,这也刚好验证了工业上一句话“越精巧越脆弱”。


自适应布局
建站如何区分和选择响应式布局与自适应式布局 建站 第3张

自适应布局(Responsive Web Design)指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。从字面来上说,自适应布局就是能使网页自适应显示在不同大小的终端上,意思就是不同大小的设备上都能显示同样的界面,让同样的页面适应不同大小的屏幕,根据屏幕大小,自动调整布局

从细分来看,自适应的实现形式有两种,一种是通过响应式布局(实现方式和优缺点上面已经讲过),而另一种就是开发多套界面单独部署PC和移动站,从真正意义上来实现网站的自适应布局。

相比响应式布局只需要开发一套界面就全部适应,单独部署PC和移动站的自适应布局则需要开发多套界面,且对页面做的屏幕适配要求在一定范围:比如pc端一般要大于1024像素,手机端要小于768像素。遇到状况会需要改动多套代码,流程较为繁琐,相应的人力成本也会增加


但,相比响应式布局实现的自适应,单独部署PC和移动站优势在于:

由于自适应网站明显的特征是url结构一样,搜索引擎会视为一个网站看待,流量获取单一,如果PC有出现降权或被惩罚,一定是同步处理,而单独的移动站点会视为两个网站对待,无论排名、流量、权重都可单独获取

而且单独部署对一些复杂性的大型网站它的兼容性更好,实施起来更加方便;设计方面代码也会更高效,测试起来更加容易;同时图片的可控性高,用户体验效果好。



综上,无论哪种设计都有它们各自的特点,大家可以根据项目的需求来选择适合的布局方式。


本文地址:https://www.itcodeit.com/post/28.html
版权声明:本文为原创文章,版权归 码农 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?