GIF動畫帶你秒懂什麼是RWD網站!響應式網頁設計

Responsive Web Design 響應式網頁設計,俗稱為RWD網站,是指工程師透過程式上的設計,讓網站能夠隨著瀏覽者的螢幕大小,自動變換成最適合的內容,給訪客觀看,藉以提升使用者體驗。

還是不懂?來看看RWD的具體行為表現

拖曳視窗大小來觀察RWD

如果你還不懂什麼是RWD,沒關係,這邊馬上用畫面來說明給你看!

RWD網站示範

拉瀏覽器的寬度大小就是一個很好的測試RWD的方式,從最開始的電腦螢幕大小⋯⋯再到平板電腦大小⋯⋯最後是手機螢幕大小,可以觀察幾個重點:

在不同寬度大小的變化下,網頁的內容會跟著做位移和改變,當畫面不夠大時,「雙欄式」的設計會轉為「單欄式」,上方的選單按鈕,會變為隱藏式,按壓選單鍵才會顯現。

即使是用手機般的大小來觀看RWD網站,網頁上的資訊依然保持清晰易讀,文字保持適當的大小,讓瀏覽者輕易閱讀網頁資訊,不需要用手指去做縮放來進一步瀏覽。

沒有RWD的網站,在手機上的呈現

沒有RWD的網站 在手機上的呈現

 

沒有RWD的網站當你在手機上觀看的時候,會發現他長得跟電腦上一模一樣,但是變得很小,因此必須透過手指放大縮小的方式來進行瀏覽,使用上變得辛苦,使用者體驗非常的不好。

RWD所帶來的好處

更好的使用者體驗

RWD帶來更好的使用者體驗,提升現代大量的手機使用者用手機瀏覽你網站的意願,現代用手機上網的人口早已超越用電腦上網的人口,因此除非你想流失掉超過50%的上網族群⋯⋯否則注重手機上的使用者體驗的RWD已是不可或缺。

RWD vs 手機版網站

智慧手機剛開始普及的早期,RWD觀念還未興盛,企業主那時的解決方案是:額外製作一個手機版的網站,當訪客用「手機」進入到網站時⋯⋯就引導訪客進入手機版網站,桌上電腦則保持進到原本的網站,但缺點是企業主得同時維護兩個網站,因為手機版網站需額外製作,自然也算是另一個額外的網站,不但需要額外的製作成本,連更新資訊時也得兩邊更新。

而RWD的網站則沒有這個困擾,因為RWD是透過程式讓同一個網站,根據不同螢幕大小的訪客自動重新排序,因此企業主不但不需要額外成本去製作另一個網站,更新網站時,也只要保持專注在一個網站上即可,非常的方便。

RWD已成標準化配備的響應式時代

智慧型手機已經全面普及了,而RWD網站也是⋯千萬不要再做沒有RWD功能的網站了,雖然很多網站公司依然會提供客戶選擇要不要RWD功能,造九頑五只幫客戶製做有RWD功能的網站,因為我們認為這已經是不可逆的趨勢,絕對沒有一間廠商是不需要RWD的!也不會因為有RWD功能就收費比較貴,因為我們認為這已經是現代網站的「標準配備。」

 

在這裡,你不會被廣告打擾,所有的學習內容都是免費的。
如果這讓你感到滿意,一杯咖啡能讓我們走得更遠。

請 Perry 喝杯咖啡
上一篇為什麼選用WordPress建置網站?原來有這麼多好處! 下一篇官網網址要這樣命名,域名選.com .tw有差別