on:2012年6月19日sponsorsレスポンシブWebデザインのサイト設計・実装・確認に役立つツールとリソースを紹介します。Planning和訳:スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか各デバイスのサイズ一覧を踏まえ、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのがよいか。Wireframedスマートフォンとデスクトップでのレイアウトの切替のパターン。Patternsデバイスごとにどのようにレイアウトを変更するか代表的な5パターン。QueriesResponsiveデザインを採用しているウェブサイトのギャラリー。PatternsResponsiveデザインに人気の高いナビゲーションの7つのパターンの利点と欠点。[ad#ad-2]GridpakResponsiveデザイン用のグリッドを設計できるオンラインサービス。全体のサイズ、カラム数、カラムのパディング、溝のサイズ、ブレイクポイントを設定できます。Responsifyカラム数、溝、ブレイクポイントを決めて、さくっとグリッドを生成。可変タイプのグリッドを設計ツールです。Grids可変用のグリッドを数値入力でぱっぱっを作成します。Grid可変用のグリッドを出来栄えを確認しながら作成します。Queriesの実装方法のまとめモバイルファーストなのか、レガシーブラウザも考慮するのか、といった要件に合わせた実装方法のまとめ。Queriesを使った実装を解説。使ったテクニックやテキストの処理など、Responsiveデザイン用の小技集。1280pxに設定したResponsiveデザイン用のフレームワーク。Skeltonグリッドをはじめ、ボタンやタブなどのUIエレメントも豊富に用意されているResponsiveデザイン用のCSSとJavaScriptのセット。LayoutStaticとFluidのいいとこ取りをしたスタイルシートのレイアウト。Queriesを利用できるようにするスクリプトです。高解像度のRetinaディスプレイ用に高解像度の画像を表示するスクリプトです。PluginRetinaディスプレイにはRetina用の高解像度の画像を表示するjQueryのプラグイン。Imagesこちらはスタンドアローンのスクリプト。Retina.jsスタンドアローンとLESS版があり、サーバー上に画像が用意されていたら自動で置き換え。Responsiveデザインの確認Screenflyデスクトップ、タブレット、スマートフォン、テレビの各デバイスでの表示を確認。Responsinatorタブレット、スマートフォンの各デバイスでの表示をまとめて全部表示します。Screenqueriesグリッドベースに表示サイズを変更可能で、localhostにも対応。Queriesのデバッグ。ShadowChromeからスマートフォンやタブレットを連動させるデバッグツール。