レスポンシブWebデザインのコーディングで気をつけた事

スマホからこのサイトを見た時の見づらさに終止符を打つべく、重い腰を上げてレスポンシブWebデザインに対応しました。その時に感じた事などをメモしておきます。

モバイルファースト大事

レスポンシブWebデザインでは言われまくっている事ですが、「モバイルファースト」大事です。

モバイルファースト本来の難しい考え方は分かりません。単純に考えて、デザイン制限の多いスマホからデザインをしないと、PCに流用していく所でつじつまが合わなくなって来るんですね。

word-break:break-allで強制改行

特にスマホにおいて幅が狭いため、欧文が文中に入ると改行位置がすごい事になります。「word-break:break-all;」を入れておく事で、1文字ごとに改行してくれて効率よく文字が収まってくれます。

当サイトでは、タイトルのような大きな文字の箇所に対して適用しています。

広告の扱い方

PC・スマホ・PC/スマホの3種類のパターンでそれぞれに広告を出し分けたくて、WordPressのテーマ内に広告の出し分け処理を挟んでいます。 例えば当サイトの場合、記事タイトル下のバナーはPCとスマホでサイズに合わせたバナーを表示するようにしています。

最近のAdsenceはモバイルにも対応しているとの噂を読んだ記憶があるのですが、当サイトはスマホでは幅300px以下のバナーしか出さないようにしています。(PCはそれ以上の幅のバナーも出しています)

CSSはスマホ→タブレット→PCの順番で適用するように

具体的には、「レスポンシブなウェブサイトを作ろう (全11回) – プログラミングならドットインストール」の作り方、という事です。

複雑なレイアウトをレスポンシブwebデザインでやらない方が幸せ

基本的に、スマホ用のCSSを記述した後、差分上書きとしてPC用CSSを記述するやり方を取っています。
当サイトのようなシンプルなレイアウトの場合、スマホのCSSが10に対して、PCの差分が2くらいですんでいます。

PCの差分が半分を超えたら、レスポンシブで無理矢理やらず、PCとスマホを別に作った方がいいと感じました。半分を超えると2回別々に作るのとさほど手間が変わらない労力な気がします。

レスポンシブwebデザインを作ってみて感じた事

レスポンシブwebデザインは、様々な端末に汎用的に対応するための技術です。
自分の作りたいデザイン、レイアウトは常にスマホとPCの両方を考えながらデザインする必要があります。

レスポンシブwebデザインは「汎用性を重視」しているため、もしも作りたいサイトがPCやスマホに特化した機能や仕掛けが多い場合は、素直に2つ分制作することをおすすめします。

特化した機能を盛り込みながらレスポンシブwebデザインにすることも出来るとは思いますが、割に合わないというか、それにかかる労力が多すぎる気がします。