Responsive Web Design響應式網頁

RWD響應式網頁設計

  • 何謂響應式網頁設計(RWD)?

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

    約於2010年之前,網頁設計師所建置的網站,大都是依照一定的精確尺寸來做設計,比如說1024x768,類似海報、報紙、書本設計等等,尺寸是固定的,然而現在有著數十種不同螢幕尺寸規格,如智慧型手機、ipad與筆電等等多種螢幕尺寸,如今網頁設計師常常因為螢幕尺寸與比例太多而困擾。

    響應式網頁設計(RWD),成為新的趨勢是很自然的,然而響應式網頁設計(RWD)並不是時尚也不是新的美學,它用來試圖解決目前多種尺寸螢幕瀏覽網頁所產生出來問題的解決方式,以不同螢幕尺寸與解析度,讓網頁設計師有更多的方式去思考,如何將響應式網頁設計(RWD)應用在網頁上的方式,響應式網頁設計(RWD),以CSS3技術製作,以百分比的概念與液態彈性的編排設計,網頁本身會隨著螢幕的大小去滑動隱藏縮放等變化,即時產生相對應的改變,好讓瀏覽者可以舒適的狀態瀏覽。

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

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

  • 您為什麼需要一個RWD網站?

    RWD(Responsive Web Design 響應式網頁設計)是因為移動裝置的使用率逐漸增加,所產生出來的網頁設計編排方式。

    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極力推廣網頁設計以自適應方式製作,對於關鍵字自然搜尋排序也有加分的。

    5.給用戶最好顯示效果

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

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

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


  • RWD網頁設計的缺點

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

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

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

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

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

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

    總體而言,RWD,可以解決目前絕大部分的瀏覽尺寸問題,所以勢必成為網頁設計的新趨勢,事實上以網頁設計公司而言,新的網站製做時,業者也八成願意以RWD方式來架構,在不久的將來RWD會變成主流的製作方式。


  • 製作響應式網頁需要瞭解的事

    目前大多數都是智慧型手機以及平板電腦的習慣使用者,並且年齡層與普及率是越來越多的,如果您的潛在客戶使用行動裝置進入您網站時,小小的螢幕只看見一堆小小的文字介紹以與圖片,還必須使用手指把螢幕的內容拉大縮小來閱讀,有些是以FLASH動畫呈現的頁面,瀏覽器是完全看不到網站的,如果是用戶遇到這樣子的狀況,不論內容有多豐富,對網站還有信任感嗎?

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

    → 網頁設計方案說明
    → 請觀看RWD模組作品
    → 請觀看RWD客製化作品