响应式设计和自适配设计,孰优孰劣?

响应式网站(Responsive Website)是那些应用了响应式设计(Responsive Web Design,简称RWD)的网站。一套HTML,CSS,JavaScript代码可以满足不同分辨率的浏览需求。而自适配设计(Adaptive Web Design,简称AWD)网站是针对不同分辨率的客户端伺服不同的固定样式的页面,服务器会根据请求页面的客户端UserAgent和分辨率返回响应的一套HTML,CSS和JavaScript代码。

对新接触这些概念的读者,你可以做这样的测试。在桌面上缩放浏览器窗口的大小,如果页面样式改变了,那么它就是响应式设计。如果窗口缩小后,载入了另一个页面,或者出现了水平滚动条,那么它就不是响应式设计,而可能是自适配设计。

响应式设计

响应式设计

不管是响应式设计还是自适配设计,它们的宗旨都是为用户提供一个良好的体验。下面我们来讲讲响应式设计和自适配设计各自的优缺点。

响应式设计的优点

响应式设计是谷歌所推崇的一种设计方法,它通过CSS3 Media Query来找到设备的屏幕尺寸和分辨率来决定,最后呈现方式是什么。在响应式设计中,页面最终呈现的方式完全由客户端来决定。也就是说,不管你使用的是桌面电脑,还是手机屏幕,或者是平板电脑,最终你的浏览器下载的代码完全是一致的,不管最终屏幕显示用不到还是用得到,这些代码都会被下载。这种解决方式相当于提供了一个一劳永逸的方法,服务器端并不需要知道客户端具体用的是多大的屏幕分辨率,他只需要把网页代码无脑地传送给客户端就可以了。

在之后维护页面的过程中,我们可以看到消耗的资源和维护的时间会大大降低,因为你只要维护一套代码便可。当今一些主流的内容管理系统,如WordPress、Joomla以及Drupal大都整合了响应式设计的模板,因此响应式设计几乎成为了当前世界上新网站的趋势和主流。

响应式设计带来的另一个优点是,一个页面只会存在一个网址。那么对像谷歌这样的搜索引擎来说就不必要去抓取同一个页面的各个版本来进行缓存和解析。这也难怪为什么谷歌会大力的去推广和宣传响应式设计了。

我们通常看到的响应式设计的页面就好像拼图游戏,由于屏幕大小的限制,一些在右面无法显示的模块,就会顺其自然地向下拓展。下图就是一个典型的例子。

响应式设计根据不用屏幕分辨率放置内容

响应式设计根据不用屏幕分辨率放置内容

响应式设计的缺点

那么响应式设计又有哪些缺点呢?

首先是冗余的代码量。由于服务器无脑地将代码推送给客户端,客户端将不可避免地下载许多用不到的代码。另外由于使用过多套样式,客户端必须决定使用哪套样式来最后渲染页面,这使得响应式设计的页面的加载时间将远远多于为特定分辨率专门设计的那些页面。

除了冗余的代码,还有页面其他的元素。比如图片,响应式设计无法决定最终设备会使用什么尺寸的图片。因此响应式设计的页面,通常会是下载最大分辨率的图片,而往往在手机上,我们没有必要去查看如此高分辨率的图片。当然你可能要说,这可以通过优化来解决,小屏幕会下载小尺寸的图片。但这样一来又和响应式设计的理念相悖了,你需要投入更多的资源来维护多个分辨率的版本,又或者是牺牲服务器端的资源和客户端的资源。

响应式设计的第三个缺点是无法针对移动端进行特殊的用户体验优化。如果页面仅仅是要呈现一些内容的话,那么响应式设计可谓游刃有余。可是如果是复杂页面需要很多交互的话,那么响应式设计就捉襟见肘了。你可以打开搜索引擎必应的主页,你会发现在手机端和在桌面上其实是两个页面。为什么功能并不复杂的页面都要分两个页面来设计呢?那是对用户体验的考虑。

