目錄

什麼是RWD?

全名是 Respective Web Design,適應性網頁設計。是一種網頁設計方法,能夠自動跟隨不同裝置的尺寸調整網頁版面和大小,調適成最適合使用者瀏覽的面貌。這可以在不改變網站結構、不需要另外寫不同版本的程式下完成。

Google 談到如果準備建立適合透過行動裝置瀏覽的網站,請選用響應式網頁設計。在選用第三方網站軟體(CMS,包含WordPress ) 的範本或主題來建立網站,可以先確認這些主題是否對行動版友善(你可以透過介紹內文找尋 “Respective”、”回應式”、”響應式”、”行動”等字眼)。

定義-響應式網頁設計(RWD)是什麼意思?

為什麼要使用 RWD 設計

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

簡單來說,運用 RWD 網頁設計,對你的好處:

  1. 減少你和你的技術團隊工作負擔,不用同時負擔電腦版、手機版網站(或是各種零碎行動裝置版本的網頁)
  2. 寫一個版本就能跨裝置使用。
  3. 降低使用者載入頁面的錯誤。
  4. 加快使用者載入頁面的速度。
  5. Google可以減省運行時的資源,互相受益,Google更樂意提升你的網站排升順序。 上架階段只需要新增一次動作即可適用各種裝置,減少重工機會,增加工作效益。
如果你採用 WordPress 設計網頁,Google 認為這將對你的 SEO 更有幫助。

確認您現有的 WordPress 網站適合透過行動裝置瀏覽

1. 備份您的網站

別忘記採取任何更新前,先備份你的網站內容。

2. 將您的網站系統更新至最新版本。

若你採用 CMS(內容管理系統)架設網站,有時候,只要更新至最新版本就會自動套用必要的安全性更新,讓您的網站更適合行動瀏覽體驗。設定系統自動更新,或委託專業的網頁設計團隊幫你看管網站版本,也可以減少安全性漏洞。

3. 如果運用裡面的設計主題,確認這些主題適合行動裝置

如果想運有現成的主題範本,可以將該範本的網址複製並貼上這裡去做測試,檢查是否符合Google對行動裝置的瀏覽需求。可以查看 PageSpeed Insights 的「速度」部分,確定其中沒有標示為「應修正」。

4. 造訪 CMS 的支援論壇

WordPress 自己有交流的技術社群 WordPress Forums,你也可以在Facebook搜尋「WordPress」學習交流社團試著加入,多爬文或是自己發問,讓高手為你解惑。
相關文章
什麼產業需要 RWD 網站?

目錄 如果你真的好奇,那麼答案是:只要你想做網路的生意,就都需要 RWD 網站。 線上消費已是主流而非趨勢 近十年來,從 Bossini、潮牌 STA