Responsive Web Design
Optimized for viewing on different types of devices, screens and resolutions.

隨著行動裝置的普及化,現在電腦使用者瀏覽網站,大部分都來自智慧型手機或平板電腦,而且比例還在不斷上升中,如果你的網站沒有考慮到使用行動裝置的處理,當使用者用手機打開你的網站時,只能看到很小的圖片和一大堆擠在一起的文字,幾乎是無法閱讀,而且還必須使用手指將畫面放大才能看到部分內容。如果你的網站剛好是使用 FLASH 動畫來製作,那整個畫面就是一片空白,什麼都沒有,情況真是慘不忍睹!試問問,使用者還會繼續停留在你的網站上嗎?

因此,網頁設計也逐漸發展出一種全新的排版技術:RWD (Responsive Web Design)。

RWD (Responsive Web Design)

網頁設計又稱為 "自適應網頁設計" 或 "響應式網頁設計" ,與一般行動版網站最大的不同,在於它不需要另外獨立製作行動版網站,而是讓網站自動去適應行動裝置,讓網站自己可以在各種智慧型手機、平板電腦上調整外觀、尺寸、位置、樣式,不論電腦使用者從哪種行動裝置來開啟網頁,都可以得到最佳的瀏覽效果。

RWD (Responsive Web Design) 網站的優點

  • 支援任何裝置

    這是 RWD (Responsive Web Design) 最大的優點,也是它的最重要目的。智慧型手機螢幕尺寸愈來愈大,規格愈來愈多,透過 RWD (Responsive Web Design) 可以從此不用擔心不同螢幕尺寸所帶來的各種問題,讓你的網站內容可以自動符合裝置螢幕的尺寸來進行延展、伸縮、變形、移動,原本在桌上型電腦的寬螢幕上,產品圖片是橫向水平排列,遇到較小的手機螢幕時,產品圖片會自動變成縱向垂直排列,讓使用者可以輕鬆便利的瀏覽網站的產品資訊。不僅只是圖片,網站的 LOGO、選單或文字內容等,全部都會自動重新排列,找到最合適的呈現方式。還有,如果遇到電話號碼或 E-mail 信箱,手指輕輕一按,就能立即撥打電話或寄發信件。
  • 方便網頁閱讀

    不論你的網站是透過桌上型的電腦來瀏覽,或者是用智慧型手機、平板電腦來瀏覽,RWD (Responsive Web Design)已經把所有的網站內容自動重新編排過,所以使用者不會再看到密密麻麻的字,更不需要用手指來把畫面放大,就能輕鬆順暢的瀏覽網站內容。透過 RWD (Responsive Web Design) 的智慧型編排技術,還可隱藏不需要在手機上呈現的內容,只把最重要的資訊呈現給使用者。
  • 降低開發成本

    以往為了製作手機版網頁,必須要另外開發一個手機專用的網站版本,加上判讀程式,如果使用者是來自手機,就把使用者引導到手機版網站。一個網站有兩個版本,自然就會增加開發費用與維護成本。
  • 提升搜尋排名

    如果行動版網站是獨立版本,具有不同的網址,就會可能分散網站在搜尋排名上的排名,因為同樣的內容卻存在著兩個網址,那麼搜尋排名計分也就被分攤。而且 Google 已經在官方文章 "Recommendations for building smartphone-optimized websites" 中發表,Google 比較建議使用 RWD (Responsive Web Design) 網站來處理行動版網站。

Responsive Design Web