什麼是RWD?7步速成響應式網頁設計

RWD教戰守則|什麼是RWD?7步速成響應式網頁設計

所有文章, 網頁設計知識

什麼是RWD?7步速成響應式網頁設計

隨著大家使用手機行動上網時數增加,手機版網頁的易讀性日趨重要,但網頁設計方式百百種,RWD、AWD、傳統網頁設計到底怎麼選?

可適應多種裝置的「響應式網頁設計 RWD」是如何做到的呢?成立形象網站,RWD 是最好的選擇嗎?本文深入介紹「響應式網頁設計」特點,並加以比較 RWD、AWD、傳統網頁設計之差異,迅速認識所有網站搭建模式,官網架設不煩惱!

📚延伸閱讀:響應式網頁設計是什麼?7種網頁設計種類、費用完整解析!

📚延伸閱讀:『新手必看』2022年8個免費架設網站平台全攻略!

導引目錄

RWD 是什麼?

RWD 英文全稱「Responsive Web Design」,中文譯為「響應式網頁設計」、「對應式網頁設計」,透過 CSS 之媒體查詢,針對螢幕大小、解析度不同之裝置,設定對應版面,如:文章字體大小、行距等,非針對單一裝置撰寫對應的網頁代碼,而是將電腦、平板與手機裝置共享 CSS 代碼,故能達到同一網址、同一網站內容,可因應各類裝置,呈現最合宜之網頁排版,提供電腦、平板與手機全裝置的最佳使用體驗。

由於「響應式網頁設計」在所有裝置使用之代碼相近,在確保全部介面的使用者所獲取之網站內容相同外,有助於無網站維護人員之商家,後續更新與維護形象網站。

網頁設計基本觀念之多少?網域、網址、HTML、CSS

RWD-網域

網域


官網在網路上的安家地址。

RWD-網址

網址


網站內含不僅一網頁,每個網頁的專屬名稱。

如同房屋中有家門、車庫之概念。

RWD-HTML

HTML


中文譯為「超文字標示語言」,標示出網頁中標題、字體大小、超連結等。

猶如標記出主臥、廁所、廚房等結構之房屋設計圖。

RWD-CSS

CSS


中文譯為「階層樣式表」,CSS 是將 HTML 標好之內容做裝飾。

可類比為:房間之床、裝潢等室內設計。

為什麼使用「響應式網頁設計」?

什麼是RWD?為什麼使用響應式網頁設計

傳統網頁設計根據使用裝置撰寫網址,即:手機為「https://m.官網名稱.com」、平板為「https://t.官網名稱.com」、電腦「https://d.官網名稱.com」,由伺服器判別使用者裝置為手機、平板或電腦後,再給予對應之網址,由於網址不同,但網站內容相近,易被 Google 認定為重複內容,從而影響 SEO 排名

「響應式網頁設計」僅單一網址,不論是手機、平板或電腦等裝置,判斷使用者裝置倚靠 HTML 程式語言,而非伺服器避免多個網址導致官網權重被分散,影響搜尋結果排名,對 SEO 較為有利,且採用同套 CSS 減少網站後續維護成本

📚延伸閱讀:寫好文章7大要點,靠部落格行銷賺錢不是夢

1. RWD 流動排版:有助用戶體驗


「響應式網頁設計」最初設計網頁時,即針對螢幕大小、解析度,設定對應的區塊長寬高,確保區塊會隨螢幕大小,自動由電腦版上多欄位呈現,轉換為適合手機閱讀的單一欄位。

RWD流動排版

以 RWD 做網頁設計能讓手機用戶點進網站後,自動展現僅需上下滑動,不需左右拖曳之頁面

而當顧客採用電腦進入網站時,網頁亦以上下滑動為主,整體所呈現資訊雖與手機版相同,但每次滑動可看到的欄位內容更為豐富有助於不同裝置的用戶體驗

2. 採 RWD 架設網頁,利於 SEO:網頁權重不分散


依裝置不同設定網站網址的傳統網頁設計方式,如:

手機:「https://m.官網名稱.com」

平板:「https://t.官網名稱.com」

電腦:「https://d.官網名稱.com」

由於內容一致,但網址不同,Google 爬取 3 個不同網址後,發現所提供給使用者的資訊較無差異,從而認定該網站為「重複內容」!

Google 搜尋中心之說明文件「避免建立重複的內容

透過在多個不同網址內放置相同內容之方式,使網站能曝光在多個不同搜尋結果中,使用者點入後發現無法獲取想要的資訊,而全為相近內容,致使使用者的搜索體驗不佳,Google 會認定網站試圖操縱搜尋結果頁面之排名,以利其獲取更多流量,進而降低該網站的 SEO。

傳統網頁設計方式,因不同裝置所提供的網址不同,Google 會將「https://m.官網名稱.com」、「https://t.官網名稱.com」、「https://d.官網名稱.com」等網頁,認定為相同網頁複本,僅從中選取一個網址為「標準」版本,作為使用者檢索時的主要推薦其他網址則被判定為「重複」版本,並減低複本被檢索之可能性。

