18910140161

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

互联网

2022-03-27 09:23:25

97

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

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

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

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

该不该做两套版本?

对于大多数网站来说,制作两个版本并不是一个明智的选择,因为后期的维护成本、生产成本、调试成本和开发成本都会大幅增加,而且互联网发展迅速,网页也很快过时。一般来说,花大量时间制作两套随时都会过时的页面是不值得的。大多数网站都受到通用开源程序的限制。进行两组后端扩展也会有更高的要求,这可能会增加后端和服务器端的工作负载。一般制作两套,适用于一些大型平台或有自己源程序的大型网站或一些知名网站。大多数网站不需要做两套。(当然,如果你有很多钱、强大的团队、大量的时间和精力,请忽略这一段)

响应式技术的发展是什么?

我们不必担心流体流动的布局或其他布局。我们只需要根据预期的设计首先考虑具体的项目,然后深入考虑其他复杂的知识点。许多细节需要单独研究,但并不是所有细节都能投入到实际项目中。实际的项目仍然需要尽可能地简化代码,降低开发和后期维护的成本。只要它能够满足各种设备的需求,并通过响应能力有效控制不同大小图片的加载,在当前互联网速度不断提高的环境下,相同的访问速度将非常快。

对于网页的响应性设计,我不会有正面或负面的评价,因为它是基础。你必须适应互联网的发展、发展的需要和客户的需求。在这个基础上制作一套网页是很自然的。对于一项基本技能来说,没有必要说它是否好。

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

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

总结

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

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

尽可能精简代码

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

尽可能优化加载速度

尽量避免使用JS(我通常使用JS进行视网膜图像自适应,这相对更灵活,因为它与响应分离,CSS也用于视网膜图像自适应)

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

小工具

检测网页的性能,包括基本的响应性能:Google insights

相关文章
随机推荐
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航