ENsearch btn

2024-10-14
Eric Wang

RWD是什麼?RWD響應式網頁概念一篇解析

 main

 

科技使我們的生活變得更加便利,當最具機動性與可攜性的手機成為主流,傳統的電腦網站便日漸式微。你是否曾有過這樣的經驗,使用手機瀏覽網頁時發現它是呈現電腦版頁面,需要不斷地縮放才能看清內容,為解決這個問題,RWD網頁(即響應式網頁)出現了。


即便RWD網頁設計已經出來好幾年了,還是有很多人詢問什麼是RWD網頁設計?跟手機版網站有什麼不同?其實RWD網頁就包含了電腦版和手機版網頁。我們做了幾張圖,希望能用看圖說故事的方式,讓大家快速了解什麼是RWD網頁設計,以及它的相關特性。

 

RWD是什麼?響應式網頁設計基本概念說明

RWD,英文原文為Responsive Web Design。RWD的中文意思是響應式網頁設計(也有人稱之為回應式網頁設計) 。RWD響應式網頁設計是一種網頁前端技術的作法,在同一個網址中,網頁可因應不同裝置寬度(電腦、平版、手機)可自動產生不同的版面變化,讓網站在不同的裝置間保持正常運作。用白話文來說,RWD的意思是指透過瀏覽器寬度決定網頁版面呈現的一種網頁技術

 

Responsive Web Design (RWD) 這個詞是在2010年由Ethan Marcotte發明的術語。在2012年後逐漸被推廣,並在近幾年成為網頁設計的趨勢。技術上來說,RWD是在網頁中使用CSS語法來決定網頁版面的呈現方式,大部份是將網頁圖片或區塊以百分比的比例方式呈現畫面。RWD可以在不同的解析度或是不同的行動裝置設備寬度下,讓網頁自動改變畫面排版,提供使用者在跨裝置中得到最佳的瀏覽體驗。基於以上的優勢,許多網站也都開始使用RWD去設計網頁。然而這種設計方式比較複雜,同時要考慮網頁在不同裝置所呈現的方式,因此需要較多的時間去撰寫網頁與調整版面設計。

 

延伸閱讀AWD網頁是什麼?3招教你RWD與自適應網頁的差別!

 

