2013年7月21日（日）、札幌国際ビル 国際ホールで開催した、CSS Nite in SAPPORO, Vol.10 with Microsoft「HTML5+CSS3 Web Camp 2013」のフォローアップとして、鷹野 雅弘（スイッチ）の「マルチデバイス対応とCSS3、レスポンシブWebデザイン」の資料を公開します。
- スライド（PDF、135ページ、5.0MB）
- 音声（MP3、40:41、39.1MB）
- 動画（Vimeo）
パスワード：Kiu6ZhIe5G
フォローアップメッセージ
セッション3の 「マルチデバイス対応とCSS3、レスポンシブWebデザイン」を担当した鷹野です。
復習すると、このセッションでは、次の3つの柱でお話ししました。
- CSS3の新しいセレクター：クリーンなHTML
（CSSの指定のためだけにid/classを付加する必要が減る） - CSS3の新しいプロパティ：画像いらず
（読み込み速度やメンテナンス性の向上、retina対応など） - @ルール：メディアクエリを使ってのレスポンシブWebデザイン
一方、レスポンシブWebデザインを構成するのは、次の3つの要素でした。
- A flexible grid（リキッドレイアウト、px → %、em）
- Flexible image/Fluid image（画像を可変に）
- Media Queries（幅によって、読み込ませるCSSルールを変える）
Googleも推奨ということで沸いているレスポンシブWebデザインですが、スマホ対応であって、スマホ最適化でないこと、また、スマホ最適化は、スマホが使われる場面、使う人などを考慮して、 PCとは異なるコンテンツを提供してもいいのではないか？ という提案とその事例をご紹介しました。
ぜひ、よい事例があれば教えてください！
参照URL
- The Shapes of CSS
- Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法
- The Boston Globe
- Media Queries（レスポンシブWebデザインのショーケースサイト）
- Hello Fisher
- 名古屋名物みそかつ 矢場とん
- 富山マンテンホテル（地図はファーストビューにはありません）
- 機種数3,997：「断片化」を続けるAndroid（WIRED.jp）
補足
大胆な仮説だけでいいの？
いえいえ、そういうわけではありません。
ファーストビューに何を置くか、という優先順位の問題です。
（ことばが足りずに失礼しました）
PC用、スマホ用で、画像の出し分けをした方がいいですよね。
セッション終了後にいただいた質問です。
こちらのサイトでは、jQueryを使って差し替えを行っています。
http://lp28.cssnite.jp/
デフォルトは「CSSNiteLP28_logo_pc.png」。
別途「CSSNiteLP28_logo_sp.png」を用意し、480ピクセルを境に切り替えています。
（78行目、replaceWidth = 480;）
その他の手法は、下記にまとまっていますのでご覧ください。
レスポンシブWebデザインの画像問題の解決法5種 │ Design Spice
http://design-spice.com/2012/06/13/responsive-web-design-image/
同一ソースでレイアウト切り替え
レスポンシブWebデザインにせず、同じHTMLを使って、PCとスマホで異なるレイアウトを実現し、PCサイトが見たいユーザーには、見せられるようにするにはどうすればいいの？ という質問を懇親会でいただきました。
DTP Transit
http://www.dtp-transit.jp/
スマホで見ると、画面下に［モバイル ｜ パソコン］という切り替えのテキストが表示されます。
これをクリックすることで、レスポンシブWebデザイン的なCSSの読み込みを制御しています。
ソースコードを見ればわかりますので、確認してみください。
もっとゆっくり
下記に2本のムービーがありますので、ご覧になってください。