技術小僧のジョーです。以前お話ししたとおり、小僧ブログのスマートフォン最適化はレスポンシブデザインで実装していくことになりました。現時点での小僧ブログスマートフォン対応の要件は、以下の通りです。
“５つの事例から学ぶレスポンシブデザイン”でも紹介したように、レスポンシブデザインでサイト構築するためにはブレイクポイント”について必ず考えなければなりません。これはどの画面幅に対してどのCSSを適用するかを決めるものですが、基本的には①スマートフォン②タブレット③PCの3つの画面幅を想定すべきでしょう。ところがこのブレイクポイント、実は標準的な数値や定石というものが無いので、サイトによって設定の仕方がバラバラなのです。そこで、ブレイクポイントを決定する際には、まずは基準のデザインをひとつ設定して、そこからウィンドウサイズを変更したときに内容が最適に表示されるように適宜ブレイクポイントを設定していく、というのが妥当な方法だと考えています。（小僧ブログではもともとのデザインを基準のデザインとして設定します。）
細かいことはさておき、とりあえず今回は2カラムしかないので、ブレイクポイントは1つだけ！！つまりスマートフォンとPCの2パターンに対応させることにしました。そして肝心のブレイクポイントは630pxに設定しました。この630pxを超えると画像が荒くなり、高解像度画像で対応したとしても今度は読み込みに時間がかかります。スマートフォンでサイトを見るなら、「表示の軽さ」というのはとても重要ですよね。
とまぁ御託はさておき、実はこのサイト、既にレスポンシブデザイン化されています！PCでご覧の方はウィンドウサイズを小さくしてみてください。いかがですか？？元のデザインのままスマートフォンに最適化されましたね。今回はPC用の固定幅レイアウトにスマートフォン用の変動幅レイアウトを加える形で設計しました。参考までにレスポンシブしない旧サイトを載せておきます。
■おすすめ記事
京都の寺社の、見やすい2サイトと動きがかっこいい2サイト＋おまけ