Responsive Web Design 網頁設計

什麼是RWD響應式網頁?





    什麼是 Responsive web design (RWD)響應式網頁

    由於螢幕總類越來越多 2011年美國設計師 Ethan Marcotte 提出因應「多螢幕時代」的網站改善方案,以流體移動方式來適應螢幕大小調整網頁內容、縮放、重新編排或隱藏部分內容,RWD如今已經成為網頁設計師製作網站時不可逆的開發趨勢與技術概念,這樣的製作概念可以稱為響應式網頁設計(Responsive web design 簡稱 RWD)又稱響應式、回應式、對應式、多螢幕網頁設計,但是其設計概念都是相同的。

    大約在2010年之前,網頁設計師製作的網站,都是依照一定的尺寸來設計,比如 寬1024px,高768px 類似海報、報紙、書本設計...等,尺寸是固定的,但是現在有數十種不同螢幕尺寸規格,如智慧型手機、平板、筆電、PC電腦多種螢幕尺寸,造成網頁設計師常常因為螢幕尺寸不同而困擾。

    RWD響應式網頁設計方式成為新的趨勢是很自然的,這種新的方式並不是為了更時尚,也不是提倡新的美學,主要用來解決目前多種螢幕尺寸來瀏覽網頁的解決方式,以不同螢幕尺寸與解析度,讓網頁設計師有更多的方式去思考,如何將RWD(響應式)的網頁設計方式應用上。

    RWD響應式網頁設計與製作方式以CSS3技術製作,以百分比的概念與液態彈性的編排設計,網頁本身會隨著螢幕的大小去滑動、隱藏、縮放變化,即時產生相對應的改變,好讓瀏覽者可以舒適的瀏覽網站。

    在RWD響應式網頁尚未成熟與普及以前,手機板網站也曾經流行一小段時間,做為傳統網站與RWD網站的臨時解決方案,由於手機版網站使用上還是有不少缺點無法改善,例如需要二個後台管理...等,如今RWD響應式網頁是用一個網站取代多種版本的網站方式,在製作上與管理上相對單純許多,所以手機版網站已經漸漸被取代。

    建議圖示 RWD網頁設計方式,隨螢幕調整最適合的方式
    點這裡操作顯示範例 - 右上方可挑整顯示尺寸喔!!
    RWD網頁設計桌上型電腦示意圖
    桌上電腦顯示
    RWD網頁設計平板示意圖
    平板顯示
    RWD網頁設計手機意圖
    手機顯示
    不建議圖示 傳統網頁設計方式只是同比例縮小,用平板與手機瀏覽比較困難
    傳統網頁設計桌上型電腦示意圖
    桌上電腦顯示
    傳統網頁設計平板示意圖
    平板顯示
    傳統網頁設計手機示意圖
    手機顯示


    您為什麼需要一個RWD響應式網頁?

    1.手機搜尋網站已成為主要方式

    據國家發展委員會104調查分析,台灣使用手機上網人口已到達八成以上,並且資策會產業情報研究所(MIC)公佈,有六成以上網友有手機消費經驗,也就是說二個人就會有一個以上在網路上消費的可能性,且不包含看到網站後,直接去實體商點購買的人數,由此可見行動商機是非常龐大的,如果沒有使用RWD網頁設計方式架構您的網站,造成手機瀏覽困難,非常有可能因此放棄消費,因此建議商家使用RWD方式製作網站。

    2.移動裝置皆可使用RWD

    目前市面上各種品牌手機林立,加上平板與筆記型電腦使用率也是逐漸上升,商家各自推出自己的螢幕尺寸,導致目前螢幕尺寸已經無法統一規範,因此傳統網頁設計方式已無法因應目前多螢幕尺寸的需求,因此使用液態排版方式的自適應RWD網頁設計方式,可以讓網頁內容隨著螢幕大小,伸縮、變化,隱藏、移動,使用小螢幕的智慧型手機時,也會隨著顯示螢幕較小,而將主選單改變成下拉式隱藏方式使用,並且適度隱藏較不重要的內容,讓瀏覽時更輕鬆方便,也會特別凸顯手機撥號的圖示,讓用戶直接點選圖示就可以撥手機給商家。

    3.開發成本與時間比APP便宜許多

    許多商家會選擇使用APP來作為手機曝光方式,RWD響應式網頁設計在製作方面相對較於APP更快速,更便宜,並且APP曝光方式有限,相較於網頁瀏覽方式,受限幅度較大。

    4.提升關鍵字搜尋排名

    Google在自己官方文章已發表過,“目前的搜尋排名方式以手機板為優先並且極力推廣手機瀏覽網站”。
    GOOGLE官網公布訊息:https://developers.google.com/webmasters/mobile-sites/
    行動裝置相容性測試網址:https://www.google.com/webmasters/tools/mobile-friendly/
    此規範表示,GOOGLE極力推廣網站以RWD方式製作,對於關鍵字自然搜尋排序也是很重要的。

    5.給用戶最好顯示效果

    如果網頁設計時以RWD方式製做時,用戶不管是用任何螢幕尺寸來觀看,都是以最適合的方式顯示,包桌上型電腦、筆記型電腦、平板電腦,與不同尺寸的手機螢幕,網站會以液態編排方式重新排版,顯示於螢幕上,並不會在小小的螢幕上顯示整個網站內容,讓用戶無所適從。

    6.不用再花一筆錢做手機版

    在RWD響應式網頁設計,成熟以前都是以手機板為替代方案,必須透過程式判斷螢幕尺寸來轉向一般網站或是手機版,不過主網站與手機板是屬於不同網域,如果同時使用2個,勢必要花二倍時間與金錢管理維護,如果使用RWD自適應網站則可以避免這種困擾。





    RWD響應式網頁的缺點

    1.太複雜的內容不適合以RWD製作,如入口平台、大型購物平台、遊戲平台等..

    RWD網站會隨著螢幕大小作液態編排適度變更,讓用戶用更適合的圖文編排來瀏覽,如果複雜的全部內容都要與手機小螢幕顯示,勢必會出現非常長的網頁造成用戶觀看網站的困擾。

    2.無法完全支援舊版瀏覽器

    RWD網頁設計方式是使用目前最新的HTML5 + CSS3 的技術來編撰網頁,版本太老舊的瀏覽器並沒有完全支援這些技術,所以瀏覽起來會有破格或是無法點擊頁面的情況發生,不過隨著時間的進步,市場上舊版的瀏覽器勢必會慢慢消失,到全部取代成為新版。

    3.開發時間與成本比傳統方式多

    RWD網頁設計方式是使用目前最新的HTML5 + CSS3 的技術來編撰網頁,版本太老舊的瀏覽器並沒有完全支援這些技術,所以瀏覽起來會有破格或是無法點擊頁面的情況發生,不過隨著時間的進步,市場上舊版的瀏覽器勢必會慢慢消失,到全部取代成為新版。

    總體而言,RWD,可以解決目前絕大部分的瀏覽尺寸問題,所以勢必成為網頁設計的新趨勢,事實上製作新網站時,目前業者有八成願意以RWD方式來架構,目前RWD已經是主流的製作方式。





    RWD響應式網頁設計四個思考方向

    針對需求來顯示內容是否合宜

    當使用者在網路搜尋網頁時,搜尋的目的是想要得到相關的的資訊來解決問題,有可能是購物、尋找專業公司、獲取知識、休閒活動等等,都有一個準確目的性。

    企業形象網站:

    形象網頁建立的目的是,依照企業類別與產品性質,提供高質感的專業網頁介紹給有需求者,想當然,網站表現出更具專業性的內容與視覺設計是可以讓有此需求的人更願意尋求幫助,當網站使用RWD響應式網頁呈現,在任何尺寸螢幕下都呈高度的專業質感,更可以,這也是企業網站成功的方向。

    購物網站:

    有購物需求的人,應該讓他們可以直接搜尋到產品,直接觀看產品圖片或是產品解說,再多的形象設計圖與公司專業說明也無意義,這樣的網頁設計重點為如何讓搜尋者最快的搜尋到他需要的產品,所以網站布局部分應該在搜尋與分類的便利性與產品與文案的顯示方式,以RWD響應式網頁方式顯示產品介紹網頁,會對有購物需求的人對產品更有親和力,當然也更有機會下單購買。

    資訊式網站:

    主要以大量文章與技術專欄為主,如blog、維基百科、奇摩首頁等等,這類型網站的文章分類部分必須花費更多心思,在於瀏覽的視覺動線是否清楚明顯,切勿造成雜亂無章的編排,需要注意的是大型平台類網頁並不建議以RWD網頁方式製作,因為小螢幕時的顯示內容有限,並不適合大量的文章與圖片篇排,就算勉強顯示出來也會因為太大量的資訊造成必須一直往下滑動,但這對瀏覽者來說並不會比較方便,反而會造成瀏覽上的困擾。


    用較少點擊次數,取得需要的內容

    相信會使用網頁搜尋功能的使用者,不論是使用PC電腦或是移動裝置,都會希望用快速的時間達成目的,最不希望遇到網站內容雜亂無章,當使用者進入到這樣的網站,在瀏覽一次後看不到自己想要的資訊或是相關分類,通常會馬上關閉網站繼續嘗試別的網站,另一種狀況是分類層級太多或是搜尋困難的情況都是會讓使用者感到困擾而放棄瀏覽。

    網頁設計公司在製作一個網站時,減少點擊次數是一個非常重要的的思維,意味這網站的便利性,更直接影響到網站的整體跳出率,在移動裝置上瀏覽RWD響應式網頁上更是明顯,由於移動裝置螢幕普遍較小,並且觸控螢幕沒有hover效果(滑鼠覆蓋後改變效果),由於移動裝置螢幕通常較小,在使上更需要耐性,所以在製作RWD網站時必須更注重使用者體驗與使用者介面。


    降低下載讀取時間,讓瀏覽更順暢

    在移動裝置上瀏覽網站,時常會有頻寬與下載容量的限制,一般在桌上型電腦很流暢的瀏覽速度,但是在移動裝置使用上,會因為外在環境的改變,或者裝置本身上的限制導致下載延遲,所以製作RWD自適應網頁時必須從網站檔案與圖片大小上去計較,當然外掛程式如jQuery、CSS、javascrip等的總體架構的讀取速度也是非常重要。


    RWD網頁主要採用方格(塊狀)設計

    如果看過許多以RWD響應式網頁設計的網站,會發現每個RWD網站的編排方式大都有點相似,很多人也對此感到疑惑,那是因為RWD響應式網頁設計時必須考量到移動裝置(筆電、平板、手機),網頁在不同螢幕時是依照不同尺寸來改變編排(縮小、移動、改變或是隱藏某些內容),所以在設計初期必須以方格(塊狀)模組去建置,如此的網頁製作方式,將來不論是在各螢幕尺寸上顯示都可以更容易變化,所以不是RWD響應式網頁總是會用塊狀方式排版,而是方格(塊狀)是RWD網站的製作重要原則之一。


    總結

    目前習慣使用智慧型手機以及平板的人越來越多,如果您的潛在客戶使用智慧型手機進入您網站時,手機小小的螢幕只能看見小小的文字與圖片,還必須使用手指把螢幕的內容拉大縮小來閱讀,甚至有些還是以FLASH動畫呈現的頁面,目前瀏覽器是完全看不到網站的,如果是用戶遇到這樣子的狀況,不論內容有多豐富,也是會馬上關閉網站。

    RWD網站就是為了改善這個問題而產生的,RWD主要的功能就是讓您的網站,可以用最適當的比例與畫面來呈現在所有行動裝置上,讓用戶可以輕鬆的瀏覽您的網站獲取他們想要的資訊與商品,並且停留更多的時間。