サイト作成で質問です。

スマホ側の負担が大きいので本来はサーバー側で切り替えるべきですが、
スマホ側でという要望なのでjavascriptでcssを切り替える方法を…。
http://qiita.com/tabo_purify/items/e0210a1df321e9091a59

iphoneとipodは　iphone.cssを読み込む
androidは android.cssを読み込む
その他は pc.cssを読み込む

<script>
(function(){
    var _UA = navigator.userAgent;
    if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) {
        document.write('<link rel="stylesheet" href="/css/iphone.css">');
    }else if(_UA.indexOf('Android') > -1){
        document.write('<link rel="stylesheet" href="/css/android.css">');
    }else{
        document.write('<link rel="stylesheet" href="/css/pc.css">');
    }
})();
</script>

判別にはユーザーエージェントに含まれている文字列を用いています。

他機種のユーザーエージェントについては過去質問を参照
http://q.hatena.ne.jp/1329069916#a1131649

各要素をタイル状に並べて、画面の大きさなどでタイルの表示方法を切り替えるレイアウトを行うjqueryがあります。
http://isotope.metafizzy.co/
http://black-flag.net/jquery/20121128-4371.html
ためしにサイトを表示後、ブラウザの横幅を縮小してみてください。

レスポンシブWEBデザインを用いて、外部CSSを一枚追加するだけでiPhone/androidに最適化することができます。
http://mnemoniqs.com/web/one-css-smartphone/

http://shutto.com/
これはどうでしょうか。