Responsive Web Design

http://techbus.safaribooksonline.com/book/web-design-and-development/9780133053029

ch1. 立論

我們從現實生活中借了「畫布」這種「在固定(材質、尺寸、形體)的載體上創作」的概念來,並且企圖於數位媒體上複製這種想法。但在 Web 上,我們對於創作的載體(瀏覽器、螢幕,甚至可用的字體、互動的形態等)無法控制那麼多。

因此為了控制好創作的載體,讓各種不同的載體有一樣的外觀,我們將字體單位下成 px、做成固定尺寸的圖、設計固定尺寸的版面。一旦螢幕尺寸小於我們的預期,那訪客就只能看到部分頁面了,這甚至可能影響到網站營運(試想有重要的部分超過可視範圍)。

But first, we must “accept the ebb and flow of things.” — John Allsopp

獨立的 Mobile 版,通常只是代表網站製作者又再一次地「假設」了另一個固定的載體。當這個本來被設計給 320px 寬螢幕載體的頁面被分享到 SNS 上、並且由桌機使用者開啟閱讀時,會是另一種不適。

過去,建築上的設計會屹立數十年甚至數百年不動,但現在有新式的「回應式建築」(Responsive Architecture)概念,讓建築回應人的狀況而改變,例如為了回應空間視覺上的需求而動態改變透明度的玻璃等等。此種回應式建築改變設計師的思維,為回應人的行為改變空間設計、而非設計空間以形塑人的行為。

回應式設計的三要素:

  1. 有彈性的、以網格規劃的版面
  2. 有彈性的圖片與多媒體尺寸
  3. CSS3 media-query

ch2. Grid

先說明 Grid 在設計上的重要性,接著開始實作

  • 文字尺寸:將絕對單位 px 化為相對單位 em 的步驟。目標大小px / 基底大小px = em 數值,小數點以下位數可以盡可能提供給瀏覽器。
  • 區塊尺寸:將絕對單位 px 化為相對單位 %。(總寬度設為 90%,並置中,這樣兩邊各留 5% 白邊)目標大小px / 基底大小px / 100 = % 數值,小數點以下位數可以盡可能提供給瀏覽器。
  • 設定某元素 margin 之相對單位值時,其尺寸計算是相對於此元素之容器的寬度
  • 設定某元素 padding 之相對單位值時,其尺寸計算是相對於此元素的寬度

ch3. Image

max-width: 100% 可以確保超過版面的大圖不會撐開破版,IE6 不支援這個東西,改用 width: 100%; 可以處理,不過大圖縮小沒問題、小圖卻也會被放大。純 CSS 解法是另外設 class 給大圖(白名單解法)。

IE7- 跟 Fx2- 對這種動態縮放圖片有縮放品質問題,IE7- 可以靠 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale") ; 改善問題,雖然可能要付出效能上的代價。在頁面上放 http://bkaprt.com/rwd/16/ 就可以自動在 IE7- 為動態縮放圖型加上這玩意。

用背景圖「偽裝」等高雙欄的方式依然可行,但原來做給 fixed-width 的背景圖要以等比例方式重新考慮:

  1. 做一張超級寬的背景,例 3000px
  2. 原來的兩欄假定為 568px+332px(共 900px), 則依據比例將此超級大圖的兩欄分界定於 1893px
  3. 依然將此圖設定為背景,只是擺在 568/900 = 63.11111111111% 的地方

這樣即使可見範圍寬了窄了,在 63.1111% 的地方仍會是兩個欄位的分界點。(Bob: 多欄位的狀況必有最小欄寬的問題,此依 media-query 將必然小於最小欄寬的狀況改以另一組 CSS 替代即可。)

若真有必要讓背景圖有縮放能力,則可採用 CSS3 的 background-size 或以 JavaScript 動態計算(http://srobbin.com/jquery-plugins/backstretch/),又或者用 media-query 視情況調整。怎麼選擇端視需求。

也可以考慮在 container 用 overflow:hidden,一樣是看需求。

有些狀況,例如使用資料太豐富的圖片(infograph 等),會讓縮放或 overflow:hidden 都沒什麼用。這時可能要考慮針對不同尺寸設計不同版本的圖、再依情況送出給使用者。

Media Queries

Creative Commons License
本站文字除特別聲明者外,係採創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,利用前請見說明