幅を狭くしてもグリッドを極力活かすデザインフレームワーク「Responsable Grid System」
Responsable Grid SystemはレスポンシブWebデザインに対応したグリッドデザインフレームワークです。
レスポンシブなデザインフレームワークでは幅を縮めるとグリッドの数が一気に減るのが多いようです。しかしResponsable Grid Systemを使えばPCレベルのデザインを極力活かしたグリッドデザインが実現できます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.58.44.1363149212.png)
ヘッダー、リスト、画像表示など。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.58.54.1363149216.png)
もちろんレスポンシブ。画像サイズも変わっています。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.59.07.1363149219.png)
テーブル、フォーム。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.59.15.1363149222.png)
幅が狭い場合のテーブル。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.59.30.1363149225.png)
グリッド。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 10.59.56.1363149228.png)
もちろんレスポンシブ。幅が狭くなる対応というのが特徴かも。
Responsable Grid Systemはネストされたグリッドに対応し、CSSのresetを行っていないのが特徴になります。また、画像も幅に合わせて読み込みを変更できるようにしています。あまりガチガチではないので、一定の自由度を確保しつつWebデザインができそうです。
Responsable Grid Systemはスタイルシート製、Creative Commonsのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
レスポンシブWebデザインに取り組みたいと思う企業は多いのですが、大抵トレードオフになることが多くて諦めているケースが多いようです。特に注意するのはクライアント向けサービスとしてのレスポンシブWebデザインは無茶であるということです。
自由度の高いレスポンシブWebデザインは大抵失敗します。細かい表示制御に対して弱いことが多いので、どこかで破綻するはずです。さらにIE6以降の対応などが要件にあがると投げ出したくなるはずです。自社向けで、どこまで自由度を下げられるかを検討した上で取り組むのが良いでしょう。
A Responsive HTML CSS LESS SCSS Framework | Responsable Framework