響應式網頁設計 RWD

由於 HTML 本身是用來呈現靜態頁面的標籤,沒有程式邏輯的部分,會比真正的程式語言來得簡單得多。HTML 頁面的程式邏輯就是用 JavaScript 來撰寫;要注意 JavaScript 是後來才加到瀏覽器中的技術,原本設計 HTML 時沒有包含程式邏輯的部分。

隨著行動設備裝置以及上網人口的激增,網頁設計的也必須符合行動裝置用戶,從今年起,政府單位製作網站將朝向響應式網頁設計(亦稱自適性網頁、多螢幕網頁、液態網頁、RWD)的方向改版與設計,符合當今台灣使用者的習慣。 響應式網頁設計為何如此重要?他又能為企業網站帶來什麼樣的價值,以下是響應式網站的優點:

企業形象跟上潮流

響應式網站是這兩年的最新趨勢,這一項技術仍在成長階段,因此當您比其他競爭對手領先製作響應式網站時,會使用許多新的設計技術,例如:滾動視差網頁設計、平面化視覺設計、一頁式網頁設計...客戶自然就會對您的網站留下更好的印象。

接觸到行動用戶

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

可同時適用不同裝置

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

改善使用者經驗、提升網站轉換率

網路行銷經常提及的網站轉換率,意即訪客成為客戶的比例。當您採用響應式網頁設計,表示您的網站能夠接納各式各樣網路客戶,響應式網站可根據各種裝置螢幕的大小,自動調整版面;不論使用者是用桌機、平板電腦還是手機,都能用最舒適的介面瀏覽網站,包括功能應用、選項,也都能讓使用者選取方便,改善使用者經驗、提升網站轉換率。

增加搜尋引擎曝光度

當行動上網族群超越桌上型用戶時,搜尋引擎也早已經優化了搜尋功能,提供最佳的行動上網使用經驗。簡單的說,使用客戶使用手機搜尋資訊時,搜尋引擎會優先將響應式網站排名提前,如果你使用的正是響應式網頁技術,您的網站能見度將會更高,比其他競爭對手更具優勢。

不需下載APP就能使用

這不只是響應式網頁的優點,可說是所有手機版網頁相較於手機APP的最大優勢。 APP必須到iTunes、Google Play下載,APP若要更新,必須重新審核過後,再通知所有下載用戶更新。反觀響應式網頁與手機網頁,只要管理者更新網站,每次連上網頁都會是最新版本。免費Wi-Fi熱點越來越多、 3G費率持續調降,即使無法離線瀏覽也不再是問題了。

開發及維護成本與時間比APP低

APP必須開發iOS版及Android版兩個版本,一個版本皆數十萬元起跳,開發時間加上審核上架時間相當長。APP完成之後要不定期需針對新版本測試,才能確定APP在新手機上能運作順暢。以目前新手機上市的頻率來看,這是永遠不會結束的測試地獄。手機版網站等於是另一個用在行動裝置的公司網站,相對地,企業必須花2筆網站維護成本。

Google 建議您使用 RWD 響應式網頁設計

「只要做一個網站,會根據裝置大小不同,自動變換排版方式」,可支援多種瀏覽裝置,目前有 38% 以上的用戶使用手機或平版上網,RWD 網站可提供最佳解決方案,有利於提升搜尋排名,方便各種使用者瀏覽,節省設計成本,更利於網路行銷,讓網站效用最大化!

Google官方解釋是無論使用者透過何種裝置瀏覽網頁 (包括桌上型電腦、平板電腦或手機),該網頁一律使用相同的網址和程式碼,只不過網頁的顯示效果會依據螢幕尺寸進行調整。 因此,Google 建議您使用 RWD,而非其他設計樣式。

“Google recommends web masters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.”

Google 2015.08.17

Google 建議所有的網站使用 RWD 技術做為標準,讓網頁在不同的裝置顯示不同的結果 (依CSS)。有助於網站排名優化 (SEO),故強烈建議以 RWD 方式製作網站。