スマホからこのサイトを見た時の見づらさに終止符を打つべく、重い腰を上げてレスポンシブ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デザインにすることも出来るとは思いますが、割に合わないというか、それにかかる労力が多すぎる気がします。