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