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

 

為什麼網站一定要RWD?

有RWD的網頁,版面配置會跟著裝置自動調整,並且符合各裝置的操作習慣,所以很多人把RWD網頁直接叫手機版網頁。當你的網站沒有RWD,你的潛在客戶如果用手機上網,可能看都不看就直接關掉網頁。

 

 

什麼是RWD(Responsive Web Design)?

簡單的說,就是同一個網頁,因應不同裝置寬度(電腦、平版、手機)而有不同的版面變化。

1

 

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

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

2

 

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

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

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

3

 

如何知道這個網頁有沒有RWD?

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

4

 

網頁選單在RWD中將如何呈現?

為了在手機上也能呈現「選單」的操作方式,主選單到了手機版就變成漢堡選單的樣式,點擊後會展開網站架構。

5

 

RWD網頁中的版面該如何取捨?

許多電腦版上漂亮的背景,到了手機版當然就要適度簡化和隱藏,才不會在手機小小的螢幕塞滿了雜七雜八的視覺訊息。

6

 

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

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

7 

 

RWD網頁中的表格該怎麼處理?

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

8

 

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

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

9

 

 

 

想跟我們談談你的網頁設計構想嗎?

 

 

網頁設計洽詢 >  或撥 04-2221-0688