对网站响应式设计的重新思考

所属分类: 网站运营 / 网站策划 阅读数: 195
收藏 0 赞 0 分享

  最近在知乎上回答过响应式的问题,也重新对网页响应式设计做了一个新的思考,我给整理总结了一下。

QQ截图20170504150150

  就目前来说(我就把时间划分到2015年以后吧,之前的网页就不拿来批判是否考虑响应式了),对于一个web,响应式是最基本的要求,说简单也简单,但是要处理好每一个细节不是那么容易的,响应式也是必修课,必然导致前端要提升自己的能力。

  网站如果不支持响应式或者响应式很粗糙,谁会买单?

  或许国内的大部分网站并不刻意要求响应式,就算要求响应式,大部分适配后的网站效果也是非常粗糙的,总体来说国内的网页对响应式有比较高的需求的都属于一些要求高的或者专业性很强的网站,就算你不做响应式,直接让网页按照PC端显示的效果一样(使用类似 的代码,虽然不建议这样做,但这能有效确保具有固定尺寸的网页能按预期显示),直接适配手机,客户也会买单。境外大部分客户的网站,最基本的要求,不满足响应式不会买单。

  该不该做两套版本?

  对于大多数网站,做两套版本不是明智的选择,因为后期维护成本,制作成本,调试成本,开发成本等都会增加很多,而且互联网发展迅速,网页过时的很快,一般情况,不值得花大量时间做两套随时会过时的页面。并且大多数网站有常用的开源程序的约束,做两套对后端的扩展也会有更高的要求,可能会增加后端和服务器端的工作量。一般做两套,适用于一些拥有自己的源程序的大平台或者大型网站或者一些知名的网站。大部分网站,无需做两套。(当然如果你钱多,团队杠杠的,时间精力也多,就忽略此段落)

  响应式技术的发展怎样?

  我们不用纠结于什么fluid流布局还是其它什么布局的,我们只要考虑首先把具体的项目按照预期设计表现出来即可,然后再深入考虑其它复杂的知识点。很多细节有单独学习的必要,但是不一定都能折腾进实际项目中。实际项目还是要尽量精简代码,减少开发和后期维护成本,只要能够满足多种设备,并且利用响应式有效控制不同尺寸图片的加载,在现在的不断提升的互联网网速环境下,一样访问速度会很快。

  对于网页的响应式设计,我不会存在正面还是负面的评价,因为它是基础啊,你得适应互联网发展适应发展需要啊,适应客户需要啊,做一套网页,做好这个基础,是理所当然的。对于一项基本功,没有必要说它好还是不好。

  一个真正好的响应式,是能够处理不同尺寸的图片的,如果CSS不能满足需求,现在有很多成熟的结合JS的技术手段,可以配合CSS做到更优秀的相应,不会大幅度影响加载速度,它完全可以达到两套web的效果。毕竟你不是做APP,是做网页。如果你要拿APP的原生交互效果和流畅程度和web相比,我觉得偏题了,没有必要,本身它们就是互补的东西,你不要他要,没有谁排斥谁的必要。

  如果还没见过优秀的响应式网站,可以去看看FWA上面的很多获奖的移动端网站。

  总结

  现在的响应式技术,已经很发达了,不但能满足不同设备的适配,还能够从交互,从体验,从加载速度等方面进行匹配。现在的响应式技术,不能和响应式才开始流入的那几年相提并论,什么代码冗余等等的负面东西可以忽略了。其实对于响应式这个东西,剩下的,只是愿不愿意学更加先进的技术,愿不愿意研究和发现,愿不愿意使用到实际项目中的问题而已。

  我自己并不做独立的前端工作,也不是什么大牛公司的前端开发,我只是为了服务自己设计的东西而已。只不过我也经过了几年的折腾,兼容性,响应式各种,用过很多开发框架,学过研究过不少进口知识,做过一些被认可的东东。我现在对于响应式设计,只有一个方向:

  尽可能精简代码

  尽可能以最少的Responsive Breakpoints兼容更多的设备

  尽可能优化加载速度

  尽可能避免使用JS(Retina图片适配我一般使用JS,相对来说和响应式分开,会更加灵活,避免Retina的图片适配也使用CSS)

  尽可能做到和PC端一样流畅的交互效果

  小工具

  检测网页的性能,包含基本的响应式性能:Google Insights

更多精彩内容其他人还在看

神级营销! 网络营销哪家强,中国山东找蓝翔

中国山东找蓝翔,最近经常能听到这个口号,无论是生活、八卦、还是专业课里都是神般的存在感,下面我们来看看蓝翔营销抓的那些点,需要的朋友可以参考下
收藏 0 赞 0 分享

中小企业网站如何打造持续外链圈的策略

中小企业网站在外链建设方面同样也存在着较大的难度,因为这样的网站本身很难有更高的权重和排名,那么想要获得其他网站的青睐并与之合作就显得尤为困难,而且外链建设的主动权往往很难掌握到中小企业网站运营者的手中
收藏 0 赞 0 分享

从零流量到日均150UV 淘宝新手需知科学定位的重要意义

这篇文章主要为大家介绍了一位店长今年4月份开的淘宝到现在一天都发二三十个包裹的原因,据他描述淘宝店最核心一点就是关于定位的,只要定位好,卖东西没烦恼,需要的朋友可以参考下
收藏 0 赞 0 分享

你不露面谁知道你 浅析如何利用020营销让客户找到我们

有好的产品还要让人知道才可以销售,我们该如何利用020营销让客户找到我们呢?外链和软文应该是各位站长的第一反应,但是线上广告、社交宣传、赞助和合作同样也可以让用户准确的找到我们的产品,需要的朋友可以参考下
收藏 0 赞 0 分享

2014年淘宝天猫双11嘉年华活动营销玩法攻略详解

2014淘宝双十一网购狂欢节,淘宝1111天猫双11活动,双十一秒杀,淘宝商城双11活动,每年的11月11日淘宝商城“双十一”全场五折大促销活动。下面小编就为大家带来2014年淘宝天猫双11嘉年华活动玩法攻略详解,一起来看看吧
收藏 0 赞 0 分享

挖掘机哪家强? 解读蓝翔是如何将社会化营销做到极致

挖掘机哪家强,中国山东找蓝翔,这一具有洗脑性质的全国口号放佛在一瞬间家喻户晓。所以对于蓝翔这个出色的营销案例,我想还是有必要解读一下,或许对我们营销人员有所帮助呢
收藏 0 赞 0 分享

淘宝双11 中小卖家如何收获双十一(1)

双11以前只有淘宝才会搞的活动,现在电商都搞了,本文主要讲淘系的双十一,我们可以看到淘宝天猫平台是安排11月1号到10号做预热,11号为活动期。对于咱们大多数不能上会场的中小卖家,其实是可以借鉴其他平台的玩法,也跟着一块儿抢双十一的份额,需要的朋友可以参考下
收藏 0 赞 0 分享

淘宝双11卖家必看 中小卖家如何收获淘宝双十一(2)

这篇我们主要讲中小卖家进入十一月份之后我们要做哪些事情。在十一月份短短的10天里,我们其实要做很多的工作。下面我们一起来看看中小卖家具体要做什么
收藏 0 赞 0 分享

电商干货:电商无线端怎么优化?无线端优化全攻略

马上就要到双11了,在双11之前做好无线详情,必定为双11无线端的爆发打下坚实的基础。电商无线端怎么优化?下文主要讲了电商无线端优化全攻略,需要的朋友可以参考下
收藏 0 赞 0 分享

汽车营销案列 这样的创新营销,你买账吗?

营销对于品牌知名度提高的重要性不言而喻,但车企要找到适合自己的营销新方式并非易事。近期汽车营销事件中也存在一些“加分”和“减分”之举,接下来就带大家一同点评下近年来车企“砸钱虽易,营销不易”的创新性营销案例
收藏 0 赞 0 分享
查看更多