-
如何實現「RWD響應式網頁設計」?
-
先說明傳統網頁設計與RWD響應式網頁設計的最大差異點，傳統網頁設計會先設定一個固定寬度，隨著螢幕尺寸越來越大以及解析度越來越高的情況下，從原本800像素到1024像素，1280像素再到1920像素的發展，但問題就產生了，當以最高1920像素設定寬度時，舊型電腦螢幕或是手機螢幕，將會出現無法等比例縮小，反而瀏覽者需左右移動方式閱讀，實屬不方便。
因此為了因應這樣的問題，RWD響應式的網頁技術就誕生了，RWD (Responsive Web Design) 網站，簡單來說，就是能夠依照瀏覽者使用的螢幕尺寸，自動縮放成最佳比例，而有別以往的等比例縮小，RWD響應式網站設計能夠重新排版，不需辛苦的一邊放大文章或照片比例，一邊移動著螢幕。
而技術上如何達到RWD網頁設計的效果呢? 最主要還是在CSS和JavaScript的設計與設定，舉例來說，在一般的設定的判別方式為：
電腦螢幕版本尺寸：1024px以上
平板電腦版本尺寸：768px ~ 1024px之間
手持裝置版本尺寸：768px以下
但目前的螢幕尺寸越來越多，因此將會更細分可支援各種品牌的尺寸，只是在這之前，我們還是必須先了解網站最主要鎖定的目標是電腦版本還是手持裝置版本，原因有以下幾個：
1.內容取向：
使用電腦螢幕閱讀時，我們會習慣從左而右，並且能夠在大螢幕上加入需呈現的圖片搭配文字，但是隨著螢幕尺寸越來越小，內容顯示會向下方延伸，反而會將文字和圖片設計為上下排列，如果網站內容是非常強調圖文合一的情況下，那手機閱讀時，感受強度將會大大減弱，如銷售珠寶類型或是需要圖片對照規格的購物網站，就需要特別注意排版方式。
2.文章截斷點：
閱讀一篇文章或新聞，往往會因為整體的流暢度而影響瀏覽者對文章的重點理解，比如說在電腦螢幕上，分層橫式三排方式呈現，但在手機瀏覽器上，只會出現一排，大多數CSS屬性都可以實現斷點的技術，但如果沒有將彼此的關係搞清楚，那將會出現一個句子還沒說完就跳到下一段，很容易弄的一團亂而導致瀏覽者看不懂文章重點。
3.圖片製作：
這分為兩個部份說明，首先是速度，如果圖片是合成圖文美編，通常會使用點陣圖，如:jpg、png、gif，如果是單純圖庫的照片，建議可使用向量圖 SVG、圖標字體，經過優化的圖片通常檔案比較小，開啟速度快，但需要注意的是，有些舊型瀏覽器是不支援向量圖。
其二就是圖片內容，如果圖片內容是類似宣傳DM般，有著標語或說明文字時，在電腦瀏覽器觀看，效果非常好，但是等比例縮小至手機瀏覽器官看時，會完全達不到任何宣傳效果，因為字會因為太小而無法看清楚，因此建議在設計時，設計多種尺寸的圖片，因應各種瀏覽尺寸。
4.字體需求：
一般在閱讀網頁時，除了圖片之外，字體也是需要載入時間，字越多載入頁面的時間也就越長，而且在字體選擇上，如使用特殊字體，需上傳字型檔，雖然美觀，但讀取速度慢，如果使用系統字體，雖然變換不大，但在讀取速度上，會有著明顯的優勢，因此建議當鎖定的是使用手機閱讀的族群，還是使用系統字體。
雖然RWD響應式網站是必需且必然的趨勢，但也是有極限的，如表格這樣的元件會相當不好設計也不好閱讀，因此還是會使用電腦版本閱讀的方式，直接超出視窗範圍，使用傳統左右滑動方式顯示，另外就是分析報表或是類似甘特圖等，都還是有其限制，因此在設計前，還是先考慮哪些族群是優先載具瀏覽者。
杰鼎數位科技提供客製化的RWD響應式網站方案，了解客戶需求後，再提供最佳解決方案，並且在設計過程中，提供無限次修改，真正實現客製化RWD響應式網站設計的精神。
其他相關文章：
想升級RWD，請參考全方位RWD網站設計解決方案
