響應式網站是什麼？Wordpress如何設計響應式網站？響應式網站與SEO有關？

響應式網站是現在網站和網頁的主流，因為可以適應各種不同的載具螢幕大小而受到歡迎。響應式網站是什麼？應式網頁尺寸為何？如何透過Wordpress設定讓網頁變成響應式網頁？

應式網站是什麼？

響應式網站（英文：Responsive Web Design）是一種網站設計方式，在2010年由美國網頁設計師Ethan Marcotte所提出，響應式網站透過CSS media queries設定，使網頁能因應不同載具螢幕大小，讓使用者能更好地瀏覽網站。尼爾森諾曼集團（Nielsen Norman Group）的解釋更清楚：響應式網站能根據裝置不同螢幕大小和使用者使用習慣而能動態改變，增加使用者體驗。

為什麼要用響應式網站？

響應式網站會受到歡迎的原因，是因為手機上網。根據《Digital 2022: TAIWAN》的調查，9成國人有上網習慣，其中高達95％使用手機上網，各種螢幕尺寸的手機、平板成為人們上網的主流，與其花更大的人力、物力將APP或是網站另外做成手機版本，不如在網站設計時就做成響應式網站，維護和建構的成本更低。

響應式網站跟自適應網站有何差異？

響應式網站（Responsive Web Design）與自適應網站（Adaptive Web Design）都是為了讓網站在不同裝置上都能良好顯示的設計方式，但它們在技術實現上有一些關鍵差異，以下介紹自適應網站是什麼，以及響應式網站和自適應網站的差別。

自適應網站是什麼？

自適應網站可說是響應式網站的前身，特別聚焦在手機、平板等等載具。自適應網站針對不同載具來設計網站，例如臉書有所謂的「手機版」。整體來說，自適應網站也是一種為了手機螢幕而改變網頁設計方式，進而增進使用者體驗的方式。

響應式網站VS. 自適應網站

響應式網站和自適應網站雖然都是根據不同裝置來設計網站，但實際上兩者大不相同：

比較項目	響應式網站（RWD）	自適應網站（AWD）
設計方式	使用 CSS media queries，根據螢幕大小即時調整佈局	設計多種固定版面，針對不同裝置設計特定版本
適應方式	動態調整，同一套程式碼適應所有螢幕尺寸	針對特定裝置載入預設版面
開發與維護成本	低，只需維護單一網站	高，需要維護多個版本
載入速度	可能較慢，因為所有裝置載入相同的 HTML/CSS	較快，針對不同裝置載入最佳化內容
SEO	佳，使用相同網址（URL），利於 Google 搜尋排名	較不友善，不同設備可能載入不同 URL
使用者體驗	體驗一致，所有裝置上 UI／UX 一致	最佳化體驗，不同裝置可能有不同的 UI／UX 設計
適用場景	企業官網、部落格、新聞網站等	電商、金融、訂票系統等，需針對不同裝置優化的網站

一般來說，如果希望網站針對不同裝置提供最佳化體驗，那麼自適應網站是更好的選擇；若想要降低開發成本、確保 SEO 友善，響應式網站通常是更理想的選擇。

Wordpress如何設計響應式網站？

Wordpress是網頁設計常用的平台，而且Wordpress本身就已經包含響應式網站功能，只透過一些設定和插件安裝，Wordpress網站能更有質感：

選擇響應式佈景主題

WordPress有許多內建響應式佈景主題，例如Astra、GeneratePress、OceanWP、Divi等等。

使用 Elementor創建響應式網站

Elementor 可以讓使用者能響應式拖放技術來建立和編輯網站。可以在Wordpress後台開啟Elementor響應式模式，針對不同裝置調整字體大小、間距、隱藏不必要內容，可以調整欄位（手機版可將欄位設為100%）、顯示／隱藏內容和調整行間距及字體大小來增加行動裝置的內容可讀性。

裝置	H1 標題	H2 標題	內文字體
桌機	48px	36px	18px
平板	36px	28px	16px
手機	28px	22px	14px

安裝響應式相關插件

WordPress插件例如WP Touch（讓現有網站自動產生行動版）、Responsive Menu（為行動版提供更好的選單介面）、Smush（圖片壓縮，提升載入速度）、Elementor / Beaver Builder拖拉式編輯器，提供響應式調整功能）等等。

響應式網站與SEO有關？

使用響應式網站其實不只能適應各種螢幕大小，更重要的是，搜尋引擎龍頭Google公開建議以及在2020年的演算法更新，讓響應式網站受到重視：

• 行動版網站和行動版內容優先：2020年9月Google公布了行動版內容優先的演算法，簡單說，友善行動版網站內容會影響Google檢索和收入排行的依據。
• 單一網址、容易索引：響應式網站使用單一網址，Google不會因為同樣的內容出現兩個URL而錯亂。
• 無須重新導向：以往行動版、電腦版必須切換和重新導向，響應式網站則無需重新導向，節省時間、增加使用者體驗。
• 維護成本低：工程師無須維護多個相同內容的網站
• 降低錯誤率：響應式網站能減少果ˋ去行動版網頁常出現的問題，例如無法索引。
• 節省Googlebot資源：響應式網站讓Googlebot找資源時只需檢索網站一次，提高Googlebot的檢索效率。

響應式網站常見問題

響應式網站常用尺寸多少？既然響應式網站有益SEO，那麼用了響應式網站就能增加排名？以下解答響應式網站常見3個問題。

響應式網站尺寸多少？

響應式網頁常用尺寸如下：

• 手機：360 x 640，768px以下
• 電腦版裝置：1366 x 768，1024px以上
• 平板裝置：768 x 1024，768px ～1024px

用了響應式網站SEO排名就會好？

不一定。雖然Google建議使用響應式網站，但不代表響應式網站是關鍵。影響SEO排名的因素很多，包括網站結構、讀取速度、外部連結等等，所以用了響應式網站代表你是「好學生」，但未來能不能成功還必須花更多努力。

響應式網站費用多少？

• 響應式網站（RWD）設計的費用因需求和功能的不同而有所差異。以下是一些常見的方案及其費用範圍：
• 套版型網站：適合預算有限且需求簡單的客戶，價格約3萬至5萬
• 半客製化網站：用套版型網站為基礎，進行部分客製化，價格範圍約為5萬至10萬。
• 客製化網站：完全依照顧客需求設計網站，價格相對高昂，價格通常在10萬以上

除了網站設計費用，其他還有包括網址與SSL憑證、網站主機和網站維護費用等等，在與網頁設計公司討論時要特別注意。

浪花科技 網站設計最強幫手

「在茫茫網路大海中，找到你的服務和產品」是浪花科技的核心。浪花科技專注於將創意與技術融合，打造既美觀又高效能的網站，從用戶介面設計到後端開發，不僅精通最新的網頁技術，如HTML5、CSS3、JavaScript和各種CMS平台，還擅長透過響應式設計讓網站在各種裝置上都能完美展現。 架設網站最難的部分是在網站企劃、素材設計以及後續的數位行銷、SEO優化等，浪花科技都能協助客戶解決規劃層面與數位行銷的問題。 想要創立屬於自己的響應式網站？聯絡浪花科技，讓專業團隊幫助你提升網站體驗！