跳到主要內容區塊

首頁 服務|方案 全方位服務 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
選擇偉瑟
5大理由
政府肯定
關於偉瑟
成長歷程
專業團隊
服務︱方案
全方位服務
網站設計
RWD 設計
網站代管
關鍵字廣告
網站優化
無障礙網站設計
成功案例
政府網站
學校網站
企業網站
手機網站
系統網站
研討會網站
關鍵字網站
經驗分享
電子商務技術
網際網路產業
客服︱會員
常見問題
會員方案
加入會員
會員登入
忘記密碼
人力資源
職缺公告
薪酬 | 福利
外包︱合作
聯絡我們
全省聯絡方式
線上詢價表單
業務簡報
客戶登入
線上demo
投標合作
成功案例
合作說明
演講邀請
講師介紹
演講邀請