手机版网站与 RWD 网站有什麽差别?我该如何选择?

手机版网站与 RWD 网站有什麽差别?我该如何选择?

随着近年来移动装置越来越流行,我们有必要说明一下,一般网站是如何在小型装置展示,以及如何适应多重萤幕的。目前主流的两种方桉,分别是「手机版网站」与「RWD 设计」,我们会针对这两种方桉做简单的说明,让您了解该如何选择。

Imgur

手机版网站

这是早期最传统的解决方桉,由于手机萤幕较小,没有办法呈现完整的网站样貌,且早期太多 Flash 等等不支援手机显示的网站元件,因此那时候都是由程式判断浏览器的 UserAgent 是否为手机,若是的话,就另外显示专门为手机製作的简易版网站介面。

由于最早兴起智慧型手机风潮的是苹果 iPhone,所以多数的手机版网站与 iPhone 有着类似的介面,也就是直列选单加上大大的按钮,例如下面几张图片:

Imgur

Imgur

甚至有些网站会额外替手机版准备另一个网域,例如 facebook.com 就另外有一个手机专用的 m.facebook.com 网域来显示手机版网站。

这种方式的优点是简洁明瞭,不会下载太多不必要的大图片来加重手机网路负担,特别针对手机设计的介面也较容易阅读。

但缺点却很明显,不只要额外开发新的网站造成人力浪费,手机 UserAgent 的判断有时候也会失误,最重要的是手机版网站常常无法提供完整的功能,可能会缺东缺西,因此同常都要提供一个返回桌面版的选项。

RWD 响应式设计

RWD 的全名为 Responsive Web Design,中文称作响应式网页设计,意思是说,网页会根据当下的萤幕大小,自动将自己的排版调成对应的形状来适应。如下图:

Imgur

很明显的,当萤幕越来越窄,网站本身会将版面调整成垂直排版,适合在小萤幕上阅读。这种设计需要较为资深有经验的前端设计师才能够掌握,但目前已经是网页设计的主流了。

RWD 的优点非常名确,我们只需要一次设计,就能适应所有版面,节省製作成本,网站风格也能统一。另外,不单纯只是手机与桌机的差别,只要是萤幕大小不同,如平板等等,都可以根据萤幕来做适当的排版,不会出现 iPad 只能看手机版的窘况。

至于缺点是常常被忽略的,首先,RWD 设计终究很难将桌面版完美的排成手机合适的样貌,总会有些跑版(经验老到的设计师有能力避免),而手机版网站则是特别为了手机而设计,有较佳的阅读与操作体验。另外,由于 RWD 不管萤幕大小,都会把网站的所有内容与图片载入,接着才根据萤幕大小选择要不要显示,所以对于手机网路与记忆体来说有较大的负担。

我该如何选择?

基本上,如果您的预算不是很充足,其实目前主流的 RWD 设计就非常适合您了,多数有经验的网页设计公司都会将 RWD 设计列为网站标准配备,不会对您加收太多费用。而您也只需要维护一个网站即可。若您的预算充足,也可以请设计公司替手机萤幕做更多的优化。

若您的网站功能较特殊,需要一个完全适用手机版的独立网站,当然也可以请製作公司代为开发,但製作与日后维护很有可能就是两个网站的成本了。