前端技术讨论:是响应式网站好?还是手机和PC端分开建站好?

浏览次数:0 发布时间:2021-03-26 关键词: 响应 前端 技术讨论 设计 布局

前端技术讨论:响应式设计 (Responsive Web design)方案

响应式网站与手机和PC端分开建站不是硬币的正反面,它们为了解决同一个问题而生,它们是同一种思想的延伸。

移动和桌面设计的差别远不止是布局问题。只要有足够的编程量,这些差别是可以通过响应式设计来解决的。事实上,你可以认为如果一种设计不能兼顾两种平台的主要差别,就不能算是合格的响应式设计。但是,如果确实想要处理好平台间的所有差异,我们就回到了原点:进行两种不同的设计。 

——《Mobile Usability》(《贴心设计 打造高可用性的移动产品》)

响应式网站建设把主要依靠 CSS (主要是 Media Query,网格与Typography系统),辅以少量的JS,来对各种屏幕尺寸进行响应的做法,称之为响应式布局。

这种主要依靠CSS和少量JS的方案有很多优点,比如:

  • 设计风格和细节能被复用,大大降低了设计成本 - 美工开心

  • 前端只需要维护一套CSS代码 - 前端开心

  • 桌面端与移动端的设计十分接近,令用户感到“熟悉” - 用户开心?

  • 不需要任何服务器端的支持 - 后端开心

  • 与业务耦合程度低,复用程度高 - 后端开心

看起来就是,大家都开心,所以很多 的开源项目(例如:Bitwebcms、Bootstrap、Foundation)都进行了跟进。

但有些地方也并不是那么完美的:

  • 功能需求复杂时,光靠响应式无法支持复杂的需求

  • 前端代码执行效率低(我们测试过,大概低3-5%)

  • 桌面端的交互和移动端的交互很难针对平台作出差异

那么究竟响应式设计适合哪些场景?

正如我们经常看到的那样,很多中小型企业,个人博客,创业公司,开源项目,小型网店,艺术家,画家,音乐家,甚至是政府和学校,都使用响应式技术,来搭建他们的网站。这些页面的特点一般都是访问者和网站的交互很少,仅仅用于信息展示和获取以及点个赞什么的。需要写的兼容性代码很少,非常适合做成响应式。

响应式设计不适合哪些场景呢?

而像淘宝,京东,还有其他的重交互性系统,则不大那么适合使用响应式技术。《响应式 Web 设计》一书中提到,响应式设计应该以移动用户的体验优先。在进行功能性设计的时候,需要优先考虑移动端的用户体验,然后才能考虑计算机端的用户体验。毕竟计算机的屏幕,比手机要大很多。产品经理往往要考虑,如何物尽其用并且堆砌更多的功能,所以响应式设计就不再是一个明智的选择。当然,这里有一个很重要的前提,您的技术团队,将需要维护两套代码,和两套基本不一致的系统。这对小型创业公司简直就是一个灾难。

对于响应式设计技术理解的误区

有很多朋友还说,响应式设计,由于需要同时支持计算机和手机,所以代码的执行效率比较低。也有的朋友说,响应式技术制作的网站,将比普通网站需要加载更多的样式和脚本,所以打开速度比较慢。这么说的朋友,一般有两类人。一类人是,认为慢5%,也算慢的人;另外一类人是,听 类人说慢,就认为慢了。起飞页作为国内使用响应式技术比较多的一家公司,专门的做过一些内部测试。在去掉了,响应式样式和脚本之后,页面的加载速度,确实提高了,但仅仅提高了3%到5%。相对于响应式带来的各种好处来说,这点性能上的开销,几乎可以忽略不计。

要不要使用响应式?

对于初创企业,如果希望投入较小的时间和精力,就可以让自己的网站在手机以及平板电脑上被使用,响应式技术完全是 佳解决方案。如果您的企业成长到了一定的规模,并且希望,这手机上来点不一样的东西,那么专门的移动系统,也是一个不错的选择哦。顺便说一下,其实百度和阿里,腾讯,小米,知乎,很多大家都耳熟能详的公司,都在不同的产品中,使用非常多的响应式技术。可见,即使是财大气粗的大公司,也并不是都能支撑得住独立移动系统的开销。套用一句老话作为结束,作为产品经理,我们需要能够找到用户体验和构建成本的平衡点。