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 讓它也能在電視上被瀏覽是種比較能通吃的方法。