首頁 服務|方案 全方位服務 RWD自適應式網頁設計

何謂RWD自適應式網頁設計?

自適應式網頁設計的主要技術

RWD 自適應式網頁設計的主要核心技術即是透過 Html5+CSS3 中的 media queries,根據不同類型的媒體條件設置相對應的樣式表,讓網頁內容可以自動依照使用者的瀏覽裝置大小而自動調整,讓使用者能自在的閱讀網頁。

自適應式網頁設計的優點

貼近行動裝置使用者

隨著行動裝置使用及行動上網普及,過時的老舊網頁已無法符合行動裝置的瀏覽顯示,降低了行動用戶上網瀏覽網站的意願;自適應式網頁設計的最大目的,就是讓不同行動裝置的用戶在瀏覽網頁上,都能得到最佳的顯示效果,抓住行動用戶的目光。

開發成本、時間及維護比APP低

為適應各行動裝置,APP 必須開發 iOS 版及Android 版,單一個版本的開發費用就需數十萬元起跳,從開發到審核上架花費的時間相當長。完成後,更要不定期針對新版本作測試及更新,才能運作順暢,且一旦更新,又須重新審核上架,這是永不結束的輪迴。

網站只有一個URL利於分享

不論 APP 或手機版分享網址,若偵測到是手機開啟,分享的網址通常是手機版網址,若使用電腦開啟,不見得會轉回電腦版;自適應式網頁無論是使用手機或電腦,分享出的都是同一網址與內容,不分散社群分享數,更增加流量及停留時間,以提高搜尋排名。

增加搜尋引擎曝光度

隨著行動上網族群的增加,搜尋引擎也早已優化了搜尋功能,提供最佳的行動上網使用經驗。當客戶使用手機搜尋資訊時,搜尋引擎會優先將響應式網站排名提前,如果您的網站使用的是自適應式網頁技術,網站能見度將會更高,比其他競爭對手更具優勢。

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

比不上手機版網站

自適應式網頁設計必須考慮不同裝置上的運作,為了讓程式碼適用不同裝置,必須捨棄某些複雜的功能和介面,難免比為了專為手機版而設計的網站來得遜色。

載入速度問題

由於所有裝置共用同一份 HTML 及 CSS,不論是透過電腦、平板或手機上,因為下載的是同一個檔案,都會一併讀取其他裝置設計的內容,難免影響頁面讀取速度。

時間花費

開發自適應式網站是一項耗時的工作,若為了滿足各個裝置瀏覽,需要花大量的時間進行網站的設計及測試。

IE 8以前版本無法正常瀏覽

自適應式網頁設計是使用 CSS3 中的 media queries 來調整版面,但 IE 8 等較舊的瀏覽器並不支援 CSS3,會無法顯示這類型的網頁。

什麼樣的網站適合RWD?

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

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

設計流程 RWD 網站 一般網站
接觸
(業務階段)
當客戶指明 RWD 設計,須讓客戶充分瞭解RWD 設計的優缺點 開發與接觸有網站設計需求的客戶
需求
(業務+企劃階段)
除了既有的需求分析之外,必須確認此網站專案是否適合採用 RWD 設計,如不適當,需儘速與客戶溝通,尋找其它方案滿足客戶需求 針對客戶需求製作需求分析,透過需求分析了解網站相關設計及功能,分析完成後,訂定詳細規格表與預期工作天數
規劃
(企劃階段)
除了整理網站相關的資料,需與客戶仔細核對內容企劃資料及確認所有網站細節,降低後續修改風險 整理出網站企劃書(網站架構圖、網站草圖等)以及後端功能清單等等相關資料
設計
(設計階段)
客戶需求外,亦需考量 RWD 網站各元素寬度的彈性,視覺元素處理上越單純,在頁面製作中,越能達到正常流動或縮放。 視覺設計,客戶確認定案視覺設計,轉化成實體網站
上線 RWD 應用主要多於前端設計,對於後端開發引響不大 網站動態語言及後端程式開發
Back
網站企劃 網站設計 網站代管 網站行銷 無障礙網頁
分類檢索
資安|個資 網站優化 RWD網站 關鍵字廣告 演講|訓練
選擇偉瑟
  服務︱方案
  成功案例
  經驗分享
  客服︱教育
  人力資源
  聯絡我們
  業務簡報
  投標合作
  演講邀請