ENsearch btn

2020-06-01
Eric Wang

什麼是RWD響應式網頁設計?圖解說明讓你3分鐘搞懂

RWD網頁設計(又稱響應式網頁設計)已經出來幾年了,但常常還是有客戶詢問什麼是RWD網頁設計?因此我們做了幾張圖,希望能用看圖說故事的方式,讓大家快速了解什麼是RWD網頁設計,以及RWD網頁設計的特性。

 

main

 

什麼是RWD響應式網頁設計?RWD是什麼意思?

RWD,英文原文為Responsive Web Design。RWD的中文意思是響應式網頁設計(也有人稱之為自適應網頁設計,或是回應式網頁設計) 。RWD響應式網頁設計是一種網頁前端技術的作法,透過瀏覽器寬度進行版面控制,讓網站在不同的裝置間保持正常運作。

 

用白話文來說,RWD的意思是指在同一個網址中,網頁可因應不同裝置寬度(電腦、平版、手機)可自動產生不同的版面變化的網頁技術

 

 

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

  

 

 

RWD響應式網頁設計就是一個網頁可以同時順暢呈現在多個不同尺寸的電腦及行動裝置上

 

 

 

 

為什麼網站一定要RWD?RWD響應式網頁就是手機版網頁?

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

 

有很多人直接把RWD網頁叫手機版網頁,但其實手機版網頁和RWD網頁是不一樣的東西。單純的手機版網頁是只能在手機上正常運作,把手機版網頁的網址傳到電腦上,就會看到比例不一致的畫面。而RWD網頁則沒這個問題,在RWD網頁所使用的網址,在不同的裝置中都可以正常顯示。

 

 

 

 

採用RWD響應式網頁設計的6個常見問題及範例介紹

 

RWD響應式網頁如何在電腦和手機裝置間做切換?

為了適合不同尺寸的螢幕,必須將網頁的版面設計成可以像樂高積木一般自動變換區塊尺寸和位置,橫向排列自動變成直向排列。也因此,RWD網頁大部份就會長得像樂高積木,成為塊狀的版面設計。

 

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

 

 

 

如果沒有RWD,網頁畫面會有什麼差別?

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

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

 

RWD網頁設計範例博來科技企業形象網站

無RWD的傳統網站範例雷祥生技企業網站

 

 我們來看看沒有RWD響應式網頁的網站在手機會長什麼樣子?

 

 

如何知道這個網頁有沒有符合RWD規範?

要判斷這個網頁是不是RWD網頁,最簡單的方式就是直接改變瀏覽器寬度,看看它的版面會不會在特定尺寸有所變化。

 

RWD範例HarvestOne品牌形象網站

 

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

 

 

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

其實後台編輯的網頁不會自動RWD。不過,透過簡單的rwd css code還是可以讓你的文章內容符合RWD的規範。也因此,設計得太過花俏的網頁,對於日後的編輯維護會有困難。

 

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

 

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

 

 

 

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

雖然網路上也有許多RWD表格範例可以實現Table表格也支援RWD自適應效果,但其實表格很難在小小的手機中完整呈現。對於太過複雜的表格(例:產品規格),建議直接做成PDF文件檔,在手機上可點開PDF檔後,用手指滑動放大查看資料。如果是有資料庫的產品列表,則可以寫成網頁程式自動讓它RWD。

 

RWD範例例GoodSky形象網站設計

 

 

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

 

 

網頁中的影片要如何讓它也RWD?

在後台編輯時,嵌入youtube影片也是不會自動RWD的,要在網頁原始碼加上RWD樣式碼,才讓影片真正RWD以等比縮放的方式符合視窗寬度。

 

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

 

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

 

 

RWD要怎麼做?介紹3個熱門的響應式網頁設計開發工具

 

RWD網頁的開發通常是在Framework上進行開發,目前市場上有3種最熱門的RWD開發工具,分別是Bootstrap, Foundation, Pure。以下簡單介紹各種開發工具的特點,供大家參考。

 

1.Bootstrap

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

 

2.Foundation

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

 

3.Pure

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

 

 

 

 

以上是RWD網頁設計的說明,希望能讓你對RWD響應式網頁設計有充份的了解。

 

延伸閱讀:10個RWD網頁範例,讓你了解「響應式網頁設計」的特點

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

 

 

想詢問網站設計服務嗎?

如果您有形象網站、企業網站、客製化網頁、網站改版相關需求

歡迎聯絡凱士網頁設計公司:立即填寫諮詢表單,或直接撥打電話 04-22210688

 

 

 

 

 

cadiis

Eric Wang

凱士網頁設計公司 專案經理 Eric,擁有設計與理工背景,擅長和行銷、業務、管理、資訊、設計等專業人員進行跨領域溝通,樂於分享與討論,長期致力於網頁設計白話文運動。

 

 

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

 

需要形象網站設計嗎?

凱士為您設計優質形象網站
以及客製化網頁

 

立即填表諮詢

想進一步了解網頁設計服務?