Eyes, JAPAN Blog > レスポンシブデザインの勘所

レスポンシブデザインの勘所

yahata

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

最近のwebデザインの流行として
「レスポンシブデザイン(Responsive Design)」というものがあります。
これはPC, タブレット, スマホなどの
様々なデバイスの画面サイズに単一のHTMLで対応するものです。
例)http://www.creativesurvey.jp/

これまではwebサイトのモバイル対応といえば
UserAgentを判別し別ページにジャンプさせるというのが常套手段でしたが、
CSS Media Queriesの登場によって単一ページでのモバイル・多デバイス対応が非常に楽にできるようになりました。

と、このあたりは皆さんご存知だと思うので
実際のレスポンシブ開発におけるポイントなどを挙げてみようと思います。

1. CSSプロパティの活用
レスポンシブデザインでは通常のページよりも繊細な挙動が要求されます。
でもそれらを全てJSで制御するのは大変だし、
JSでstyleを扱うのはブラウザによる最適化を受けられなかったりして問題があります。
特にスマホではJSの実行速度はかなりネックになるので、
極力CSSで見た目を指定してあげることでブラウザの最適化も乗り、高速化が図れます。

2. プログレッシブエンハンスメント(Progressive Enhancement)
レスポンシブデザインはどんなデバイスからでも
常に最適化されたページを見られるのが利点ですが、
最適化というのは「どのデバイスからでも全く同じ見た目にする」のが目的ではありません。
例えば、通常ではbox-shadowを付ける部分でもモバイルではborderにするとか、
様々な環境に配慮して代替手段を使っていくことも重要です。

簡単ですがこんな感じです。
実際にレスポンシブデザインで開発してみると
通常のweb開発と違った感覚が必要です(少なくとも自分は)。

webエンジニアの皆さん、多デバイス対応にめげずに頑張りましょう。
IEにもめげずに…

Comments are closed.