• RWD響應式網頁設計技術

    響應式網站設計(RWD)優缺分析

以愛貝斯網路公司的實例經驗看來,我們整理出為何該選擇響應式網站 RWD設計的原因。



響應式網站的優點

RWD網站有許多的優點,整理如下:

1. 開發成本與時間比APP低

APP必須開發iOS版及Android版兩個版本,一個版本皆數十萬元起跳,開發時間加上審核上架時間相當長。



2. 不需下載APP就能使用

這不只是響應式網頁的優點,可說是所有手機版網頁相較於手機APP的最大優勢。 APP必須到iTunes、Google Play下載,APP若要更新,必須重新審核過後,再通知所有下載用戶更新。反觀響應式網頁與手機網頁,只要管理者更新網站,每次連上網頁都會是最新版本。免費Wi-Fi熱點越來越多、 3G費率持續調降,即使無法離線瀏覽也不再是問題了。



3. 維護成本比APP低

APP完成之後要不定期需針對新版本測試,才能確定APP在新手機上能運作順暢。以目前新手機上市的頻率來看,這是永遠不會結束的測試地獄。
手機版網站等於是另一個用在行動裝置的公司網站,相對地,企業必須花2筆網站維護成本。



4. 可同時適用不同裝置

APP必須開發iOS版及Android版兩個版本。 手機版網站則需要搭配電腦版網站,才能符合多數裝置規格。同時還要安裝偵測使用裝置的小程式,才能讓手機讀電腦版網址會開手機版網頁、 電腦讀手機版網址會讀電腦版網頁…這一串繞口令其實也代表了目前電腦+手機版雙網站介面的內容分享問題,設計響應式網站就完全不會有這個問題。



5. 品牌形象一致

同一個網站適用於各種裝置,自然不需要針對不同版本設計不同視覺效果。



6. 符合使用者習慣

行動裝置的搜尋功能仍是以「搜尋網頁」為主,舉例來說,有人用手機搜尋「飯店」2字時,只會搜尋各家飯店的網頁, 不會搜尋飯店開發或帶有飯店名稱的APP。開發出來的APP必須再花一筆行銷費用大力宣傳,讓使用者知道有這個APP,還要能引起興趣下載、使用。



7. 利於分享

APP沒有網址可以分享,以蘋果日報的APP為例,APP分享出去的網址是電腦版網頁的網址,網站若偵測到是用手機開啟網址,再自動轉址到手機版網頁的網址。
即使做了手機版網頁,分享出的網址通常都是手機版網頁的網址,當朋友用電腦開啟連結時,卻不見得會轉回電腦版網站。蘋果日報的手機網站就是如此。 同樣的網頁內容拆成電腦版、手機版兩個網址,按讚數、流量分析等也會跟著拆成兩筆數據,對SEO相對比較弱。
響應式網頁就沒有這個問題,分享出去的都是同一個網址。



8. 利於SEO(Google喜歡)

在SEO這一方面除了大勝app外,而相較於獨立網址的手機版網站,響應式網頁可以避免重覆的內容、保持網頁原本的連結,因此響應式網頁設計的原理與使用習慣都有利於於SEO(搜尋引擎最佳化) 詳見《RWD響應式網站設計對SEO的好處?》



響應式網站的缺點

響應式(響應式)網頁設計當然也不是無敵的,他的缺點有:

1. IE7以下不支援

嗯…還有人在用IE7嗎?Gmail、Youtube、Facebook…等大網站也不支援IE7囉。



2. 小螢幕尺寸不適合複雜的功能或介面

如果你打定主意要用很複雜的功能,如拍照、定時喚醒、購物…等,只能砸錢開發APP。
如果電腦版必須維持很複雜的介面,手機版則必須大量縮減內容,兩個版本架構不同且差異相當大的話,另外做手機版網站是比較適合的。



3. 載入速度問題

使用同一份HTML及CSS,所以不是在手機上或電腦上,下載的是同一個網站,下載速度也是一樣的,只是網頁偵測到是手機裝置時會隱藏部份元素,事實上載入速度並不會變快。雖然愛貝斯的工程師群有能力做到圖片載入的優化,但總體來講,讀取速度還是不如電腦版網頁。但考慮到5G網路已經全球佈局,手機網路速度可能不再是RWD明顯的缺點。



4. 需針對手機使用者習慣調整

手機使用者與電腦使用者的網頁瀏覽習慣是完全不同的,要能符合2邊的使用習慣,必須下很大的功夫規劃瀏覽動線。



結論:RWD還是利大於弊,慎選網頁設計公司就能避免

明眼人一眼就看出大部份的缺點其實是網站公司的功力問題,網站規劃不恰當、功課做的不夠、技術與經驗不純熟、 還是用舊思維設計網頁的網站設計人員,才會讓設計出來的響應式網站產生這些問題。
因此在選擇響應式網頁設計公司時,還是得仔細評估,從網站作品下決定。