レスポンシブWebデザイン3

レスポンシブWebデザインの実現には通常HTML5、CSS3 を使用します。

それ以前のHTML、CSSでも実現できますが、簡潔に記述するにはHTML5、CSS3で記述する事になります。

CSS3に対応していないブラウザ(IE6〜8)の場合PC版が表示されるだけでよいと割り切るか、メディアクエリの代替えとしてcss3-mediaqueries-jsを使用すれば良いでしょう。css3-mediaqueries-jsの使用には以下のコツが必要です。

  • メディアクエリの指定を@media規則で指定しする。
  • media typeを省略しない。

私はCSS3に対応していないブラウザ(IE6〜8)の場合はPC版が表示されるだけでよいかと思います。Windows 系のスマホにはIE6~8は積んでいないでしょうし、Windows 7 のタブレットを使っている一般消費者はほとんどいないでしょう。ただでさえ、PC版だけでもレイアウトの崩れがないかチェックや調整が必要ですのでレスポンシブWebデザインをCSS3に対応していないブラウザ(IE6〜8)に適用するのは費用対効果に見合いません。

 

さて、以下の機能は通常のレスポンシブWebデザインでは考慮されません。しかしコンバージョンを得るには重要と思われる機能です。

例えば右サイドバーがあり、スマホのレイアウトに移行するとき、その中のコンテンツに対して以下の動きを設定できる事

  • 上に移動する
  • 下に移動する
  • 消す/表示する(これは普通に可能)

つまり、スマホのレイアウトに移行するとき、通常右サイドバーに配置したブロックはcssのフローで下に落ちます。一方、右サイドバーの上の方にあるコンテンツは重要で読者に見せたいものです。なので、メインコンテンツの前に見せたいのです。

管理上を考えると、cssクラスのネーミングルールで管理し、ブレークポイントで移動するのが良いかと思いますが若干html自体を動的に書き換えてしまいます。SEO的によろしくないという意見があります。

実現方法はこれから考えますが、まとまったらまたご紹介します。

 

そうこうするうちに、Googleが通常サイトをスマホ版に自動変換するツールの提供を始めました。1 年め無料、2年目以降月額1,180円/月です。

http://www.howtogomo.com/jp/d/

試してみると、以前試した海外のサービスと同じでした。さすがGoogle、動きが以前よりサクサクしています。その時は、大事なサイトを事業継続性がまだ不明な企業に任せてよいか迷って着手しませんでした。Googleが提供するとなると安心感が全く違いますね。既存サイトは取り急ぎ適用したいと思っています。

 

Posted in

コメントを残す

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

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">