レスポンシブデザインとは、
同一のhtmlでスマホやPCなどに最適化したデザインを表示するデザインです。

端的に言うとbootstrap3を利用します。

http://getbootstrap.com/

が、そのまま使用するとbootstrap風なデザインとなるので・・・

**使うのは骨組みだけ
グリッドデザイン(col-md-xなやつ)(※1)と
端末サイズ別表示(hidden-smやvisible-sm-blockなど)(※2)だけ

※1.グリッドデザインは以下のようなデザインのこと

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

※2.端末サイズ別表示

<div class="hidden-xs">
    .hidden-xs
     (スマホで768px以下で非表示)
</div>
<div class="hidden-sm">
    .hidden-sm
    (タブレット 992px以下で非表示)
</div>
<div class="hidden-md">
    .hidden-md
     (PC 1200px以下で非表示)
</div>
<div class="hidden-lg">
    .hidden-lg
     (PC 1200px以上で非表示)
</div>
<div class="visible-xs-block">
 .visible-xs-block
 (スマホで768px以下で表示)
</div>
<div class="visible-sm-block">
 .visible-sm-block
 (タブレット 992px以下で表示)
</div>
<div class="visible-md-block">
 .visible-md-block
 (PC 1200px以下で表示)
</div>
<div class="visible-lg-block">
 .visible-lg-block
 (PC 1200px以上で表示)
</div>

**やり方
既存のcssはそのまま残して、
bootstrap3.min.cssを追加します。
すると、既存のリンク色や文字間隔やサイズなどが多少変わるので、
それらを既存のスタイルに上書きするcssを追加してあげます。
工数ですが、私の場合は、30テンプレ数位でしたが、
2日程度で差替可能でした。

**PCのサイドメニューの記述
このようにすればタブレット、スマホではside_menuは表示されません。

<div class="row">
  <div class="col-md-8">main_contents</div>
  <div class="col-md-4 hidden-sm">side_menu</div>
</div>

**global_navの記述
pc用とsp用とでglobal_navを切り替えていきます。
検索botが読むと2重表示となるのでサーバサイドで表示非表示を制御した方が
いいかもしれません。ただ、読まれたからってseoで不利にはならないと思うので
一旦は問題ないでしょう。

<div class="hidden-xs">
  sp用globalnav
</div>
<div class="visible-xs-block">
  pc用globalnav
</div>

**総括
デザインの骨組み作成はデザイナーの仕事ではないと思ってます。
骨組みはbootstrap3などのライブラリを効率的に活用するのが良いかと思います。
(UI,UXデザイナーになると別かもですが、)
webデザイナーはサイト独自のデザインにのみ時間をかけるのが吉です。