Ranking首頁 / SEO教學 / 網站經營 / RWD響應式網站

【RWD響應式網站】RWD響應式網站是什麼?你需要符合使用者需求的網站!

【RWD響應式網站】RWD響應式網站是什麼?你需要符合使用者需求的網站!

根據 Google 統計數字表示,有超過 60% 的使用者使用手機瀏覽網頁,而每一種行動裝置各有不同的螢幕解析度。一個好的網站,得讓使用者在瀏覽網站時有最好的體驗,在各種裝置上都能清楚閱讀網頁內容。因此,RWD 響應式網站誕生。

 

RWD 響應式網站是什麼?

RWD響應式網站

響應式網頁設計,英文為 ”Responsive web design“,通常縮寫為 RWD design。是一種網頁設計技術,可以使網站在不同的裝置,像是電腦、手機、平板等,在瀏覽時能夠對應不同解析度,自動調整成適合的排版呈現,讓使用者獲得良好的瀏覽體驗。

 

RWD 響應式網站和一般手機版網站有何不同?

RWD響應式網站只需製作一次,而一般手機版網站則需製作電腦版和手機版兩個網站。這代表一般手機版網站網頁製作需要花費更多成本,且網站若需更新也得更新兩次。RWD網頁不需另外製作網頁,網站維護更省時,因此被廣泛使用。

 

RWD 網頁範例

RWD響應式網站

 

RWD 教學-RWD尺寸設定與排版

RWD 響應式網站原理即使用 CSS3 Media queries,代表網頁會先「詢問 (query) 」「媒體 (Media) 」屬性,進而根據某些特定屬性,像是尺寸、顯示品質等,定義網頁樣式。

 

在 .css 檔案中,使用「@media」語法標籤,後面加上對於螢幕的尺寸設定:

@media screen and (max-device-width: 400px){}

 

即是在螢幕寬度小於 400 像素時,套用此CSS。

 

RWD網頁製作-響應式網頁軟體

要設計 RWD 網頁,也可利用 Wordpress 等響應式網頁架站軟體直接設計,省去編輯程式碼的步驟。

 

Wordpress是全球最廣泛被使用的架站平台,Wordpress提供數百種免費擴充軟體,網頁設計自由度高。在Wordpress上架設網頁,可選擇不同的網頁佈景主題,幾乎所有佈景主題都支援響應式網頁,可再利用網頁編輯器分別編輯桌機與行動裝置版網頁的排版。

 

Wix 主張快速架設美觀、專業的網站,許多想要快速搭建網站,且不懂程式碼的使用者會選擇 Wix。使用 Wix 架設網站,同樣可分別編輯桌機與行動裝置版網頁。

 

Weebly 是類似 Wix 的架站軟體,屬於操作簡單、介面視覺化的架站平台。同樣適合想要快速架設網站,且不需要太多額外功能的使用者。Webbly 所有的網頁佈景主題皆支援響應式網頁設計。

 

網頁架設軟體懶人包:架站平台大評比!哪一款網站架設平台最適合你?

 

RWD 響應式網站對 SEO 的重要性

響應式網站

不論是由何種方式製作手機版網站,只要給使用者良好的體驗,也就等同於 SEO 細節處理恰當,對於 SEO 的影響則不會太大。傳統手機版網頁若管理不當,則較有可能發生「重複內容」、「重新導向 Redirect」的疑慮,影響 SEO 成效。

而 RWD響應式網站和傳統手機版網站的最大的差異即在「需要耗費的時間與人力成本」上。就像前文提到的,傳統的手機版網站製作需為兩個獨立的網址,不但在製作尚需花費更多成本,更新時也需花費更多時間更新兩種版本的網站。

 

總結

RWD 響應式網站的優勢即在「好維護」、「製作與維護較省時」。在決定製作網站後,選對網頁製作方法相當重要。在人力有限的狀況下,你需要用最有效率的方法經營網站,且同時能給使用者最好的瀏覽體驗,發揮網站的最大效益!

 

 

延伸閱讀:

【網頁設計】怎麼設計專業網站?解析各類網頁設計作品與範例!

【網站架設4大攻略】掌握網站設計與網頁製作,打造高效益網站!

fb分享至 Facebook fb分享至 Line

向 Ranking 諮詢網站服務與報價

您正在尋找網站服務嗎?Ranking 提供網站架設與代管服務,我們設計的網站能確保您在操作 SEO 時擁有最良好的網站架構,讓您省下一筆可觀的優化費用。