先前電商筆記有整理一篇文章 〈什麼是 RWD 響應式網頁設計？〉，以影片的方式讓大家快速瞭解 RWD 網頁的呈現，而本篇我們整理了  developers.google.com 所提供的友善行動網站的相關資訊，讓大家更了解 RWD 網頁設計的優勢。

RWD 回應式網頁設計是 Google 建議採用的設計樣式 link

RWD 的設計能讓瀏覽器配合裝置的寬度調整網頁大小和縮放比例。

如果未提供中繼檢視點元素，行動瀏覽器會預設以電腦版螢幕的寬度來轉譯網頁 (雖然因裝置而異， 但一般約為 980px)。行動瀏覽器隨後會嘗試加大字體， 並且選擇將內容縮放至符合螢幕的大小，或者僅顯示與螢幕大小相符的部分內容，讓內容更容易閱讀。 

上圖左邊的部分，是直接將電腦版的畫面等比縮小至符合手機的螢幕，文字與圖片因此過小，導致閱讀上的困難；而右邊的部分，則是有採用回應式的網頁設計，針對手機的螢幕大小，自動將版面做調整，讓內容容易閱讀，才是符合行動友善的網頁設計。

為什麼要使用回應式設計？

• 使用者可以使用單一網址，以更輕鬆的方式分享及連結到您的內容。
• 可協助 Google 的演算法為網頁正確指定索引編列屬性， 不需要發送訊息指明既有的相對應電腦版/行動版網頁。
• 無需維護多個內容相同的網頁，減少工程師的處理時間。
• 降低行動版網站發生常見錯誤的機率。
• 使用者無需重新導向即可瀏覽最適合裝置大小的畫面， 縮短載入時間。此外，根據使用者代理程式執行重新導向容易出錯， 可能導致網站的使用體驗大打折扣 (詳情請參閱 「偵測使用者代理程式時遇到的問題」一節)。
• Googlebot 檢索您的網站時可節省資源。 對於採用回應式網頁設計的網頁， 任何 Googlebot 使用者代理程式只要檢索這些網頁一次 (不需依據不同的使用者代理程式多次反覆檢索)， 即可擷取所有版本的內容。提高檢索效率可間接協助 Google 為網站中的更多內容建立索引，並確保擷取的內容是最新版本。

資料來源 Google Webmasters > Mobile Friendly Websites

讓 Responsive Web Design，成為您行動優化的第一步 

也許有些經營者會想說， 已經有了獨立的行動版網頁，還需使用 RWD 的設計嗎？
上述列出的問題，其實多數就是針對將電腦版與行動版分開的比較，當一個網站擁有電腦版與行動版，表示各自有對應的網址，不同網址的流量數據就會分開統計，有如上述提到的，同樣的頁面資料就需要上兩次，分別上給電腦版和行動版，網站維護的成本相對來說是比較高的。

然而經營購物網站，勢必要加強行動版的網頁設計，當我們花了廣告預算替網站導入流量時，卻因為網頁設計導致使用者的離站比例高，這是很可惜的事情。而 Google 也在其行動友善網站的頁面上指出：「回應式網頁設計是 Google 建議採用的設計樣式」。 

365SHOP 品牌電商平台，設計的購物網站，也都是使用 Responsive Web Design(RWD) 的方式，同樣也在意行動版網頁的品質嗎？快來優化您的網站吧！ 

若您對品牌購物網站有興趣，歡迎你透過以下方式與我們聯繫：
 365SHOP官網線上填單 ｜  Facebook粉專私訊
喜歡我們的文章嗎？搶先到網站下方訂閱電子報。