レスポンシブルなテーマとは？
レスポンシブ・ウェブデザインに対応したデザイン
画像解像度をベースに表示を切り替える。
(画面の幅に合わせてレイアウトも変わる。ソースは変わらないが、
幅に合わせて自動的にCSSを変更している)
レイアウトはおろかフォントのサイズも動的に変更される。
レスポンシブウェブデザインの利点
- 制作コストの削減
- UIで切り替えてそれぞれ作りこんでいくのは大変
- カスタム投稿タイプにテンプレートで対応する作業、基本テーマとWPtouchのテーマで2回やりたいのか?
- 各デバイスに適した見せ方ができる(という建前)
- コンテンツの管理が楽
- 更新者はモバイルで確認する必要がない(エミュとか引っぱりだす必要がない)
レスポンシブウェブデザインの利点
- マークアップエンジニアの力量が要る(モノによっては無理なときもある)
- 場合によってはデザインの差し戻しもありうる
- プロジェクト関係者全体でデザインが共有されている必要がある
- 仕様が完璧ではない(すごく流動的)
- 個別対応よりユーザーがダウンロードするデータ量が増える
- CSSの記述量が増える(画像サイズは結局同じもの)
- iPhoneがキレイすぎる功罪
- PCと等倍だと画像が荒く見えてしまう
レスポンシブウェブデザインの確認
- 実機
- エミュ
- Webサービス(responsive.js)
メタ情報
1. viewport スケール率を調整
minimum-scale
maximum-scale
2. Media Queries
ブラウザ幅によるCSSの条件分岐を行う
iPhone縦 320px
iPhone横 768px
iPad縦 960px
iPad横、PC
widthによってCSSを変更することが出来る。
例2. HTML5-Reset
例3. Twenty Eleven
800px 650px 450px....
320pxと480px
モバイル対応が主な使いどころなので、
IEはもう無視していいんじゃないだろうか。
具体的に何をするか
http://www.lukew.com/ff/entry.asp?1514
- 可変レイアウト
- カラム落とし(狭くなったらサイドバーを下に落とす、ナビゲーションが2段になる)
- レイアウト組み換え
- 微調整ですます
- 画面外に出す(e.g. FBのiPhoneアプリ)
e.g. Kobe IT Festival
カラム落ちを利用して、左右に配置されているサイドバーが、
メインコンテンツの下に配置される
ナビゲーションの問題
- はじめから可変にしておく
- 無理くり調整する
- 想定される解像度に合わせてエレメントを用意する
画像の問題
- 最大幅の設定が基本
- GoogleMapで不具合を起こすこともある
