close

天然水晶

本文章廣告來源:Google廣告

傳統網頁設計手機示意圖
手機顯示


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

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

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

2.移動裝置皆可使用RWD

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

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

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

4.提升關鍵字搜尋排名

Google在自己官方文章已發表過,“目前的搜尋排名方式以手機板為優先並且極力推廣手機瀏覽網站”。
GOOGLE官網公佈訊息:
行動裝置相容性測試網址:
此規範表示,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網頁方式製作,因為小螢幕時的顯示內容有限,並不適合大量的文章與圖片篇排,就算勉強顯示出來也會因為太大量的資訊造成必須一直往下滑動,但這對瀏覽者來說並不會比較方便,反而會造成瀏覽上的困擾。


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

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


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

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


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

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


總結

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

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


紫晶洞

arrow
arrow
    文章標籤
    實價登錄
    全站熱搜
    創作者介紹
    創作者 yyw5nzaleken 的頭像
    yyw5nzaleken

    孫盈如平板電腦的生活日誌

    yyw5nzaleken 發表在 痞客邦 留言(0) 人氣()