【ミニマルな労力で終わらす】レスポンシブWebへの変換方法【3STEPだけ】


 

レスポンシブとは

本来は人に合わせて変化する建築からネーミングを取ったが
Web上では、マルチデバイス対応するための
マルチサイズ対応を意味するだけ。

対応方針

対応方法は、画面サイズが変わったらレイアウトしなおす方法がベストかもしれないが、
大変なので、 リキッドデザイン+ 複数のレイアウトを用意することで対応する。

複数レイアウトを用意

複数のレイアウトは、大まかに PC / Tablet / スマホの3つとし、
それぞれ 例えば 980px 以上、  320px 以上、  320px未満と分けて定義し
それぞれのレイアウトを作る。

レイアウト

スマホではなるべく1列に、それ以外は複数列も可能とする。
(今回は、1列 or 複数列でバッサリ斬り分ける)


スマホレイアウトの時にしか表示しないもの、
PCレイアウトでしか表示しないものを整理する。

PC タブレット スマホ
ヘッダー
(サイト名)
グローバルナビ 横に並べる 同左 アイコン1文字表示し
クリックしたら下のメニューに飛ばす方法など考えられる。
メインビジュアル
(ブログのメインタイトルや画像など)
コンテンツ 1~3列 1~2列 1列

サブコンテンツ
(関連リンクや  前後ブログページのナビ)

サブナビ
(ブログ全体のナビなど)

フッター
(サイト全体の固い言葉など)

あまり、特別にやることはない。
HTMLの生成では、以下のことを意識しておく。

  • スマホの時に向けて、横幅を大きくしない(TABLE, IMGなど)、
  • 固定長ではなく、リキッドレイアウトで 100%の幅指定のようにパーセントでの指定を意識する。
  • 左右に表示することをだいたいあきらめる。  →あきらめきれない時(※)


広告上、
アニメやグラフィックは  コストパフォーマンスを考えれば
大抵の業種ではあまり必要ない。作成者のエゴとしていったん考慮外。

対応箇所:3STEP

以下の問題点を解決

  1. テキストが小さい/幅があふれる
  2. リンクが近い
  3. 画像があふれる。画像を320px(スマホサイズ)以下にする

テキストが小さい/幅があふれる

表示がおかしくなる原理

ブラウザが デバイスサイズではなく 横:980pxと仮置きの幅で想定してレンダリングし
(viewport未設定) それを スマホの場合(portraitで 横:320px) 1/3に縮小表示する。

対応方法

view-point で 描画サイズをデバイスサイズに指定しておき
コンテナ単位でリキッドレイアウトを意識する。


<meta name=viewport content="width=device-width, initial-scale=1">

テキストサイズが
例えば PC: 文字サイズ12px / 画面横幅980px  → スマホ(4px/320px) へ自動変換していたものが
この指定をすることで変換後も 12px/320pxになるのでテキストが小さくなりすぎない。

ちなみに、テキストの大小 は px単位ではなく 相対単位 em or % を指定しておけば pxの密度に影響を受けにくい

リンクが近い

リンク文字の幅を広げる。
ただし 上の設定でだいぶましになるので、ほぼ対応はないはず。

画像やテーブルをスマホサイズ以下にする

画像は以下の設定をすることで画面サイズにフィットする。 それ以外は、固定長で大きい値を指定しないようにチェック・修正する。

 

(※)

また、PCのみ表示させたり、スマホだけ表示させるようにCSSのidタイプを作っておく。
(例えば、 HTML上で、id="onlypc"とすると PCサイズの横幅の時のみ表示され
  それ以外は表示されない)

その他

宣伝枠 アドセンスの変更など対応しておく

おまけ

pcのみかどうかを出しわけると、個人的にやりやすかった。
最後は、img

 

総括

手の込んだことをしないようにしたら
意外と複雑にならなかった。

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です