Responsive Web Design 是現在網頁製作的趨勢,但有些情況不能提到新做網頁、或是改版,就喊 RWD 直接上。隨著螢幕視窗尺寸改變網頁內容排版方式是 RWD 的特色,卻也成為我在某些時刻不想用它的原因,很多時候 RWD 解決了問題、卻產生更多的問題…如果你的網站功能複雜要呈現的資料極龐大,是否要採用 RWD 技術製作網站真的要好好考慮斟酌下。

使用情境

「什麼情況下使用者會用手機瀏覽網頁?」

基於這個大前題、Mobile Web 和 Desktop Web 就不該長一樣,功能也會有所不同甚至新增刪減。不是使用者看不到就沒關係,即使設了 Display:none 一樣會被瀏覽器讀入,只是畫面上不會顯示。Mobile 和 Desktop 甚至 Smart TV 載入同一套 HTML、同一套圖片 就會產生「圖片尺寸、網路傳輸」兩個大問題。

圖片尺寸

Responsive Web Design 就是用 CSS 或 JS 控制一頁 HTML 解決各種尺寸的設計,但從手機 320px 到電視螢幕 1920px 都做在同一頁不覺得哪裡怪怪的嗎?我不想提手機上的圖要到電視也可以清楚瀏覽的話,圖片是要做小放大還做大縮小這種問題。也不想提萬一就是沒辦法用向量處理所有圖片的話要怎麼辦。

當然能利用 CSS 設定 max-width 讓圖片放大到一定尺寸就不再變動,但若跟潮流放了張滿版大底圖當 Header …這張底圖需要多大的尺寸?等比例放大後在電視上看起來是什麼樣子?會不會導致圖片高度太高把文字往下推擠、讓版面拖得很長?

網路傳輸

基於 RWD 是一頁搞定各種螢幕尺寸的作法,所以不管是哪一種尺寸的 HTML 通通先會被瀏覽器載完再來決定要不要呈現。在台灣或日本這種網速快、流量大的國家沒什麼感覺。但在中國大陸、泰國或是馬來西亞這些上網很貴網路不穩的地方時,就會發現讀很久還是看不到網頁。加上滿版大底圖的設計,網站有可能等半天還是打不開,還超消耗流量。加上手機效能不曉得挺不挺得住,如果想打進某些國家的市場,入境隨俗非常重要,太慢或容易害手機當掉的網站能吸引多少使用者?

話說回來,我個人不太喜歡用不到的東西也要被載入這件事,而且是大量被載入、然後隱藏,非常多此一舉的感覺。

結論

Responsive Web Design 運用在功能簡單的網站時沒有問題,一旦頁面資訊複雜功能多的時候就會發生 Crash 的可能。當某個網站在手機上永遠打不開,或是操作過程中斷斷續續的不穩定,使用者還會信任這個網站甚至這個品牌嗎?之前提過大圖縮小會糊、小圖放大也會糊,圖片尺寸差距如此懸殊,是不是該好好思考如何讓一張圖從 320px 到 1920px 通吃的方式?

話說回來,如果一個網站功能複雜到要考慮放棄 RWD 的作法,資料量八成也是挺龐大的。如果將手機和電腦版的網頁分開製作,後台維護和資料庫就要多管一套。是能夠解決 RWD 造成的圖片尺寸和網路傳輸問題沒錯,但卻增加不少成本在維護管理上。似乎沒有一套完美的方法,只能在優缺點之間做取捨了。

我自己在考慮拆 2 套加上 RWD 的作法,畢竟看了幾個國家的調查報告,Mobile 320px 使用率還是很高,Desktop 螢幕又在比大塊(都不怕打 WOW 看不到左上角血條)、再加上 Smart TV 越來越普及,也許手機版歸手機版、電腦版另做 RWD 讓它也能在電視上被瀏覽是種比較能通吃的方法。

comments powered by Disqus