以Apple官網為例:採用RWD響應式網頁技術(https://www.apple.com/tw/)在手機和電腦裝置上自動切換版面呈現

 

r apple

 

 

 

RWD與CSS的關係

RWD網頁會因應不同裝置自動產生版面變化,至於版面要如何配置則是透過CSS來完成。RWD使用CSS來設計版面,透過螢幕寬度條件來決定版面在不同裝置的呈現方式,我們做了一張圖幫助你更加了解兩者的關係:

 

從圖中可以看出,透過各個裝置螢幕寬度來指定背景色彩。以max-width 768px為例,這段語法用來指定螢幕寬度768像素以下的畫面背景色為藍色(blue)。

 

10

 

若是對此仍感到困惑,或者興趣大增想了解更多,現在網路上有許多免費的學習資源,如W3SchoolsMDN等等。

 

 

沒有RWD的網站,在手機和電腦會如何呈現網頁?

有RWD的網頁,版面配置會自動跟著桌電/筆電/手機不同的裝置自動調整,讓網頁符合各裝置的操作習慣。當你的網站沒有符合RWD響應式,你的潛在客戶如果用手機上網,可能看都不看就直接關掉網頁。

 

沒有RWD的網頁,在手機上會看到像左圖這樣,選單文字過小、無法清楚閱讀內容。必須不斷用手指頭在手機上不停地放大縮小,才能看清楚文字內容。

無RWD的傳統網站範例 >>

 

有RWD的網頁,就相當於是有手機版網站,在手機上看到的畫面則會像右圖,各區塊會依設定的比例做區塊切換,不需手指放大就可以清楚網頁文字

有RWD的網站設計範例 >>

 

none rwd

 

 

RWD和AWD有什麼差別?手機版網站又是什麼?

 

早年還沒有 RWD 時,為了在手機上也可以很好的閱讀網站,會另外製作專門在手機上可供閱讀的網站,就是我們常聽到的「手機版網站」——AWD自適應網頁設計。然而解決了不斷縮放頁面的惱人問題,卻也延伸出新的問題。因手機板和電腦版的網站不同,除使用者不易跨平台尋找資料、網站品牌形象觀感不一致外,也需要花費更多心力在網站維護上。

 

RWD網站成為主流後,AWD網站並非就這樣退居幕後,它還是有一定的市場。若你的網站具有資訊量大、分類多層的特質(如大型購物網站、入口網站),又或者是想特別針對手機板用戶設計、優化網站,這些情況下我們會建議使用手機版網站。

 

延伸閱讀:

 

 

先來一個簡單的圖說了解兩者的差異吧!

 

rwd and awd

 

很多人會把RWD和AWD網頁技術搞混,一個簡單的判別方式是觀察網址,RWD網站無論是電腦版還是手機板,皆是呈現www網址,AWD的手機版網站則會出現m開頭的網址。

 

RWD和AWD網頁在維護方式上也不太一樣,AWD不同網站版本是獨立的,以手機板和電腦版來說便需維護兩次,而RWD無論是手機或電腦都是在同一個網站,因此只需維護一次,相較之下更具效率。若是有SEO需求,分開兩個網站會使流量分散,內容也更有可能被判斷為重複而影響到排名,考量以上幾點,RWD會是比較好的選擇。

 

總結來說,AWD是較早的手機裝置網頁呈現的解決方案,而後面出現的RWD網頁跨平台技術,除了補足AWD的部份缺點外,也逐漸成為主流的跨平台技術。

 

 

RWD和AWD快速比較

 

 RWD

AWD

中英文全名

響應式網頁設計

(Responsive Web Design)

自適應網頁設計

(Adaptive Web Design)

出現年代

較近期

較早期

網址

電腦版和手機版都統一用www網址

依電腦版和手機版分成wwwm兩個網址

適用對象

企業網站、形象網站、品牌網站

架構龐大、工程複雜的系統型網站平台

對SEO的影響

流量集中、利於SEO排行 兩個獨立網址、易被判斷為重複內容影響排名

 

 

延伸閱讀什麼是AWD網頁設計?

 

 

RWD要怎麼做?3種常用的RWD開發架構

RWD網頁的開發通常是在Framework上進行開發,目前市場上有3種網頁設計最熱門的RWD開發工具,分別是Bootstrap, Foundation, Pure。這三種RWD Framework各有各的支持者,並沒有說一定要用哪種架構才能開發RWD,每間網頁設計公司各有自己習慣的RWD開發架構,你可以依自己的程式撰寫習慣和喜好進行選擇。以下簡單介紹這些開發工具的特點,供大家參考。

 

1.Bootstrap

Bootstrap是由Twitter開發,包含Javascript、CSS等...相關檔案,是自由度高、也是目前最多人使用的RWD開發工具。

 

2.Foundation

Foundation是由ZURB出品的RWD開發工具,以Mobile First為設計原則,適合以Mobile為優先考量的網站。

 

3.Pure

Pure是由Yahoo推出的RWD網頁開發架構,單純只使用CSS,適合大量客制化的網站。

 

延伸閱讀:RWD網頁設計公司怎麼挑?網站公司挑選守則五要點一篇整理!

 

 

RWD的常見問題

很多人以為RWD就是像電視一樣,一段影片可以在不同的電視尺寸播放。但實際上,網頁的組成可比電視影片複雜多了。一個影片只需要一個長寬比例,但一個網頁可能會有數十到數百個長寬比例,每個網頁元素(圖片、文字、表格)都有個別的長寬比例問題要在RWD裡面個別處理。因此畫面上的網頁元素越多,RWD工作的複雜度就越高。下面就讓我們來看一下,在網頁設計的過程中,RWD有哪些常見的問題需要克服。 

 

 

RWD如何在電腦和手機裝置間做切換?

RWD網頁設計與傳統網頁設計在外觀設計上就有很大的不同。為了適合不同尺寸的螢幕,RWD網站逐漸發展成像樂高積木一般區塊式的設計,這是為了較容易讓電腦版網頁各區塊切換成直式手機版的畫面。因此,在網頁設計的過程中,必須隨時考量網頁在各種RWD的情境下所需要因應的各種版面配置。

 

 RWD響應式網頁如何在手機及電腦中切換

 

 

 

如何確認目前的網頁有沒有RWD?

很多人誤以為網站畫面會自動等比縮小到手機就是RWD,其實這是沒有RWD的反應結果。如果你的網站文字在手機會小到看不清楚,那麼這個網站其實沒有符合RWD。

 

如何判斷你的網站有沒有RWD?如果你正在使用電腦,想了解這個網頁是否有RWD網頁,最簡單的方式就是檢視原始碼,點擊toggle device toolbar,看看網頁有沒有以下變化:

 

網頁版面在手機尺寸時會不會自動調整?

手機上的文字是不是清楚可讀?

版面配置會不會從橫式的自動調整為直式的?

 

如果這幾點的答案為「是」,那麼你的網站應該是有RWD的。

 

RWD網站範例HarvestOne品牌形象網站

 

縮放瀏覽器寬度就可以知道這個網頁有沒有符合RWD響應式網頁設計

 

 

在編輯網頁時,後台管理者也要懂RWD嗎?

由於網站後台編輯器本身並不具備RWD的編輯功能,後台編輯的作法也會跟著前台網頁畫面設計的呈現方式有關,因此後台維護人員也需要了解基本的RWD概念,在維護網頁內容的同時,也需要同時思考RWD網頁呈現的問題。對非網頁設計背景的維護人員來說,表格(table)是一種看得到也容易調整區塊的呈現方式,透過表格設定就可以控制RWD網頁區塊的比例和位置,讓你的文章內容符合RWD的規範。

 

RWD網站範例瑞獅安全帽官網設計 

 

在網站後台要如何做RWD響應式網頁的編輯

 

 

在RWD響應式網頁設計中遇到表格該怎麼處理?

由於手機畫面太小,表格很難在手機上完整呈現。一般來說,表格在RWD有兩種常見的作法。

1. 方法一:套用表格CSS樣式。可以採用表格RWD效果的方式,但不論用哪種作法,在手機小小的螢幕中都很難完整呈現。從另一方面來說,手機本來就不如電腦大螢幕可以用來瀏覽大量的資料,用手機只是用來快速查看資料。

2. 方法二:直接把表格做成PDF檔。對於太過複雜的表格(例:產品規格),建議直接做成PDF文件檔,在手機上可點開PDF檔後,用手指滑動放大查看資料。

 

PDF使用在RWD網站的範例GoodSky RWD網站設計

 

 

RWD響應式網頁遇到表格的處理方式

 

 

網頁中的影片會自動RWD嗎?

不會。網頁中的Youtube影片通常是採用iframe的方式嵌入的,預設都是採用固定寬度的方式呈現,因此若直接嵌入Youtube影片,通常在手機上只能看到出現一半的影片畫面。

這個時候,可以請網站公司額外加寫讓iframe自動RWD的CSS樣式,套用樣式後就可以讓嵌入網頁的youtube影片自動RWD,影片尺寸會跟著螢幕尺寸自動調整。或是在CMS網站系統安裝iframe外掛,讓影片自動RWD。

 

RWD網站範例中國附醫線上學習平台

 

影片要如何做好RWD響應式網頁

 

 

RWD響應式網頁設計案例

ys rwd

 

ucs cert rwd

 

 

forgrand rwd

 

 

RWD已成為現今網頁設計的主流,若是您有架站的需求,了解對方是否具有RWD技術是挑選網頁公司的重要關鍵。以上是RWD網頁設計的說明,希望能讓你對RWD響應式網頁設計有充份的了解。

 

 

更多網站設計要點歡迎參考:

SEO是什麼?SEO行銷入門基本概念全解析!

網站/網頁設計公司這樣挑不踩雷!5大原則教你找到專業設計公司

網站架設方式如何選擇?架設網站流程步驟、優缺點一篇比較

 

 

 

延伸閱讀:手機版網頁有哪些常見的設計範例?

延伸閱讀:客製網站和套版方案有何差異?談客製化網頁設計的3大優點

延伸閱讀:百大品牌怎麼做RWD響應式網頁?來看看大公司的手機版網站設計有什麼特色

 

 

 

 

* 歡迎分享這篇文章,分享時請加入文章來源:凱士網頁設計公司

 

 

 

網站設計服務諮詢

為什麼推薦台中網頁設計公司凱士數位?位於台中的凱士相對有機會接觸到各種不同的產業面向,擁有各種產業的網站設計經驗,幫助企業提升網路品牌形象,建立良好的使用體驗。如果您有形象網站、企業網站、客製化網頁、網站改版相關需求,歡迎聯絡我們。

 

您可以直接填寫諮詢表單;撥打諮詢電話 04-22210688;或加入凱士LINE由專人與您聯繫。

line qrcode

 

 

 

 

 

cadiis

Eric Wang

凱士網頁設計公司 專案顧問 Eric,擁有設計、理工、管理等跨領域背景,樂於和不同領域的專業工作者進行分享與討論。在專案工作外,同時也兼任大學行銷系業界講師及企業內訓課程講師,長期致力於「網頁設計白話文運動」。

 

 

 

好的形象網站設計,可以幫助公司提升品牌形象與企業價值,透過清楚的網站架構與視覺設計,造就良好的使用體驗與企業形象。

 

需要網站設計服務嗎?

凱士為您設計製作優質網站

形象網站、公司網站、企業網站、
及各類型客製化網站系統平台

 

立即填表諮詢

bottom contact

line