RWD 與線框圖

曾經有一段時間,網頁只需專注一種尺寸設計,並且在單一瀏覽器IE上完成測試即可,因此我們透過線框圖進行內容設計,並且利用HTML與CSS加以複製實現:


如今,那個美好的年代已不復存在,今天的網頁開發人員面臨無數裝置,一個網頁必須在不同的裝置上自動調整以適當的呈現,除了傳統的960px寬度版型,設計上至少必須考量其它兩種常見的裝置配置-手機與平板:


然而這無法解決實際的問題,今日的裝置發展已經沒有所謂的標準尺寸,手機、平板與 PC 的界線正逐漸模糊,固定版型的線框圖設計,將難以真實反映網頁內容在各種尺寸裝置上呈現的真正樣貌,而這也是透過 RWD 技術建構網頁必須思考的問題。

減少依賴固定尺寸的線框圖設計,轉以內容為主,專注於內容的配置,透過 CSS 與 HTML 進行動態版型的實踐,如此一來可以讓網頁的設計更貼近在裝置上呈現的狀況。

沒有留言: