三周か四周遅れな話でレスポンシブだどうのこうの考える時代になんでこんなことをやっているんだと思いつつ実際深く考えたことなかったのでちゃんと調べた。
結論としてはsusyでも960px(or 940px)のグリッドは妥当になりうるかなというところ。
前提
そもそもこの前提を成り立たせるには条件があると思う。
- 現状横幅としては1200がmaxだろう
- 広告などでサイドバーを300pxにする制約がかかりやすい
- レイアウトはsusyのようなgrid systemで計算する
- 「960であれば割りやすい」というのはあるのだけど機械的に行うので、この理由を一旦除外する。
横幅を広げるほどファーストビューの情報量も増えるだろうし、特に広告などの制約が無いならサイトのユーザーに合わせて1024ぐらいでやっちゃっていいんじゃないかと思う。
計算
上記前提で、サイドバーが300pxにならないといけないとするとspan(x)で300pxが算出されるgutterとcolumnの組み合わせでないといけない。
そういう組み合わせがどの程度存在するのかを知りたいのでテキトースクリプトでざざっと計算する
var span = function(x, gutter, column){
return column * x + gutter * (x - 1)
}
var grid = function(g, gutter, column){
var arr = []
for(var i=1; i <= g; i++){
arr.push(span(i, gutter, column))
}
return arr
}
var num = 1 // 説明陽の通し番号
var gridNum = 12
var target = 300
for(var g = 10; g < 30; g++){
for(var c = 50 ; c < 90; c++){
var result = grid(gridNum, g, c)
result.forEach(function(r){
if(r == (target)){
console.log("Hit number: "+ num)
console.log(c, g, (result[11]+g)+" grid")
console.log(result)
console.log("")
num++;
}
})
}
}
この結果がこちら
Hit number: 1
52 10 '744 grid'
[ 52, 114, 176, 238, 300, 362, 424, 486, 548, 610, 672, 734 ]
Hit number: 2
66 12 '936 grid'
[ 66, 144, 222, 300, 378, 456, 534, 612, 690, 768, 846, 924 ]
Hit number: 3
63 16 '948 grid'
[ 63, 142, 221, 300, 379, 458, 537, 616, 695, 774, 853, 932 ]
Hit number: 4
88 18 '1272 grid'
[ 88, 194, 300, 406, 512, 618, 724, 830, 936, 1042, 1148, 1254 ]
Hit number: 5
60 20 '960 grid'
[ 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860, 940 ]
Hit number: 6
86 21 '1284 grid'
[ 86, 193, 300, 407, 514, 621, 728, 835, 942, 1049, 1156, 1263 ]
Hit number: 7
57 24 '972 grid'
[ 57, 138, 219, 300, 381, 462, 543, 624, 705, 786, 867, 948 ]
Hit number: 8
84 24 '1296 grid'
[ 84, 192, 300, 408, 516, 624, 732, 840, 948, 1056, 1164, 1272 ]
Hit number: 9
82 27 '1308 grid'
[ 82, 191, 300, 409, 518, 627, 736, 845, 954, 1063, 1172, 1281 ]
Hit number: 10
54 28 '984 grid'
[ 54, 136, 218, 300, 382, 464, 546, 628, 710, 792, 874, 956 ]
ふむ。組み合わせは色々あるようだ。
細かく見てみると
1番はまず小さすぎて論外だろう。
2,3も960よりは小さい。
3,6,7,9は奇数が含まれるしあえて好んで使う理由もないだろう
4,6,8,9は1200オーバーになってカバーできるユーザーが少なそう
となると残るは10の984gridか5番の960gridということになる。
あとは好き好みな感じだが14px広がる程度だとだいたい1行あたり1文字文ファーストビューが上がりやすくなるとは言える。
が、300以外の数値の数値の綺麗さで言っても960が選ばれるだろう。
ということで960pxのグリッドはやっぱ無難なんですね。という結論に至った。
1000〜1100px台でよさそうな組み合わせが出てくれればと思ったけどそういう感じにもならなかった。
Susyでの指定
ちなみにsusyのドキュメントの960gridのショートハンドが間違っていたので注意(pullreq済み）
@include layout(12 (60px 20px) split static);
もし10番の 984 gridを使いたければ
@include layout(12 (54px 28px) split static);
となるだろう。