響應式網頁設計(RWD)Responsive web design 又稱自適應網頁設計

rwd_01

什麼是響應應式網頁設計RWD?

  又稱作適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計。響應式網頁設計(Responsive Web Design)概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出的概念。這是一項被公認在2014年網頁設計開發技術的趨勢,以media querys以及CSS3寫成,它的好處是你不需要特別開發APP,而且適用於各種作業系統及各種螢幕尺寸。

  隨著行動設備裝置以及上網人口的激增,網頁設計也必須符合行動裝置用戶,簡單的來說,讓網站可以針對不同設備(桌機、筆電、平版、手機)等不同尺寸螢幕瀏覽網頁時,整個網頁頁面會對應不同的解析度,而有不同的呈現方式,也是是說可以讓最重要的訊息,在有限的版面中清楚的呈現給用戶。但響應的Web設計不僅是可以調節的屏幕分辨率外,並自動調整大小的圖像,而是關於思考設計一種全新的方式。

 

響應式網站設計(RWD)優點分析

為什麼你應該選擇響應式網站設計的原因並且可以替使用者提供最佳的視覺體驗,最重要的是,它有助於SEO優化。

rwd_02開發成本和時間比APP減省
  APP必須開發iOS版及Android版兩個版本。每種版本介面系統皆數十萬元起,加上手機型態功能不斷增加,開發成本之昂貴更是不可預期。由於開發時間加上審核上架完成的時間相當長。

維護成本比APP低
  APP完成之後要不定期需針對新版本測試,才能確定APP在新手機上能運作順暢。以目前新手機汰換的頻率來看,這是永遠不會結束的測試工作。手機版網站等於是另一個用在行動裝置的公司網站,相對地,企業必須花2筆網站維護成本。

不需下載APP就能使用
  響應式網頁的優點,只要管理者更新網站,每次連上網頁都會是最新版本。然而APP則必須到iTunes、Google Play下載,APP若要更新,必須重新審核過後,再通知所有下載用戶更新。

企業視覺形象一致
  同一個網站適用於各種裝置,自然不需要針對不同版本設計,造成不同視覺效果。這一項技術仍不斷在成長,因此當您領先對手製作響應式網站時,其間會運用許多新的設計技巧,讓客戶對您的網站留下更好的印象。

可觸及不同行動用戶新體驗
  針對行動設備,設計全新的網站介面,帶來不同的用戶體驗,接觸到行動用戶,越來越多行動裝置使用者~手機、平板、智慧電視…當他們看到老舊網頁的顯示不符合新裝置時,就會立即關閉頁面走人。響應式網頁設計的最大目的,就是讓不同裝置的用戶,都能得到最佳的顯示效果,自然就能夠抓住行動用戶的目光。

可同時適用不同裝置
  APP必須開發iOS版及Android版兩個版本。手機版網站則需要搭配電腦版網站,才能符合多數裝置規格。同時還要安裝偵測使用裝置的小程式,才能讓手機讀電腦版網址會開手機版網頁、 電腦讀手機版網址會讀電腦版網頁…這一串繞口令其實也代表了目前電腦+手機版雙網站介面的內容分享問題,設計響應式網站就完全不會有這個問題。

改善使用者經驗,提升轉換率
  響應式網頁設計可根據裝置螢幕的大小,自動調整版面;不論使用者是用桌機、平板電腦還是手機,都能用最舒適的介面瀏覽網站,包括功能應用、選項,也都能讓使用者選取方便,改善使用者經驗、提升轉換率。

 

選擇響應式網站設計有助於"SEO"優化

  "SEO"是一種透過搜尋引擎的運作規則來調整網站,在非購買廣告情況下,以專業操作來進行網站在搜尋引擎最佳化的排序。在SEO優化的操作中,簡單的說,就是讓Google、Bing等搜尋引擎給你的網站有較好的評價, 提升你的網站在相關搜尋引擎的排名,所以在網頁設計時,必須依照搜尋引擎的運作規則來設計網頁。 響應式網站設計(RWD ,Responsive Web Design)因為能符合使用者習慣,對SEO都是大大加分。

自適應網頁對SEO的好處
  • One
    URL

  • Single
    content

  • One
    Code

  • CSS3
    Media Queries

1. 減少重複的網頁內容
當電腦版網頁與手機版網頁的鏈結網址(link)不同時,以Google搜尋引擎的特性而言,網址不同而內容重複的狀況下,雖不至於將你的網站列為惡意連結,但仍會影響評價(Page Ranking)。

2. 降低網頁跳離率
當行動用戶,不能順利操作瀏覽的網頁時,會選擇立刻跳出回到搜尋頁,這樣會被Google認為你的網站不是最好的搜尋結果,對你的排名也會跟著下降。

3.避免使用者碰壁 提高網頁可用性
當電腦版與手機版是不同網站時,使用者可能會找不到原本搜尋到的內容。例如:你原本瀏覽電腦版網頁,之後用手機連上網頁後,卻被迫跳到手機版,再也找不到原本的內容。響應式網頁就不需要切換電腦版、手機版本,使用者可以很順利、方便的使用各種裝置瀏覽網頁。

4.保持單一鏈結
響應式網站設計的另一項好處,是不需要切換電腦版及手機版的鏈結,分享時可以確保雙方都能看到一樣的內容。當跳離率下降、可用性提高、分享次數增加,隨之而來的就是增加流量及滯留時間,自然會提高搜尋排名。

5. 提高在地搜尋評價
越來越多人用手機、平板搜尋日常服務、娛樂、旅遊等生活資訊,而Google為了便利行動網民,行動裝置的搜尋結果會優先顯示離使用者距離較近的店家。倘若這個網站不能在手機上順利瀏覽,高曝光率反而會帶來高跳離率, 也就是越多人點你的網站就越多人跳開,進而影響搜尋排名。所以說:自適應網站設計對你的行動搜尋排名會大大加分!

最後,因為GOOGLE也喜歡響應式網站設計(RWD, Responsive Web Design)所以沒什麼好說的, 用它就對了!