AdobeのTen steps to building a photo gallery website with Adobe Dreamweaver CS6は結局大したことなかったけどとりあえずポイントだけまとめ。

@media only screen and (min-width: 横幅) {
CSSスタイル
}

っという使い方でそれぞれのブラウズサイズを判断してCSSを適用してくれるという事。
ここにつきます。
これが出来れば、スマホサイトやらタブレット向けの最適化はかなり楽にできます。
特に、WordPressみたいに一つのソースで複数の端末向けに見せなきゃいけない場合には重宝します。
Ktai Styleもなんだかんだでガラケー向けになっていてスマホ向けには少々物足りない感じがするのでなおさらですね。
まあ、頭の良い人達が開発しているので今後いくらでも改善されると思いますが。

ただ、以前からどちらにした方がいいのか迷っていたのがPCサイズを基本にしてそこからそれぞれにサイズ別でスタイルを上書きするのか、スマホサイズを先に作ってそこからPCサイズを作っていくのかっという問題。
今回の例で行けばスマホサイズを先に作ってそこからPCサイズを上書きするスタイルでした。
っと言っても結局同じスタイルを書いているのでなんの参考にもならなかったんですが、よりシンプルなスタイルが書ける方をベースとした方が後々リセットしたり上書きしたりする手間が省けるので効率がいいんです。
でも、答えは出ない。
まあ、その時々でデザインは違うし必要になることも違ってくるのでケースバイケースでということが答えかなっと思います。
この辺は経験を積むしかないですね。
ただ一つ言える事は、あらかじめ各サイズのデザインやレイアウトを考えておくことが余計な作業を減らすコツです。（何においても言える事ですが）
まずは、「全体像をつかんで流れを考える」大事です！

参考までに僕が制作に携わったFluid Grid Layoutのサイトをご紹介
窓用フィルムで遮熱 ウィンドウフィルム施工専門店 フィルムラボ 福岡