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就可以,其實連內容編輯也要RWD。因此太過花俏的RWD網頁,對一般行政業務人員來說,是很難進行編輯的。

7 

 

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

RWD當然也有對表格的處理方式,但是對於太過複雜的表格(例:產品規格),手機上也不方便瀏覽,我們建議直接做成PDF文件檔,在手機上可點開PDF檔後,用手指滑動放大查看資料。

8

 

網頁中的影片也會自己RWD嗎?

嵌入youtube影片在RWD網頁裡也是容易被網頁管理者忽略的,這個部份可以在網頁原始碼加上rwd的code,讓影片真正RWD以符合視窗寬度。

9

 

 

 

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

 

 

網頁設計洽詢 >