【レスポンシブデザイン】お役立ちサイトのチャンプルまとめ。

あ、sass3.2来てら。hakoishiです。

横目に見つつ、本日はレスポンシブまとめ。
構想の参考にしたい事例から、実制作で役立つ技術記事までチャンプルです。

ギャラリー

• 21 Inspiring Unique Responsive Web Design Examples

  海外のレスポンシブ事例集。

• Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたアーカイブサイト

  タイトルの通り、国内のレスポンシブ事例集。
  スマホ、タブレット、PCのプレビューが表示されていてザッピングにも便利。

• Responsive Layouts, Responsively Wireframed

  汎用的なワイヤー例。右上のナビでPC、モバイル表示を切り替えてみましょう。
  直感的で解りやすいので、お客様への説明にも使えるのではないでしょうか。
  あと、このサイト自体もレスポンシブですね。

制作の参考になる記事など

• ASCII.jp：ゼロから始めるレスポンシブWebデザイン入門

  全7回の連載記事。一通り読めば、レスポンシびりたくて堪らなくなってると思います。
  是非一読を。

• Rriver » レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い

  グリッドだと避けて通れない問題。

• [CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ | コリス

  設計前、いろいろ考え込んでハマってしまう前に見ておきたいまとめ。

• 可変グリッドレイアウトで実現するレスポンシブWebデザイン（前編） | ADC - Adobe Developer Connection

  Dreamweaver CS6の新機能、「可変グリッドレイアウト」を活用してレスポンシブデザインを実装する方法を解説した前後編記事です。

実装に役立つスクリプト

• Respond.js

  IE8以下でメディアクエリがつかえるようにしてくれるスクリプト。使い方は下記サイトが詳しいです。
  IE8以下でレスポンシブWebデザインを実現するRespond.js | HTML5/CSS3, JavaScript 次世代WEB研究開発

  IEにそこまでの対応が必要か？という点においては物議を醸しているようで。
  Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論 | ゆっくりと…
  「4.有用なリソース」に、コンディショナルコメントを利用してWindows Phone（ブラウザがIEなんですよね。しかも端末によってはIE7相当）にスマホ用のレイアウトを適用させる方法がいろいろ提案されています。

  制作する立場だとウィンドウ幅によるレイアウトの「変化」に目が行ってしまうのですが、本来レスポンシブは「最適化」の手段で、複数のレイアウトをユーザーが目にする機会は稀です。
  意外に忘れがちなように思います。

• css3-mediaqueries-js

  上記Respond.js同様、IE8以下でメディアクエリがつかえるようにしてくれます。

画像関連

• レスポンシブWebデザインの画像問題の解決法5種 │ Design Spice

  JS、サーバーサイド、API、画像の代替、画像サイズのミニファイ、の5種に分けて紹介されています。
  複数の手法が紹介されている項目も多く盛りだくさんです。

• レスポンシブウェブデザインの画像問題を解決する「Response JS」-JavaScript Library Archive

  ウィンドウ幅に応じて読み込む画像を変更できるJSライブラリ。
  使い方によっては必要な画像のみ読み込ませることが可能です。
  特長として余分なhttpリクエストを飛ばさないことを上げているのが好感触。

確認環境

• Responsive.is – Display and present responsive web designs

  ブラウザで各デバイスの表示をシミュレートできます。
  右上のフィールドに確認したいサイトのURLを入力して「GO」。上部のアイコンをクリックするとそのデバイスでの表示に切り替わります。

まとめ

「cssを使えば、同じhtmlでブログのサイドバーを右にやったり左にやったりできるんだ！」というところからcssに興味をもって、そして今に至る私にとってはレスポンシブは心踊る技術です。
けど、特にスマホユーザーには通信面のデメリットを負わせてしまいがちなことは忘れずにいたいところです。全ては見てくれるユーザーありき。
いかに軽く、少なく作るか。