傳統網頁設計模式倘若想指定自家網站,則可依 Google 搜尋中心之說明文件「標準網址」之建議:嘗試網頁程式語言中加入「rel=”canonical”」設定某一個網址為「標準」版本,加以標準化網站,可將某一網址,設為標準化網站,意味其他版本的搜尋頻率會被降低,僅有單一網址之「響應式網頁設計」設計方式則可以避免此類問題,確保網頁權重。

現今大家都在談論的 SEO 究竟是什麼?網路行銷不可不知之利器|SEO:備好關鍵字工具,掌握網路流量密碼|3種SEO軟體推薦

響應式網頁設計不可不知:斷點 ( Breakpoint )、媒體查詢 ( Media Queries )

斷點 ( Breakpoint ):自行設定幾個螢幕解析度或網頁寬度,當用戶所使用裝置之螢幕解析度低於設定時,網站佈局會隨之改變。此類自行設定的螢幕解析度或網頁寬度,即為斷點 ( Breakpoint )。

媒體查詢 ( Media Queries ):CSS 代碼中一個類別,使網頁能按設定之斷點,呈現對應的網頁佈局,即為媒體查詢 ( Media Queries )。 例:當螢幕解析度大於 1024px 時,認定其為電腦裝置,網頁佈局最豐富,欄數最多。

網頁設計方式比較:RWD、AWD、傳統網頁設計

提到網頁設計方式,總會出現傳統、RWD、AWD 等名詞,但這些網頁架設模式的差異是什麼呢?瞭解 「響應式網頁設計」 的特點,那 AWD 跟傳統網頁設計具體是什麼呢?下將針對 AWD、傳統網頁設計作一簡介,以利選出最適合的網頁架設方式:

1. AWD


AWD 英文全稱「Adaptive Web Design」,中文譯為「自適應網頁設計」「自適式網頁設計」等,與 RWD 同為適應不同裝置之網頁排版,所發展之網頁設計方式。

RWD vs AWD:手機開啟AWD網頁
RWD vs AWD:電腦開啟AWD網頁

博客來網址統一為:https://www.books.com.tw/

(一) 使用 AWD 網頁設計,各裝置之網頁佈局、排版不同

「響應式網頁設計」在撰寫網頁時,所有裝置皆採同套 CSS,故所呈現的樣式、資訊相同,AWD 則會針對不同裝置撰寫對應的一套 CSS,使各類裝置呈現之頁面與資訊有所差異,即針對手機撰寫一套 CSS、平板採另一套 CSS、電腦又為另一套 CSS。

(二) AWD 網頁設計速度較 RWD 快

因 AWD 在使用者點入網址時,會先啟動程式語言中判別裝置為手機、平版或電腦,確認裝置後,展現對應的 CSS 頁面及網站資訊,相較於「響應式網頁設計」確認解析度後,調整所有資訊於一個頁面中,AWD 的網站速度較快

(三) AWD 開發及維護成本較高

由於 AWD 不同裝置有各自使用的 CSS,有任何內容更新時,可直接針對各裝置對應之 CSS 加以增減,比起「響應式網頁設計」易查找對應裝置的修改位置,當有資料要更新時,因不同裝置的網頁佈局不同,故修改內容易較多,維護成本較「響應式網頁設計」高,且伊始就架設多套 CSS,開發成本亦高

同時若考量 SEO,不響分散網站權重,則須請工程師將 3 套 CSS 合在一個網址「官網名稱.com」中,即多一筆 SEO 的前置作業費用。

2. 傳統網頁設計


傳統網頁設計無法隨著裝置不同,跳轉最合適之網站頁面,若僅架設電腦版官網則手機用戶觀覽時不便利,故傳統網頁設計針對不同裝置分別架設網站:「https://m.官網名稱.com」用於手機、「https://t.官網名稱.com」提供給平板用戶、「https://d.官網名稱.com」為電腦用戶。

re usewb fbm inm 6

將 Facebook 手機版網址,分享後,透過電腦開啟,網頁佈局仍維持「手機版佈局」,不利電腦用戶瀏覽。

RWD vs 傳統網頁設計差異:電腦開啟手機版網址

Facebook 手機版之網址即為 https://m.facebook.com

(一) 採傳統網頁設計,各裝置之網址、佈局、排版不同

「https://m.官網名稱.com」「https://t.官網名稱.com」「https://d.官網名稱.com」各自的網址不同,故在 Google 爬取時會預先認定為不同網站。

而在網頁設計時,從網址到網頁佈局,都是針對單一裝置撰寫,故在網站呈現上不同。

(二) 傳統網頁設計載入速度較 RWD 快

傳統網頁設計同時提供給伺服器多個頁面、多個相似網址,交由伺服器判別裝置後,跳轉對應之網址,故其網站