Share this post

Tweet

Grid 格子列表之 CSS 前製規劃 (下) Responsive Design

photophoto

承上篇「Grid 格子列表之 CSS 前製規劃 (上)」主要整理了寫 Grid Display 時總寬度、元素寬度和間距寬度的算法,今天想分享的是加上 Responsive Design 時,土法煉鋼的算法

發表上篇之後,小時候就很崇拜的 Even Wu 大哥跟我介紹了 Susy 這個 Grid System,專門給 Compass 用的,試用過後還滿喜歡的,這邊也介紹給大家。

Susy: Responsive grids for Compass. http://susy.oddbird.net/

不過因為我要的是內容呈現時的格子,每個頁面需要的 Grid Display 元素寬度又不盡相同,加上我已經土法煉鋼地用手算了,研究魂燃起,還是算完它吧!

在 Facebook 分享時,有位厲害的數學大師教了我幾種思考方式,真的是獲益良多,有興趣可以參考這篇

獎金獵人因為前後端加上資料架構全部重寫,只有一個月的時間,來不及做 Responsive Design,上線後 debug 和各種客服又源源不絕,一直沒時間好好來 Responsive 一下。只能不斷說服自己我們需求不高:因為有四分之一的使用者解析度寬度都是 1024px,總寬度 960~980px 是最舒適的。

若用百分比寬度,我私以為 UGC 網站若使用百分比寬度的內容很不妥,若為了 Responsive 硬把內容擠來擠去又不夠優雅,對於網站的視覺設計負擔也太重,所以還是選擇固定寬度 + Responsive。總之我想慢慢來,先把最重要的比賽列表,保守地弄成符合最多數人使用的螢幕寬度。

規劃 Responsive Design

開始著手規劃獎金獵人的 Responsive Design。去 Google Analytics 把所有解析度做分析。一般來說,如果你只去看前幾名,數字可能不準。這是我們 GA 的畫面。

Screen Shot 2013-02-26 at 下午5.16.44Screen Shot 2013-02-26 at 下午5.16.44

看起來好像 1024×768 最多,再來是 1366×768,然後是 1920×1080。但是細看後面,卻是長尾效應贏過前面的名次。我們現在只需要看寬度,所以可以點搜尋框旁邊的「進階」。會看到進階搜尋的選項。(點圖可以放大唷)

Screen Shot 2013-02-26 at 下午5.30.29Screen Shot 2013-02-26 at 下午5.30.29

設定為「包含:螢幕解析度:比對規則運算式」,右邊欄位輸入 10[0-90-9]x,會篩選出所有寬度是 10xx 的訪客,按套用。

Screen Shot 2013-02-26 at 下午5.42.00Screen Shot 2013-02-26 at 下午5.42.00

然後往上看,可以找到「造訪」的百分比,是 25%。

Screen Shot 2013-02-26 at 下午5.41.47Screen Shot 2013-02-26 at 下午5.41.47

用這樣的方式,把幾種常見的訪客瀏覽器寬度抓出來,做了整理。目前獎金獵人使用者的解析度排行如下:

寬螢幕(寬度介於 1200~1440px):40%

傳統螢幕(寬度約 1024px):25%

超寬螢幕(寬度介於 1600~1920px):15%

其他就是手機大小了。(手機版我是不打算用 Responsive Design,因為顯示的內容架構不會一樣,所以很慚愧地,mobile first 被小妹暫時放一旁,因為本站目前手機瀏覽量也極小,畢竟查比賽不是一種娛樂也不太有行動的需求,但有漸增之勢,所以手機版仍一直掛在我心上。)

看到這樣的排行真是心驚,原來大部分使用者螢幕寬度都已經超過 1200px 了,原本以為我們使用族群年紀小,以學生為主,學生的螢幕都不大才對(完全偏見),但我錯了!

所以現在目標是為 1200px 寬度的使用者著想,讓他們可以看到更寬的內容。原本是 5 格,希望變成一次可以看到 6 格。

