適應性網頁設計-Responsive web design(RWD)

作者/孫傳峯

前言 適應性網頁設計 (Responsive Web Design) 簡稱 RWD ，也有人說是自適應網頁設計，或是響應式網頁設計。隨著行動裝置愈來愈多樣化，適應性網頁設計也愈來愈流行。 RWD 是一種網頁設計的技術，這種設計主要是希望讓網站在多種瀏覽裝置上（例如：個人電腦、平板電腦，以及手機…等行動裝置），都能夠順利閱讀和導覽，並且可以減少在小型裝置瀏覽器上，縮放、平移和捲動螢幕的操作。 Responsive Web Design起源 早期的網頁設計預設對象大多以一般家用電腦或筆記型電腦的瀏覽者為主，所以在製作網頁時會以此規格為預計頁面的大小，然而隨著平板電腦及智慧型手機的普及，傳統的網頁設計方式已無法滿足所有的網頁瀏覽裝置，使用畫面較小的平板或智慧型手機來瀏覽傳統設計的網頁時，將會因為頁面寬度過寬而導致瀏覽者在瀏覽頁面時的不便，因此為了滿足手機瀏覽者的需求，一般在進行網站製作時通常會再另外製作「手機版」的網站，以滿足這些族群的需求，然而手機版網站雖然可以解決大多數手機瀏覽網頁者的不便，但對於花錢進行網站建置的企業來說，將額外增加一個網站建置的成本。 根據George Chinnery所做的調查發現，由於螢幕大小過小以及效能太差，在讀取影片、圖片、大量文字時，造成使用者在使用上的困難。而在2009時，Compuware commissioned Equation Research針對手機網頁的使用經驗進行調查發現，使用者對於手機網頁的表現低於原有的期望以及其效能也相當差。 因此在2010 年時，Ethan Marcotte發表一則網頁設計理念「Responsive Web Design」是對於裝置大小不同之版本與開發；也提及桌上型電腦與行動裝置所使用的方式不同也會對使用者造成影響；再者，近幾年來，行動裝置的螢幕大小可說是數百種，Hjerde在2005年至2008對於行動螢幕裝置所調查的結果發現，竟有400種不同大小的螢幕裝置，如圖1。因此，如果是以浮動而非固定的比例去設計網頁的框架，就可解決螢幕大小影響網頁內容呈現之問題，運用一點微妙的改變，定義特定的使用經驗；利用標準基礎技術讓網頁設計不只更加彈性，且更加適應於各種裝置。 什麼是Responsive Web Design 適應性網頁設計(Responsive Web Design, 簡稱RWD)，又稱自適應網頁、響應式網頁、回應式網頁設計，會有數種不同中文的名稱，是因為RWD在目前算是較嶄新之網頁開發技術，雖然在國外已非常盛行，但對於華文市場而言仍未有一個貼切之中譯名稱，只能以直譯名詞取代之。而其原理即是利用CSS3與Javascript網頁技術，讓電腦、平板、手機網站使用同一網站的圖文內容(亦即所有裝置皆來自於同一份html)以及資料庫，對於不同尺寸或係解析度的設備螢幕上，網頁程式會依據使用者的裝置，自動改變網頁的版面與設計，以符合版面大小之樣式來呈現網頁上的內容，如圖二。 而Tim Kadlec認為RWD應該是屬於漸進增強之概念。所謂的漸進增強的概念來自於2003年在SXSW上，Steven Champeon和Nick Finck進行的一場漸進增強的演講，內容如下：「會先建立一個基本體驗，並使用具有語意的標記和結構定義，目的在於讓內容以一種簡潔的方式來呈現，同時也具有可用性；在這之後，才開始著手於顯示之布局與互動，此時才會為功能更強的瀏覽器建立甚為豐富的使用經驗」。 傳統網頁VS.RWD 一、傳統網頁 傳統的網頁設計方式，在不同裝置上，都是同樣的呈現方式。在小型裝置瀏覽器下顯示，只是網頁依比例縮小。有時照片、文字、選單、按鈕…等，都小到看不清楚，或是不容易點選。所以需要使用縮放手勢，不斷的去放大縮小觀看網頁，如圖三。 二、RWD網頁 RWD 的網頁設計方式，則是依不同的螢幕解析寬度，去調整不一樣的網頁顯示及導覽方式，讓小型裝置瀏覽器上的網頁，字體不至於縮到太小，選單、按鈕、連結…等，也不太需要經過縮放，就能方便點選操作，如圖四。 Responsive Web Design原理與實作 RWD主要是以HTML5的標準及CSS3中的media queries來達到的。在HTML5的標準中，我們可以指定頁面的寬度可以依照裝置的檢視寬度來呈現，再利用CSS3的media queries 來設定不同寬度下使用不同的CSS來呈現頁面。因此設計師在設計網頁時，就必須要針對不同的寬度下的畫面編寫不同的CSS檔案供瀏覽器來讀取。 手機的螢幕比較小，目前最大的Note解析度是在640px，而ipad則是在980左右，電腦寬螢幕尺寸是1920。同樣的內容要在大小迥異的螢幕上都呈現出好的效果，並不是一件容易達成的任務。 RWD的主要核心技術是css3 media query，說穿了就是讓不同解析度去套用不同的css設定。 一、Media Query 引用方式 Media Query 的使用方式有兩種： 1.在 .CSS 檔案中，用@media來判斷使用者螢幕寬度，選擇載入哪一段CSS。 　ex: @media screen and (max-device-width: 400px){} 　在螢幕小於400px時，套用此css 2.在HTML的載入的地方，用media屬性判斷使用者裝置寬度，選擇載入哪一個CSS檔案。 　ex: link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" 　在螢幕小於400px時，套用tinyScreen.css 二、Viewport設定 meta name="viewport" content="width=device-width; initial-scale=1.0" 如果網頁的標頭沒有做這組設定的話，手機會以高解析度來呈現畫面，這就讓字變得很小，使用者還要去做放大而不能直接閱讀。我們需要的是讓行動裝置的螢幕來符合一般的像素公式，單位一樣才比較好做設計。 開發人員為何選擇Responsive Web Design 一、開發成本與時間比APP低 APP必須開發iOS版及Android版兩個版本，一個版本皆數十萬元起跳，開發時間加上審核上架時間相當長。  二、不需下載APP就能使用 這不只是響應式網頁的優點，可說是所有手機版網頁相較於手機APP的最大優勢。 APP必須到iTunes、Google Play下載，APP若要更新，必須重新審核過後，再通知所有下載用戶更新。反觀自適應網頁與手機網頁，只要管理者更新網站，每次連上網頁都會是最新版本。免費Wi-Fi熱點越來越多、 3G費率持續調降，即使無法離線瀏覽也不再是問題了。  三、維護成本比APP低 APP完成之後要不定期需針對新版本測試，才能確定APP在新手機上能運作順暢。以目前新手機上市的頻率來看，這是永遠不會結束的測試地獄。 手機版網站等於是另一個用在行動裝置的公司網站，相對地，企業必須花2筆網站維護成本。 四、可同時適用不同裝置 APP必須開發iOS版及Android版兩個版本。 手機版網站則需要搭配電腦版網站，才能符合多數裝置規格。同時還要安裝偵測使用裝置的小程式，才能讓手機讀電腦版網址會開手機版網頁、 電腦讀手機版網址會讀電腦版網頁…這一串繞口令其實也代表了目前電腦+手機版雙網站介面的內容分享問題，設計自適應網站就完全不會有這個問題。 五、品牌形象一致 同一個網站適用於各種裝置，自然不需要針對不同版本設計不同視覺效果。  六、符合使用者習慣 行動裝置的搜尋功能仍是以「搜尋網頁」為主，舉例來說，有人用手機搜尋「飯店」2字時，只會搜尋各家飯店的網頁， 不會搜尋飯店開發或帶有飯店名稱的APP。開發出來的APP必須再花一筆行銷費用大力宣傳，讓使用者知道有這個APP，還要能引起興趣下載、使用。  七、利於分享 APP沒有網址可以分享，以蘋果日報的APP為例，APP分享出去的網址是電腦版網頁的網址，網站若偵測到是用手機開啟網址，再自動轉址到手機版網頁的網址。 即使做了手機版網頁，分享出的網址通常都是手機版網頁的網址，當朋友用電腦開啟連結時，卻不見得會轉回電腦版網站。蘋果日報的手機網站就是如此。 同樣的網頁內容拆成電腦版、手機版兩個網址，按讚數、流量分析等也會跟著拆成兩筆數據，對SEO相對比較弱。 自適應網頁就沒有這個問題，分享出去的都是同一個網址。  八、利於SEO 在SEO這一方面除了大勝app外，而相較於獨立網址的手機版網站，自適應網頁可以避免重覆的內容、保持網頁原本的連結，因此自適應網頁設計的原理與使用習慣都有利於於SEO(搜尋引擎最佳化) 資料來源 1.RWD響應式設計優缺點 2.RWD原理與實作 3.RWD起源 4.RWD簡介與傳統網頁比較 5.Marcotte, E. (2010).Responsive web design. 6.Hjerde, M. (2008). More on mobile screen size trends. 7.Chinnery, G. M. (2006).Going to the MALL: Mobile assisted language learning. Language Learning & Technology, 10(1), 9–16. 8.Tim Kadlec. (2013) .Implementing Responsive Design The functions of the executive. Person Education, Inc: DRMASTER PRESS CO LTD. 9.Compuware commissioned Equation Research. What Users Want from Mobile.