4. CSSスプライトを使うべし
CSSスプライトは、複数の画像を1つにして、それぞれのポジションを指定して表示するCSSテクニックです。画像の数だけ増えるHTTPリクエストを減らすことができるので、サイトの高速化につながります。
ちなみにスプライト画像はSassとCompassを利用して作る方法がかなりおすすめっす！
この方法だと後から追加した画像が加わるたびにスプライト画像が再生成されるので、修正・追加があったときにめっちゃ楽になります。
【参考】
CSSスプライトについてあれこれ。
http://lopan.jp/css-sprites/
Sprite画像でもう悩まない？！SassとCompassで速攻Sprite画像を作る方法に感動！
http://webya.opdsgn.com/webtech/sassandcompassforspriteimage/
5. Retina対応すべし
Retinaディスプレイでは通常のディスプレイに比べて解像度が倍以上あるため、通常画像をそのまま使うとぼやけてしまいます。
iPhone4から採用されたRetinaディスプレイですが、最近ではMacbook Proなどでも採用されましたよね〜。そのためサイズが2倍の画像を用意するなどの対策が必要になります。
【参考】
Webサイト＆WebアプリのRetina対応方法まとめ
http://kray.jp/blog/retina-web/
WebページをRetina対応させるテクニック
http://www.atmarkit.co.jp/ait/articles/1308/29/news004.html
6. 表示サイズによる画像切り替えを行うべし
レスポンシブデザイン制作時では、PCサイズの時とモバイルサイズのときで、違うサイズの画像を表示させたいって時がしょっちゅうあります。その時に、メディアクエリでモバイルサイズ時は”display: none”にするという方法があります。
でもこれはただ単に非表示にしているだけで、結局は画像を読み込んでしまっています。なので、サイト表示速度が遅くなる原因になってしまいます。
そこで、ブレークポイントによって読み込む画像を切り替える手法がおすすめです。下記のサイトなどを参考にぜひ試してみてください。
【参考】
jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験
http://black-flag.net/jquery/20120808-4047.html
breakpoints.jsを使用したレスポンシブでの画像切り替え
http://www.webopixel.net/javascript/804.html
7. テーブルを工夫すべし
レスポンシブデザインでテーブルをどうするかに悩んでしまう方は多いのではないでしょうか？ 「画面サイズが狭くて、ど〜うしてもはみ出してしまう…」なんて時はないですか？
そこで、例えばtableのdisplayプロパティを変更したり、jQueryを使ったりなどの工夫が必要です。
【参考】
【必見】レスポンシブデザインの表組みはこんな方法で実現できる！
http://matome.naver.jp/odai/2135605473334772801
レスポンシブWebデザインでテーブルを使う時の小技
http://design-spice.com/2012/11/01/responsive-table/
さいごに
レスポンシブデザインで知っておくべきことは他にもたくさんあると思いますが、今回は自分自身が制作時に「これは特に意識しとかなきゃなぁ〜」って感じていたことを中心に書かせていただきました。
みなさんの参考になれば幸いです！
レスポンシブデザインのサイト制作を支援します
制作についてのお問い合わせ
