響應式網頁設計-Responsive Web Design
什麼是響應式網頁設計?
自2010年美國設計師Ethan Marcotte 所提出因應「多螢幕時代」來臨的網站改善方案,以流體移動方式來適應螢幕大小調整網頁內容、縮放、重新編排或隱藏部分內容,就是目前常稱的響應式網頁設計(RWD)。
約於2010年之前,網頁設計師所建置的網站,大都是依照一定的精確尺寸來做設計,比如說1024×768或1920×1080,尺寸是固定的,然而在手機、平板、筆電蓬勃發展之下有著數十種不同螢幕尺寸規格,致使精確尺寸的網頁設計已無法滿足所有的網頁瀏覽裝置,使用畫面較小的平板或智慧型手機來瀏覽傳統設計的網頁時,將會因為頁面寬度過寬而導致瀏覽者在瀏覽頁面時的不便,因此為了滿足手機瀏覽者的需求,一般在進行網站製作時通常會再另外製作「手機版」的網站,以滿足這些族群的需求,然而手機版網站雖然可以解決大多數手機瀏覽網頁者的不便,但對於花錢進行網站建置的企業來說,將額外增加一個網站建置的成本及對於SEO的不利。
RWD設計的原理即是利用CSS3與Javascript網頁技術,讓電腦、平板、手機網站使用同一網站的圖文內容(亦即所有裝置皆來自於同一份html)以及資料庫,對於不同尺寸或係解析度的設備螢幕上,網頁程式會依據使用者的裝置,自動改變網頁的版面與設計,以符合版面大小之樣式來呈現網頁上的內容。
為什麼需要一個RWD網站?
1.使用者習慣
據國家發展委員會調查分析,2017 年數位機會調查報告,結果顯示,民眾上網率為 82.3%,達歷年新高水準,12 年來成長近 20 個百分點;在各年齡層差異方面,調查顯示,12-39 歲民眾的網路使用率逾 98.7%,40-49 歲民眾上網率略降為 96.1%,50-59 歲也具有 83.3%的使用經驗。
而目前手機的搜尋功能仍是以搜尋網頁為主,舉例來說,如果要找餐廳,一般人會使用手機網頁瀏覽器搜尋餐廳,而非花時間去另行下載APP。所以開發出來的APP就需要再另外行銷宣傳,讓使用者知道並引起下載的興趣。
2.開發與維護成本比APP便宜許多
RWD響應式網頁設計在製作方面相對較於APP來快速與便宜許多,以目前APP開發就必須有iOS版及Android版本,開發時間加上審核上架時間相當長,且APP的曝光方式有限,相較於網頁瀏覽方式,較為受限。
另外APP完成之後要不定期需針對新版本測試,才能確定APP在新手機上能運作順暢。
而以目前新手機上市的頻率來看,這是永遠不會結束的測試地獄。
3.品牌形象一致
同一網站適用於各種裝置,自然不用針對不同版本設計不同的視覺
4.利於搜尋引擎最佳化(SEO)
Google在自己官方文章已發表過,“如果您尚未建立適合透過行動裝置瀏覽的網站,我們極力推薦您這麼做”。
GOOGLE官網公布訊息:https://developers.google.com/webmasters/mobile-sites/
此訊息表示,GOOGLE極力推廣網頁設計以自適應方式製作,對於關鍵字自然搜尋排序也有加分的。
5.利於分享
只要分享網址就可以看到最新內容,無需下載APP就能使用。且APP要到iTunes、Google Play下載,APP若要更新,必須重新審核過後,再通知所有下載用戶更新。
反觀自適應網頁與手機網頁,只要管理者更新網站,每次連上網頁都會是最新版本。
RWD網頁當然有缺點,而這些缺點是?
1.太複雜的內容
RWD網頁會隨著螢幕大小作編排的變更,讓使用者以更適合的方式瀏覽,但是如果相對複雜的功能、內容都要塞進手機的小螢幕裡,勢必會出現非常長的網頁內容,或太多繁雜的功能造成使用者觀看使用上的困擾。
2.舊版瀏覽器
RWD網頁是使用最新的HTML5、CSS3技術,版本過舊的瀏覽器並沒有完全支援這些最新的技術,所以在舊版瀏覽器上可能會出現破圖無法點擊等事件。
但隨著時間的推進,舊版瀏覽器勢必會被市場淘汰掉,到取代為新版瀏覽器。
3.開發時間與成本比傳統方式多
因為使用目前新的程式語言,且必須要思考不同尺寸的相容性問題,所以在開發時間上會較傳統網頁更長。