前回のリニューアル時に一応、RWD（Responsive Web Design）まがいの機能を盛り込んだのですが、あまりに独自でイイ加減過ぎたようなので勉強し直してみました。(^^ゞ

とは言うものの相変わらずの独自路線ですが・・・
何をしたかと言うと

• レイアウトに TABLEタグ を使うのをやめました
• デバイス別にテンプレートを用意しました
• メディアクエリを使って表示を変更しました
• 各デバイスのエミュレータでテストしました

おおまかに言うとこんなところですが、基本的に今までのページソースに大きな変更を加えないかたちで改修してみました。

今までは、楽なのでレイアウト用にボーダー（枠線）の無いテーブルを多用していました。
だって、余白も位置揃えもサイズも・・・とってもとっても便利なんですから！

でも、HTML5では本来の目的である「表」を表示させる以外の利用法は非推奨だそうです。
レイアウトにはスタイルシートを利用しなさいと・・・悩みました。(T_T)

キラリ！
いいものを見つけました。

CSS の displayプロパティにはテーブル関連の値（table,table-row,table-cell,...etc）があるじゃないですか。
これらを使って書き直したのですが、今までよりもスッキリしたように感じます。

私なりに、レスポンシブの基本とは画面サイズ（特に表示幅の解像度）の違いに対応して適切な表示をすることだと解釈しました。

そこで、まずはアクセスしてきた端末（デバイス）別にテンプレートを切り替えて表示内容を変化させようと思いました。
ま、結局は後々のメンテナンスを考慮して１つのテンプレートにしましたが、デバイス別のCSSファイルを読み込ませることで表示内容を変更することにしました。

なお、デバイスの判断はPHPのユーザーエージェント（ $_SERVER['HTTP_USER_AGENT'] ）の中に特定の文字列が含まれているかで判断しました。
Android系は、「Android」という文字列の他に「Mobile」という文字列も含まれていればスマートフォン、「Mobile」という文字列が含まれていなければタブレットとしました。

現在の表示幅に対して意図したレイアウトで表示されるようにCSSのメディアクエリを使用しました。

これで、表示幅に対してフレキシブルにレイアウトの表示内容を変更できるようにしました。
ちなみに、PCのブラウザでもウィンドウサイズを変更するとその変化を見ていただけると思います。

実際に各端末でどのように表示されるのか試してみたのですが、大活躍してくれたのが Google Chrome のデベロッパーツールでした。
主要な端末のリストから選択するだけで簡単にエミュレートできるので大変便利です。