在网页前端设计中,我们通常会关注这六个分辨率宽度:320,480,760,960,1,200,1,600。响应式设计同样要为这六个分辨率分别设置一套呈现方式。在开发过程中,由于要兼顾各个分辨率,投入的时间也不少。所以响应式设计页面就像一个智能手机,可以拍照片,又可以做mp3,可以看视频,当然一定可以打电话,但归根结底只是凑合,拍照片、听音乐、看电影都无法做到极致。

自适配设计的优点

我们再来说说自适配设计的优点。自适配设计通过客户端的http请求获取客户端的浏览器信息,然后服务器端会选择专为这个环境设计的页面伺服给客户端。因此客户端所呈现的页面是最优化的。最优化体现在客户端只需要下载自己需要的页面元素内容从而加快了加载速度,同时针对浏览器版本和分辨率的页面代码又对用户体验进行了最高级别的支持。

自适配设计页面对响应式设计页面的速度优势

自适配设计页面对响应式设计页面的速度优势(图片来源

由于开发人员只需要针对一种环境进行开发,这大大降低了开发的复杂性也为开发人员提供了很大的自由度。这还让出错的几率大大降低。为已有网站添加新的自适配设计的移动站点并不需要对原网站进行修改,这降低了用户体验上的风险和对新界面不习惯的风险,还使改版的SEO风险不再存在。

自适配设计还满足渐进增强(Progressive Enhancement)和优雅降级(Graceful Degradation)的设计理念兼容性和表现力兼备。尤其是渐进增强方面,可以参考m.taobao.com,它的用户体验和淘宝APP几乎是一致的。

优雅降级(graceful degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。

渐进增强(progressive enhancement):一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。

谷歌在今年的Google I/O大会上力推的Progressive Web Apps其实就是自适配设计的一次进化。包括谷歌去年推出的AMP和百度刚刚发(shan1)明(zhai4)的MIP都可以被认为是自适配设计的应用。可以说自适配设计展现出了超强的生命力。

自适配设计的缺点

自适配设置的起源是移动站,也就是m.example.com。如今我们完全可以用一个url来伺服不同的客户端,自适配设计早已不是一个m.网站的范畴。如上所言,现在前端设计主流的分辨率有六个,因此一个m.网站也无法来定义自适配设计了。再何况要兼容不同的浏览器,这就需要高级的前端开发工程师来进行。因此如果你没有一定的资源,或者在开发预算上并不理想,那么完整高级的自适配设计设计可能并不适合你。

自适配设计的另一个缺点是SEO,由于不同的浏览器和浏览环境会看到不一样的页面,这往往会给搜索引擎展现两个或多个版本的页面内容。搜索引擎需要花费额外的资源对你的页面进行解析,因为现代搜索引擎大都可以执行JavaScript脚本渲染页面(Headless Browser技术)来了解你页面的内容。如果你的url不一致,那么更有可能产生重复内容的页面,网站内部的链接也会相对变得混乱。

虽然SEO们都建议不要用JavaScript来展现内容,但实际上各个搜索引擎都已经可以运行脚本,因为否则将无法获取一些如Angular JS框架的页面内容。

响应式设计还是自适配设计?

响应式设计还是自适配设计?

响应式设计还是自适配设计?(图片来源

不管是响应式设计还是自适配设计都是移动网站的解决方案,目的都是为了让不同的用户在不同设备上得到一致的良好体验。我们上文已经介绍了响应式设计和自适配设计的优点和缺点,在我们进行决策使用响应式设计还是自适配设计的时候,需要考虑以下三点:

  1. 首先要考虑你是要新建一个网站,还是为现有的网站进行移动化部署。前者用响应式设计成本更低,而后者用自适配设计更加安全。另外自适配设计避免了重头再建一个网站的成本和麻烦。
  2. 其次要量力而行,自适配设计需要更高端的开发能力。你要做好投入上百小时用来调试的准备。
  3. 最后是用户体验方面的考虑。如果你的网站交互功能较多,那么在移动端实施自适配设计可能是一种较优的方案。反过来,如果你的网站仅仅是提供一些资讯,那么响应式设计可能是你的首选方案。