RWD 網站設計趨勢 如何實現「RWD 響應式網頁設計」? RWD 網站是否與手機版網頁相同 RWD 網頁的優缺點與限制

什麼是RWD響應式網站?

什麼是RWD ? 什麼是響應式網站?

手機版+電腦版，SEO 需要做二次好麻煩!!

做好的網站用手機瀏覽，圖片、文字變超小??

Responsive Web Design - RWD 響應式網站設計

1990 年代第一支 iPhone 的問世，不僅帶來智慧型行動裝置蓬勃發展，同時也改變人們上網的習慣，網際網路從此不僅僅只出現在辦公桌上，更是悄悄的移動到人們手上；如今行動裝置早已成為主流 web 瀏覽設備之一，而網站跟使用者的接觸也變得更加密切，因此 web 裝置相容性也相對的重要了起來，但以往傳統的網頁設計方式在手機或行機裝置上瀏覽卻經常出現以下問題：

網站在小尺寸裝置上不易被瀏覽，文字圖片常常過小，網頁的版面容易破版。
同一網站需製作電腦、手機二種以上版本，花費時間、成本相對提高。
各種設備螢幕尺寸眾多，無法針對單一解析度個別設計版面。
影響 SEO 搜尋引擎自然排序名次 ( 搜尋引擎目前已將網站是否支援 RWD 列入評分機制，有符合 RWD 規範之網站將會提高於搜尋引擎中的排名 )。

因此，於 2010 年時 Ethan Marcotte 在「List Apart」的報導中提出「響應式網站設計 ( Responsive Web Design )」新的網頁設計的基本思維，使網站本身能自已適應不同螢幕尺寸，每個使用者都能得到最佳的瀏覽環境。

W3C 更是贊同並提倡這種設計方式，並命名為「One Web」加以推廣；同時就站在 SEO ( 搜尋最佳化 ) 角度來看，單一網站的設計也等同只有一個網址存在，這樣「One URL」更是有利於 SEO，不會因為網站有不同裝置版面而被分散 SEO、廣告投放的成效及成本的增加。

符合 RWD 的網站在各種解析度下瀏覽時，會隨著螢幕大小自動縮放網頁。

那麼「RWD 響應式網站」到底是什麼東西呢?

簡單來說，我們先把各種不同螢幕尺寸的裝置電腦、平版、手機、電視...等，當成各種不同大小的杯子「容器」，接著我們再把網站的內容、圖片...等元素部份當成準備倒進容器的「液體」；當我們在瀏覽網站時，就像把「液體注入容器」那般，讓液體自已填滿容器的空間，自已完成內容排版配置；如果今天我們所用的容器較小時，多餘的液體 ( 資訊 ) 就不會被倒進這容器，讓我們只瀏覽必要、重要的資訊。

這樣的設計方式，讓網站內容、圖片可隨著裝置的螢幕尺寸改變，以一個網頁來適應所有裝置，讓每個使用者都能得到最佳的瀏覽環境，這就是 RWD 設計的基本思維。