RWD自適應式網頁設計
Responsive Web Design (RWD) - 多螢幕尺寸 , 跨平台瀏覽的最佳解決方案
何謂『自適應式網頁設計』(Responsive Web Design,簡稱RWD)
就是讓網能夠依據PC、平板電腦、智慧型手機等各種裝置不同大小的畫面,自動調整成適合大小
何謂RWD自適應式網頁設計?
  • 自適應式網頁設計的主要技術
自適應式網頁設計的主要核心技術即是透過Html5+CSS3中的media queries,根據不同類型的媒體條件設置相對應的樣式表,讓網頁內容可以自動依照使用者的瀏覽裝置大小而自動調整,讓使用者能自在的閱讀網頁。
  • 自適應式網頁設計的優點
  • 貼近行動裝置使用者
  • 隨著行動裝置使用及行動上網普及,過時的老舊網頁已無法符合行動裝置的瀏覽顯示,降低了行動用戶上網瀏覽網站的意願;自適應式網頁設計的最大目的,就是讓不同行動裝置的用戶在瀏覽網頁上,都能得到最佳的顯示效果,抓住行動用戶的目光。
  • 開發成本、時間及維護比APP低
  • 為適應各行動裝置,APP必須開發iOS版及Android版,單一個版本的開發費用就需數十萬元起跳,從開發到審核上架的花費時間更是相當長。APP完成後,更要不定期需針對新版本作測試及更新,才能確定APP在新手機上能運作順暢,且APP一旦更新,又必須重新審核上架,這是永遠不會結束的輪迴
  • 網站只有一個URL利於分享
  • 不論APP或手機版網頁分享網址,網站若偵測到是用手機開啟網址,分享出的網址通常都是手機版網頁的網址,若使用電腦開啟連結時,卻不見得會轉回電腦版網站;自適應式網頁設計則無此問題,無論是使用手機或電腦,分享出去的都是同一個網址,同樣的網頁內容,不會分散社群分享數,更能增加流量及停留時間,近而提高搜尋排名。
  • 增加搜尋引擎曝光度
  • 隨著行動上網族群的增加,搜尋引擎也早已優化了搜尋功能,提供最佳的行動上網使用經驗。當客戶使用手機搜尋資訊時,搜尋引擎會優先將響應式網站排名提前,如果您的網站使用的正是自適應式網頁技術,您的網站能見度將會更高,比其他競爭對手更具優勢。

自動調適型網頁設計的缺點

  • 比不上手機版網站
  • 自適應式網頁設計必須考慮不同裝置上的運作,為了讓程式碼適用不同裝置,必須捨棄某些複雜的功能和介面,難免比為了專為手機版而設計的網站來得遜色。相對地,如果電腦版和手機版兩這架構不同且差異相當大的話,建議將兩者分開製作是比較適合的。
  • 時間花費
  • 開發響應式網站是一項耗時的工作,若為了滿足各個裝置瀏覽,需要花大量的時間進行網站的設計及測試。
  • 載入速度問題
  • 由於所有裝置共用同一份HTML及CSS,不論是透過電腦、平板或手機上,因為下載的是同一個檔案,都會一併讀取其他裝置設計的內容,難免影響頁面讀取速度。
  • IE 8以前版本無法正常瀏覽
  • 自適應式網頁設計是使用CSS3中的media queries來調整版面,但IE 8等較舊的瀏覽器並不支援CSS3,會無法顯示這類型的網頁。

2.什麼樣的網站適合RWD?

要評估一個網站是否適合RWD設計,必須有基本的網站企劃內容,尤其是網站架構圖,透過網站架構圖我們可以清楚了解整個網站的架構有多大、選單數量及層級,進而推算出網站的資訊量多寡,更能準確評估該網站是否適合RWD設計模式。
總而言之,選單架構及資訊單純的網站越適合RWD設計,沒有過多複雜的操作或看不完的網站內容,但架構龐大的網站並非無法採用RWD設計,只是在選單設計上就必須加以用心處理,否則容易因選單分層過多,除了在手機上操作不易,也會導致使用者在網站中迷路,相對地網站資訊量過多,除了會受頻寬影響決定網站開起速度,無法達到響應式網頁設計的理想要求外,也會影響使用者花時間瀏覽網頁的意願,進而造成使用者跳出率的提升。

  •  

3.一般網頁與自動調型網站的設計流程差異

 

RWD網站

一般網站

接觸
(業務階段)

當客戶指明RWD設計,須讓客戶充分瞭解RWD設計的優缺點

開發與接觸有網站設計需求的客戶

需求
(業務+企劃階段)

除了既有的需求分析之外,必須確認此網站專案是否適合採用RWD設計,如不適當,需儘速與客戶溝通,尋找其它方案滿足客戶需求

針對客戶需求製作需求分析,透過需求分析了解網站相關設計及功能,分析完成後,訂定詳細規格表與預期工作天數

規劃
(企劃階段)

除了整理網站相關的資料,需與客戶仔細核對內容企劃資料及確認所有網站細節,降低後續修改風險

整理出網站企劃書(網站架構圖、網站草圖等)以及後端功能清單等等相關資料

設計
(設計階段)

網站視覺設計除了滿足客戶需求外,亦需考量RWD網站各元素寬度的彈性,視覺元素處理上越單純,在頁面製作中,越能達到正常流動或縮放。

針對客戶需求開始網站視覺設計,客戶確認定案視覺設計,轉化成實體網站

開發
(程式階段)

RWD應用主要多於前端設計,對於後端開發引響不大

網站動態語言及後端程式開發

上線

除了前後端功能與各瀏覽器使用狀況測試外,需於不同版本的行動裝置測試RWD網站的效果與呈現是否正常

前後端功能與各瀏覽器使用狀況測試