CLOSE
最新消息
2018.06.24

RWD 響應式設計 在網頁設計與網站架設的優勢

RWD 響應式設計 在網頁設計與網站架設的優勢

一、RWD響應式設計 在網頁設計優勢

RWD 響應式設計 相關的介紹已經在 什麼是 RWD 響應式設計?為何網站需要 RWD 功能? 一文中詳細說明其由來以及原理,那麼在這一篇文章中筆者要為各位分析的是使用 RWD 響應式設計的優勢與缺點。

對於初次架站的新手而言,對於網站架構的選擇上必須要保有小心謹慎的態度,必須多方面蒐集參考資料,才能夠真正決定網站所要使用的 CMS 後台管理系統以及網頁設計必須具備的功能。

會這樣說的原因在於網站架構所影響的層面相當廣大,比較重要的其一有網站內容管理,在人手一支智慧型手機可以隨時上網的年代,網站只能夠在桌上型電腦中正常顯示是遠遠不足的,如果網站無法根據不同裝置顯示螢幕大小自動調整網頁內容,那麼這個網站所能帶來的預估效益會低的超乎想像。

而全世界最多人使用得搜尋引擎入口網站 Google ,也在官方文件中針對 RWD 響應式設計做出說明文章:回應式網頁設計基礎,由此可知 RWD 響應式設計再次影響的就是網站的 SEO 搜尋引擎優化。以下為 RWD 響應式設計做出優勢與缺點的分析,提供給想要建立網站的各位參考。

優勢:

  1. 所有網站內容都只需要一站式管理,也就是説在當資料需要修改時只要在一個網站上操作,就能夠完成電腦、平板、智慧型手機三種不同設備的網站內容更新。
  2. 當前智慧型手機的平台區分為 iOS 以及 Android 兩種,如果說要透過下載APP的方式來做電子商務的行銷,一樣又回到雙網站的老路,同一件事情要分成兩次工,而且所要花費的成本也相當高,更何況還有手機版本對於APP使用的相容性問題,現在市面上智慧型手機的種類繁多,版本相容驗證也是一個相當棘手的問題。
  3. 不需要如同雙網站一樣使用不同網址,進入網站所輸入的網址只有一個,讓使用者在不同設備間切換更加便利,而當自家網站在社交媒體上被分享的時候,也不至於出現內容顯示錯誤的問題,加強使用者體驗。
  4. 在手機、平板及電腦上所顯示的網站內容路徑是一致的,提高瀏覽者對於公司形象認知的一致性,而不會為自己是否進入到正確的網站感到困惑。
  5. 目前為止大部分的使用者在搜尋資料時還是傾向使用網頁瀏覽器搜尋,如果使用APP作為網站來源,使用者必須先下載、安裝,如果說有站外連結還需要重新導向到瀏覽器,這樣一個APP切換網頁的繁瑣過程是相當不利於使用者操作。
  6. 對於網站的SEO(網站在搜尋引擎中排名優化的方法)的其中一個要點,網站重複性內容的部分可以有所避免,如果是建立手機版及電腦版兩個網站,容易被搜尋引擎認為是重複內容,進而降低網站排名的權重分數。
  7. Google 在2018年3月26日發佈了將網站移動設備友善度納入優先索引與排名的文章(Rolling out mobile-first indexing ),也就是説網站的行動裝置可用性將影響到網站在自然搜尋中排名的高低,如果說是使用桌機版與手機版網站分開架設的方法,就必須要使用標準連結元素( Canonical link element )在網站中宣告桌機版與手機版網站的網址,對於一般站長而言是多餘的麻煩,而如果使用 RWD 響應式設計就能夠很好的避免掉這個問題。

 

RWD 響應式設計 在網頁設計與網站架設的優勢|最新消息|鵠崙設計02
圖片來源:pixabay

 

二、鵠崙設計採用最新 RWD響應式設計

有許多網頁設計都會標榜使用 RWD 響應式設計架站,而實際上卻還是有很多細微的區別,比如說有部分的 RWD 響應式設計僅針對智慧型手機做網站內容自適應的優化,對於平板電腦的部分依然採用桌上型電腦的顯示作法,或者是在手機網站中沒有考慮到對 Java Script 做延遲載入以及壓縮網站 CSS 的做法,導致網站在 Google 行動裝置相容測試 以及 PageSpeed Insights (手機裝置網站載入速度測試)中不能得到較佳評分,這樣對於網站都是比較不好的影響。 在鵠崙設計的網站架設標準工作程序中,基於 RWD 響應式設計對網站的重要性,我們採用 WordPress 為客戶架設網站,而使用 WordPress 在於這套全球 25% 以上企業使用的 CMS 網站後台管理系統在於其功能眾多且彈性的優勢,除了網站佈景主題都能夠針對 RWD 響應式設計做設定外,附加的外掛程式更能讓網站在不同裝置上都具有更好的效能,以下列出鵠崙設計在 RWD 響應式網站的主要做法:

    1. 鵠崙設計網站架設使用付費主題:以必需付費購買的主題來架設網站,其對於網站漏洞與問題有相當快速的更新維護速度,大幅減少因行動裝置不斷推陳出新而無法正確顯示網站內容的問題。
    2. 多裝置內容詳細設定:無論是手機、平板、桌上電腦,我們都會在網站架設的過程中透過主題設定語法檢查實機測試的三個步驟來確保所有網站內容均能正顯示,並且依照 Google 對於行動裝置友善度的要求規範逐項逐條來建置網站架構,不僅僅是在使用者面前呈現完美的網站行動裝置版面,更有利於 SEO 搜尋引擎網站排名。
    3. 附加外掛加速網站:因為電腦版網站與手機版網站的瀏覽器版本與差異性,常常都會發生手機版因網站動畫效果或側邊欄的放置而有載入速度過慢或網頁版面錯亂的問題,鵠崙設計在網站建置時將使用壓縮 CSS 與延遲載入 Java Script 的附加外掛功能,一次解決網站裝置相容性問題以及加快網頁載入速度
    4. Google AMP 功能:針對客戶不同的企業主要內容需求,鵠崙設計可以為網站客製化加入 Google AMP 技術,讓網站使用者在以手機裝置瀏覽網站時可以秒開網站閱讀內容,此項功能更可以巧妙避免 RWD 響應式設計使用同一套HTML帶來的問題,增加客戶停留時間,就能提高訂單成交機率。
    5. 介紹的再多,不如看看鵠崙設計的作品範例,相信更能體會到我們在 RWD 響應式設計的用心,以下是我們的客戶案例:

RWD 響應式設計 在網頁設計與網站架設的優勢|最新消息|鵠崙設計03

鵠崙設計客戶案例在網站速度測試結果

RWD 響應式設計 在網頁設計與網站架設的優勢|最新消息|鵠崙設計04

鵠崙設計客戶案例在裝置相容性測試結果

 

結論:

對於想要架設網站的人來說,一定希望網站設置完成具有最好的行銷效益以及維護管理省時省力的特點,同時也能符合搜尋引擎技術要求進而讓網站排名有比較好的表現,鵠崙設計的 RWD 響應式功能 就是網站架設的最佳選擇,想要即時擁有最佳網站設計功能嗎?歡迎與我們聯絡,為您量身打造最符合企業需求的網站!

RWD 響應式設計 在網頁設計與網站架設的優勢|最新消息|鵠崙設計05
圖片來源:pixabay
CONTACT US

想了解更多資訊內容嗎?歡迎立即聯繫鵠崙設計!