レスポンシブにする大まかな部分は先の書籍を参考にしたのだけど、いろいろはまった部分で参考にさせていただいたサイトをいくつか列挙しておきます。自分用の備忘録も兼ねて。
スマホサイトにはHTML5とCSS3を気兼ねなく使うことが出来ます。レガシーなIEのことを考えなくて済むので。で、ナビゲーションバーなどにグラデや、角丸、シャドーを使えますが、この設定がいちいち数字で打ち込んでいると煩わしい。そこでこのサイト。
Grad3
直感的にグラデのナビゲーションバーのCSSこーどを作れるサイトです。これは楽ちん。
javascriptを使った画像のランダム表示を使っていたのですが、これだと画像そのものを任意に縮小表示出来ないので、jQuelyを使ったスライダーを実装することに
FlexSlider
IE7以上に対応、レスポンシブにも対応で、コードそのものが軽いのにそれなりにカスタマイズできちゃうという優れものです。ただし、jQuelyと前から使っていたprototype.jsがかぶって使えないので
jQueryとprototype.jsを共存させる方法
を参考にして設定しました。
CSSハック
FlexSliderはIE6だと無限ループのバグがあるのでスターハックにてdisplay:none;にして表示しないことにしました。
ナビゲーションバーのhoverを使ったロールオーバーはandroidでは問題なく使えるのですが、iosでは駄目みたいなので、似たような効果を出せないモノかと探していたら
:target擬似クラスを使ったプルダウンメニュー
にいいものがありました。CSS3のみしか使えないのですが、スマホなら大丈夫。早くIE8以前は駆逐されて欲しいモノです。
ナビゲーションメニュー横の「矢印」、これもスマホではあった方がいいアイテムだけど、中央そろえはどうやったらいいのかしらと探していたらこのサイト
矢印が右にあるメニューの作り方
おかげで矢印綺麗に揃いましたよ。
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。
ここでナビゲーションバーのカラム落ちを防ぐCSS書式をぱくりました。box-sizingのプロパティを使うやり方。

スマートフォン対応のためのレスポンシブWebデザイン実用TIPS
PC用表示・スマートフォン用表示の切り替えのコードをさがしたのですが、中々見あたらず、やっと発見。これでスマホでも任意でPCサイトに切り替えることが出来ます。

スマホサイトでは画像の大きさがネックになりますので出来るだけスリム化したいモノです。その時役に立ったのが
画質を落とさずに最大90%画像のファイルサイズを圧縮できるツール『Caesium』
これ結構使えます。jpegだとだいぶダイエットできますぞ。
Responsinator
Screenfly
この2箇所で動作確認をしました。持っていない機種でもそれとなしにどう表示されるかは分かります。
後はここ
HTMLクイックリファレンス
タグの確認のために使っております。

今回、スマホサイトを作って思ったのですが、ほんとにCSS3はいろいろ出来て良いのですが、そのたびにIE8以前のIEがいかに弊害になっているかということ。セキュリティのこともあり、早く一掃されててくれればいいのですが、IE6のブラウザレイアウト以外は嫌だとか、XPを使い倒したいといういう人もいて困ったもんです。XPは優秀なOSだったけど、セキュリティの面から言うと危ないよ。２ちゃんなんかで踏んだ日にゃ、ゴニョゴニョ。