Responsive design

Responsive Design

tomoyuki kashiro (@Tkashiro)

Liquid Designから

Responsive Design

Liquid Designとは？

Webページの表示領域が変更されても、従来の表示を維持させるデザイン手法

・絶対値指定→相対値指定　　　　　　　( % , em )

・例：楽天市場TOPページ

背景

・ディスプレイの高解像度化　・ディスプレイサイズが大きくなる　・高解像度になる

　　 高解像度ユーザに対して余白の大きい画面ではなく　　 より多くの情報を表示させる

　　 小さな画面、低解像度の考慮はなし

変化 - 多ディバイス- 

多くのディバイスが登場

スマートフォン タブレット スマートTV

問題点

・端末ごとに最適なUIは違う

・解像度、画面サイズが小さい為、　Liquid Designでは対応でいない

Responsive Designとは？

端末の画面サイズに応じてUIを切り替えるデザイン手法

下記デザイン手法から構成される　・Liquid Design　・Fluid Image　・Media Query　・Responsive Type Setting

Liquid Design

各コンテンツの要素サイズを相対値(%)で指定

--- CSS --- #main { width : 100% ; padding : 10% ; margin : 10% ; }

Fluid Image

画面のサイズを基準にして、画像を縮小拡大して表示

-- CSS --- #mainImage { max-width : 30% ; max-height : 30% ; }

※IE系はmax-*をサポートしてない為、widthとheightで指定

Media Query

特定の条件に応じてスタイルを切り替える指定※CSS3のプロパティ

--- CSS --- @media screen and (max-width : 640px) { #main { widht : 300px ; } }

Responsive Type Settings

画面サイズに応じてフォントサイズを変える

--- CSS --- @media screen and (max-width : 480px) { #main { font-size : 14px ; } }

事例 - Kings Hill Car -

画面幅い応じて、デザインが変化

その他の例http://mediaqueri.es/

http://www.kingshillcars.com/

結論

・端末により最適なUIは違う

・最適化されたUIをクライアントサイドで　実装できる方法の1つがResponsive Design