RWD網頁,您瞭解有多少
歸功於智慧型手機的普及,讓 RWD 網頁設計技術在目前已經越來越普及,RWD網頁設計這樣的技術,在使用者的體驗上已經是扮演著非常重要的角色,但是我們常常都不會發現這樣的設計,而這也是 RWD 網頁設計的特點,總是能提供適合使用裝置的網頁大小,如果你還是不了解 RWD 網頁設計,就讓我們來認識RWD 網頁設計有什麼優缺點!
目錄
RWD 網頁設計與行動裝置的關係
RWD 網頁設計是開發網頁的其中一種方式,也可以稱為「響應式網頁設計」,主要是提供可以在不同裝置使用時,呈現符合該裝置螢幕規格的網頁大小,不管螢幕多大多小,RWD 網頁設計都可以隨之調整。延伸閱讀:什麼是RWD響應式網頁設計?

RWD 網頁設計 VS 動態服務 VS 獨立網址
RWD 網頁設計
動態服務 在網址不變的情況下,根據伺服器對於裝置的判斷,對各種不同的裝置,提供不同版本的網頁 HTML,各裝置所提供的內容可獨立進行調整。獨立網址
動態服務
在網址不變的情況下,根據伺服器對於裝置的判斷,對各種不同的裝置,提供不同版本的網頁 HTML,各裝置所提供的內容可獨立進行調整。
獨立網址
為每個不同的裝置提供專屬的網址、HTML,運用 HTTP 重新導向以及 Vary HTTP 標頭,將各種裝置導向適合的網址,像是在行動版網址加上“m.”就是常見的獨立網址形式。
RWD 網頁設計 | 動態服務 | 獨立網址 | |
---|---|---|---|
網址保持不變 | 是 | 是 | 不是 |
HTML 保持不變 | 是 | 不是 | 不是 |
製作難度 | 版面需要隨尺寸變化進行調整,執行上難度較高 | 單一尺寸可分開製作,執行上較為容易 | 單一尺寸可分開製作,執行上較為容易 |
優點 | 1. 僅維護一個網站,可降低維護成本 2. 利於 SEO 操作(Google推薦) | 1. 獨立開發兩種裝置,操作介面更貼近使用裝置 2. 同網址可避免 SEO 問題 | 獨立開發兩種裝置,操作介面更貼近使用裝置 |
缺點 | 1. 程式碼較多,網站載入時間較長 2. 多裝置共用網頁,不適合較複雜的功能、介面 | 1. 需要維護兩組程式碼,維護成本較高 2. 裝置導向複雜,會有出現錯誤的風險 | 1. 需要維護兩組程式碼,維護成本較高 2. 不利於 SEO 操作 |
RWD 網頁設計優點分析
RWD 網頁設計、動態服務、獨立網址,這三種不同的行動版網頁建置方式都有各自的優點,但是為什麼 Google 會建議使用 RWD 網頁設計呢?除了可以隨著裝置調整頁面之外, RWD 網頁設計同時也有其他的優勢喔!
- 避免重複內容:重複內容對於搜尋引擎來說是一大問題,容易影響到網頁在搜尋引擎上的排名,運用 RWD 網頁設計就可以徹底避免因為版本差異,而產生的重複內容。
- 網址不須改變:網址是搜尋引擎認定網頁的方式,不同的網址就會被視為不同的網頁, 使用 RWD 網頁設計網址就不會像是獨立網址的方式,同樣的網頁產生兩個以上的網址。
- 開發成本較低:相較於其他兩種行動版網頁各版本都要單獨開發,RWD 網頁設計只需要開發一次就可以適用於多種裝置,在管理、維護也僅需要針對一個版本即可,在整體開發成本上 RWD 網頁設計相對是較低的。
- 使用者體驗:運用動態服務與獨立網址的方式來建置網站,都有可能會出現裝置與網頁尺寸不合的狀況,但是 RWD 網頁設計完全不用擔心,讓使用者在瀏覽網站時可以避免這樣的問題。
RWD 網頁設計基本構成
RWD 網頁設計漸漸的成為主流的網站建置方式,這個技術概念起源於2010年5月,由知名網頁設計師 Ethan Marcotte 首次提出。主要的核心是使用 CSS 的技術,來達到相對尺寸的變化與版面的調整,讓網頁所呈現的樣式可以符合所使用的裝置。
實際上的運作方式,會針對不同的尺寸來為網頁設定中斷點,由大到小將網頁的尺寸劃分成許多區間,每個區間都會設定適合的版面,隨著瀏覽器的尺寸變化時,網頁就會套用不同的 CSS 設定,讓版面隨之調整,就能夠完美的符合裝置與瀏覽器的大小。
RWD網頁設計
在行動裝置普及的現在,RWD 網頁設計已經佔有一席之地,在各個面向也都有突出的優勢存在,即使相較於其他方式還是有缺點的存在,但這些缺點可以說是瑕不掩瑜;在這樣的時代潮流下,艾格創意設計也選擇 RWD 網頁設計作為主要技術,來客戶設計網站,並提供精準網頁設計報價費用。若有任何網站設計相關的需求,就讓艾格創意設計為您提供最專業的建議吧!