Breakpoint 設定為寬度 1200px 以上

但因為我不想重新設計每格的寬度,所以保留一樣,是 184px,單列格數是 6 格。這樣公式是:

單格寬度A x 單列格數 + 間距a x (單列格數-1) = 總寬度

也就是:

184×6 + 15x(6-1) = 1179

也就是獎金佈告目前狀態。在螢幕解析度寬度超過 1200px,總寬度變為 1179px,一列有 6 格。

Screen Shot 2013-02-26 at 下午5.51.04Screen Shot 2013-02-26 at 下午5.51.04

可是問題來了,因為新的「後花園作品集」的單格寬度較大,原本是一列 4 格,若在寬度 1200px 底下變成 5 格就會超過總寬度 1179px,所以若希望統一總寬度,勢必是要為了這兩種分區重新計算寬度了。

花水木專頁上的Chun-Hung Arnose Chen指導(見此),我得到一些靈感。手寫了公式如最上圖並整理如下。

W2 = 1200+x (總寬度:希望是1200上下)

A1 = 6(184+y) (比賽總格子寬需為 6 的倍數,因為一列 6 格,y為單格寬度)

M1 = 5A (比賽總間距寬,B為單一間距寬度,希望在 5~15 之間)

A2 = 5(239+z) (作品總格子寬需為 5 的倍數,因為一列 6 格,z為單格寬度)

M2 = 4B (作品總間距寬,B為單一間距寬度,希望在 5~15 之間)

所以要找出 x, y, z, a, b,是能通過以下公式的。

1200+x = 6(184+y) + 5A = 5(239+z) + 4B

但小妹資質駑頓、數學不好,實在不知如何解上面的公式,所以只能一個一個數字套用。

因為 x, y, z 都希望越接近 0 越好,a, b 希望是 5~15 之間,所以先把 a, b 固定。有以下可能

1200+x = 6y + 25

1200+x = 6y + 30

1200+x = 6y + 35

1200+x = 6y + 40

1200+x = 6y + 45

1200+x = 6y + 50

1200+x = 6y + 55

1200+x = 6y + 60

1200+x = 6y + 65

1200+x = 6y + 70

1200+x = 6y + 75

1200+x = 5z + 20

1200+x = 5z + 24

1200+x = 5z + 28

1200+x = 5z + 32

1200+x = 5z + 36

1200+x = 5z + 40

1200+x = 5z + 44

1200+x = 5z + 48

1200+x = 5z + 52

1200+x = 5z + 56

1200+x = 5z + 60

以上兩團公式的 x 必須相同,所以有 11 x 11 種可能性。而且變數還是太多,所以先把 y 固定到 184 並一一套用以上公式,再把 z 這個數字固定成 239 並一一套用,看哪個得出的數字最接近 1200。並且如果 y, z 不是 0,還必須回到驗算正常寬度是否可行

以下是正常寬度底下各個寬度。

w = 980 (總寬度980px)

a1 = 5(184+y) (比賽總格子寬需為 6 的倍數,因為一列 6 格,y為單格寬度)

m1 = 4a (比賽總間距寬,a為單一間距寬度,希望在 5~15 之間)

a2 = 5(239+z) (作品總格子寬需為 5 的倍數,因為一列 6 格,z為單格寬度)

m2 = 3b (作品總間距寬,b為單一間距寬度,希望在 5~15 之間)

公式:

980 = 5(184+y) + 4a = 5(239+z) + 3b

一次一次試過之後,目前得到的解答如下:

x = 27 (寬螢幕總寬度為 1227)

y = 8 (比賽單一格子寬度 184+8 = 192)

z = 0 (作品單一格子寬度 239 不變)

a = 10(正常螢幕比賽間距)

b = 8 (正常螢幕比賽間距)

A = 15(寬螢幕比賽間距)

B = 8 (寬螢幕作品間距)

因為我只知道一個一個套用來算,不知可以看到這邊的你,是否可以幫我算算看,是否有 x, y, z 更接近 0 的可能性呢?