1. Responsive Design
tomoyuki kashiro (@Tkashiro)

2. Liquid Design
から
Responsive Design

3. Liquid Designとは？
Webページの表示領域が変更されても、従来の表示を維持させる
デザイン手法
・絶対値指定→相対値指定
( % , em )
・例：楽天市場TOPページ

4. 背景
・ディスプレイの高解像度化
・ディスプレイサイズが大きくなる
・高解像度になる
高解像度ユーザに対して余白の大きい画面ではなく
より多くの情報を表示させる
小さな画面、低解像度の考慮はなし

5. 変化 - 多ディバイス-
多くのディバイスが登場
スマートフォン タブレット スマートTV

6. 問題点
・端末ごとに最適なUIは違う
・解像度、画面サイズが小さい為、
Liquid Designでは対応でいない

7. Responsive Designとは？
端末の画面サイズに応じてUIを切り替えるデザイン手法
下記デザイン手法から構成される
・Liquid Design
・Fluid Image
・Media Query
・Responsive Type Setting

8. Liquid Design
各コンテンツの要素サイズを相対値(%)で指定
--- CSS ---
#main {
width : 100% ;
padding : 10% ;
margin : 10% ;
}

9. Fluid Image
画面のサイズを基準にして、画像を縮小拡大して表示
-- CSS ---
#mainImage {
max-width : 30% ;
max-height : 30% ;
}
※IE系はmax-*をサポートしてない為、widthとheightで指定

10. Media Query
特定の条件に応じてスタイルを切り替える指定
※CSS3のプロパティ
--- CSS ---
@media screen and (max-width : 640px) {
#main {
widht : 300px ;
}
}

11. Responsive Type Settings
画面サイズに応じてフォントサイズを変える
--- CSS ---
@media screen and (max-width : 480px) {
#main {
font-size : 14px ;
}
}

12. 事例 - Kings Hill Car -
http://www.kingshillcars.com/
画面幅い応じて、デザインが変化
その他の例
http://mediaqueri.es/

13. 結論
・端末により最適なUIは違う
・最適化されたUIをクライアントサイドで
実装できる方法の1つがResponsive Design