このブログをレスポンシブWebデザインに対応した時のお話あるいはメモ

2012年10月17日

are you responsive?

やろうやろうと思っていてなかなかできなかったこのブログのレスポンシブWebデザイン対応がとりあえず完了しましたよ。

とはいえ、設計からちゃんとやり直した訳じゃなく、今表示されているコンテンツをどこに配置するか、程度の軽い対応になってます。

本当はタグ一覧とかカテゴリ一覧とかを上部ボタンでポップアップメニュー化しようかとか考えてたんですけど、そこまで頑張るんなら別のテーマで作った方が良いんじゃない?と思い直して今の形になりましたとさ。

色んな方が色んなとこで「レスポンシブWebデザインは銀の矢ではない。適材適所だし仕様(要望)によってはレスポンシブWebデザイン対応を行う方が別htmlで制作するよりも工数がかかることだってある」って仰ってるので僕が特に言うようなことはないんですが、ちゃんとそういう事を考えられるプロジェクトに携わりたいし、ちゃんと説明ができる立場でいたいし、ちゃんと説得できる人間にならないとね、と思うくらいです。

実際にやった事

ブレイクポイントは3つ設定してます。特にデバイス毎の指定をしているわけではないですが、大体一般的な感じのブレイクポイントじゃないかなぁとおもいます。

各ブレイクポイントでの実装内容

通常指定している横幅より小さいサイズ(940px以下)

スクロールバーがでたりするのを防ぎたいのでサイズを可変にしました。何となく6:4くらいかなぁと思ってたので左カラムを60%、右カラムを35%にしました。何故合計が95%かというと、左右のカラムにマージンをつけたかったからですね。

あとは、カラムの可変化に伴い発生したサイズ固定コンテンツの横幅問題にも対応しました。具体的には画像とかYouTubeとかFacebookのiframeですね。

facebookだと下記を記述してとりあえず親ボックスのサイズ目いっぱいになるように変更しました。

.fbcomments,
fb_iframe_widget,
fb_iframe_widget[style],
fb_iframe_widget iframe[style],
fbcomments iframe[style],
fb_iframe_widget span {
  width: 100%;
}

あ、もうひとつあった。全体の幅が小さくなるとサイトロゴと右のアイコンが被ってしまうので、アイコンを上部に配置してロゴに上マージンを追加しました。

右カラムが明らかに小さくなるサイズ(640px以下)

可変にしてると結構横幅が小さくなった際には右カラムの横幅がかなり小さくなってしまいます。なので、潔くフロートを解除して下に落としてます。

アイキャッチの隣に本文があるとヤなサイズ(460px以下)

もう今までの対応で大抵問題ないんですが、最後に、このブログはアイキャッチの右に本文を回り込ませてますから、本文カラムの横幅が短かったら読みにくい表示になるんで、本文は回り込みを解除させてます。

やってみて思ったこと

既存のサイトをレスポンシブWebデザイン対応するのは面倒ですね。そして手の込んだことがやりにくいですね。でも今回は結局やることを絞ったので割と楽でしたよ。

「僕もレスポンシブWebデザイン化したいけど面倒そう…」って思ってる方はこんな感じで軽くやってみても良いかもですね。自分のブログなら色々実験的にできますし。

あとついでに、結構前に何かの拍子でロゴ作ったんですよね。多分ゆるふわのロゴの話してる時くらいかなぁ。でも縦にも大きいロゴなんでどう使えばいいか全然分からず数か月放置してたんですよね。いやー世に出せてよかったです。

他にこんな事も書いてます

FBでコメント

コメント1つ

  1. ほほう、読みました。 RT @anticyborg: 書いたよ:このブログをレスポンシブWebデザインに対応した時のお話あるいはメモ – http://t.co/46kUZEei

トラックバック/ピンバックはありません。