什麼是RWD響應式網頁設計？圖解說明讓你3分鐘搞懂手機版網站

 

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

 

 

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

  

 

 

 

 

 

 

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

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

 

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

 

 

 

 

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

 

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

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

 

 

 

 

 

如果沒有RWD，網頁畫面會有什麼差別？

 

 

 

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

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

 

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

 

 

 

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

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

 

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

 

 

 

 

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

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

 

RWD網站範例：GoodSky形象網站設計

 

 

 

 

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

在後台編輯時，嵌入youtube影片也是不會自動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響應式網頁設計有充份的了解。

 

延伸閱讀：RWD網頁設計時代，有哪些手機電腦相通的設計形式？

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

 

 

＊ 歡迎分享這篇文章，分享時請加入文章來源：凱士網頁設計公司

 

 

 

 

 

 

 

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