对网站响应式设计的重新思考
最近在知乎上回答过响应式的问题,也重新对网页响应式设计做了一个新的思考,我给整理总结了一下。
就目前来说(我就把时间划分到2015年以后吧,之前的网页就不拿来批判是否考虑响应式了),对于一个web,响应式是最基本的要求,说简单也简单,但是要处理好每一个细节不是那么容易的,响应式也是必修课,必然导致前端要提升自己的能力。
网站如果不支持响应式或者响应式很粗糙,谁会买单?
或许国内的大部分网站并不刻意要求响应式,就算要求响应式,大部分适配后的网站效果也是非常粗糙的,总体来说国内的网页对响应式有比较高的需求的都属于一些要求高的或者专业性很强的网站,就算你不做响应式,直接让网页按照PC端显示的效果一样(使用类似 的代码,虽然不建议这样做,但这能有效确保具有固定尺寸的网页能按预期显示),直接适配手机,客户也会买单。境外大部分客户的网站,最基本的要求,不满足响应式不会买单。
该不该做两套版本?
对于大多数网站,做两套版本不是明智的选择,因为后期维护成本,制作成本,调试成本,开发成本等都会增加很多,而且互联网发展迅速,网页过时的很快,一般情况,不值得花大量时间做两套随时会过时的页面。并且大多数网站有常用的开源程序的约束,做两套对后端的扩展也会有更高的要求,可能会增加后端和服务器端的工作量。一般做两套,适用于一些拥有自己的源程序的大平台或者大型网站或者一些知名的网站。大部分网站,无需做两套。(当然如果你钱多,团队杠杠的,时间精力也多,就忽略此段落)
响应式技术的发展怎样?
我们不用纠结于什么fluid流布局还是其它什么布局的,我们只要考虑首先把具体的项目按照预期设计表现出来即可,然后再深入考虑其它复杂的知识点。很多细节有单独学习的必要,但是不一定都能折腾进实际项目中。实际项目还是要尽量精简代码,减少开发和后期维护成本,只要能够满足多种设备,并且利用响应式有效控制不同尺寸图片的加载,在现在的不断提升的互联网网速环境下,一样访问速度会很快。
对于网页的响应式设计,我不会存在正面还是负面的评价,因为它是基础啊,你得适应互联网发展适应发展需要啊,适应客户需要啊,做一套网页,做好这个基础,是理所当然的。对于一项基本功,没有必要说它好还是不好。
一个真正好的响应式,是能够处理不同尺寸的图片的,如果CSS不能满足需求,现在有很多成熟的结合JS的技术手段,可以配合CSS做到更优秀的相应,不会大幅度影响加载速度,它完全可以达到两套web的效果。毕竟你不是做APP,是做网页。如果你要拿APP的原生交互效果和流畅程度和web相比,我觉得偏题了,没有必要,本身它们就是互补的东西,你不要他要,没有谁排斥谁的必要。
如果还没见过优秀的响应式网站,可以去看看FWA上面的很多获奖的移动端网站。
总结
现在的响应式技术,已经很发达了,不但能满足不同设备的适配,还能够从交互,从体验,从加载速度等方面进行匹配。现在的响应式技术,不能和响应式才开始流入的那几年相提并论,什么代码冗余等等的负面东西可以忽略了。其实对于响应式这个东西,剩下的,只是愿不愿意学更加先进的技术,愿不愿意研究和发现,愿不愿意使用到实际项目中的问题而已。
我自己并不做独立的前端工作,也不是什么大牛公司的前端开发,我只是为了服务自己设计的东西而已。只不过我也经过了几年的折腾,兼容性,响应式各种,用过很多开发框架,学过研究过不少进口知识,做过一些被认可的东东。我现在对于响应式设计,只有一个方向:
尽可能精简代码
尽可能以最少的Responsive Breakpoints兼容更多的设备
尽可能优化加载速度
尽可能避免使用JS(Retina图片适配我一般使用JS,相对来说和响应式分开,会更加灵活,避免Retina的图片适配也使用CSS)
尽可能做到和PC端一样流畅的交互效果
小工具
检测网页的性能,包含基本的响应式性能:Google Insights
相关文章
- 简单而片面的说,爬虫就是由计算机自动与服务器交互获取数据的工具,这篇文章主要想谈谈爬虫获取数据的这一部分。爬虫请注意网站的Robot.txt文件,不要让爬虫违法,也不要2017-12-18
- 设计师可能无法减少App加载页面的等待时间,但是可以让等待时间变得有趣~,本文主要为大家浅淡App加载页面的等待体验设计技巧,有兴趣的朋友们就来了解下吧2017-12-15
- 表单无论实在网页设置中,还是在APP、应用程序、软件界面中都被广泛运行,从而一个好的表单设计就非常重要了,本文主要为大家分享几个交互好且转化率高的表单设计技巧,有2017-11-20
适配iPhone X要点:十分钟快速掌握iPhone X UI界面适配技巧
目前,第一批预约iPhone X手机的朋友们已经拿到真机了,目前还没有适配iPhone X的应用运营商,相信都在加班加点适配呢,本文为大家带来了适配iPhone X的要点,让你十分钟快2017-11-08如何让网页可读性更强?善用F式布局设计增强网页可读性方法解答
虽然网页排版方式千变万化,但是布局方式通常都遵循着几种常见的规则,F式布局式设计能够增强网页可读性,这种说法是有迹可循的,本文就为大家介绍如何运用F式布局,有兴趣2017-11-08- 在网页的设计中表单都是界面中最常见,也是最重要的组件之一,对于设计师、前端和开发者而言,应当对于表单的设计尽量多上心,让它们更加易用,细致的设计对于用户的体验、2017-10-26
- 有很多东西下意识地影响了我们的日常决策,这里面很多都是微妙的心理因素在起作用,大家都知道用户体验设计跟心理学相关,甚至会直接影响产品的转化率,那么,登录页面怎么2017-10-10
网站评论模块怎么设计 10个关键点告诉你如何设计产品评论模块
网站不仅内容很重要,评论模块同样也很重要,那么,网站评论模块怎么设计呢?对此,本文就为大家详细介绍10个关键点告诉你如何设计产品评论模块,有兴趣的朋友们就来了解下2017-09-25网站导航设计怎么才是符合搜索引擎优化?SEO网站导航建设技巧分享
搭建网站的任何细节都需要考虑到是否利于SEO优化,在网站导航设计的过程中,我们应该怎么样进行操作才是符合搜索引擎优化的呢?对此,本文就为大家进行简单解答2017-09-21- 在做网站设计的过程当中,很多人可能会对于页脚这个方面产生忽略,但是实际上在我们平时的使用下来的整体的分析数据表明,页脚对于一个网站来说还是有非常重要的作用的,那2017-09-04
最新评论