Your browser does not support JavaScript!
翰寧電腦-IT資訊安全防護最佳解決方案
HN.COM 優質服務團隊
網頁設計規劃

翰寧電腦所製作的都是時下最主流的響應式網站(RWD)

 

何謂Responsive web design (RWD)

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

 

約於2010年之前,網頁設計師所建置的網站,大都是依照一定的精確尺寸來做設計,比如說1024x768,類似海報、報紙、書本設計等等,尺寸是固定的,然而現在有著數十種不同螢幕尺寸規格,如智慧型手機、ipad與筆電等等多種螢幕尺寸,如今網頁設計師常常因為螢幕尺寸與比例太多而困擾。 RWD成為新的趨勢是很自然的,不過這種新的做法並不是因為更時尚,也不是新的美學方式,它用來試圖解決目前多種尺寸螢幕瀏覽網頁所產生出來問題的解決方式,以不同螢幕尺寸與解析度,讓網頁設計師有更多的方式去思考,如何將RWD網頁設計(響應式)應用在網頁上的方式。

 

RWD網頁設計(響應式),以CSS3技術製作,以百分比的概念與液態彈性的編排設計,網頁本身會隨著螢幕的大小去滑動隱藏縮放等變化,即時產生相對應的改變,好讓瀏覽者可以舒適的狀態瀏覽。 在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自適應網站則可以避免這種困擾。

 
 

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

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

 

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

以下為RWD網站範例: