2013年02月26日 – 下午7:43

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

photo

承上篇「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.44

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

Screen Shot 2013-02-26 at 下午5.30.29

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

Screen Shot 2013-02-26 at 下午5.42.00

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

Screen 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.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 的可能性呢?

Related Posts Plugin for WordPress, Blogger...