Responsive design
Upcoming SlideShare
Loading in...5
×
 

Responsive design

on

  • 2,102 views

 

Statistics

Views

Total Views
2,102
Slideshare-icon Views on SlideShare
1,574
Embed Views
528

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 528

http://tumblr.ksrtmyk.info 521
http://webcache.googleusercontent.com 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive design Responsive design Presentation Transcript

    • Responsive Designtomoyuki 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://www.kingshillcars.com/画面幅い応じて、デザインが変化その他の例http://mediaqueri.es/
    • 結論・端末により最適なUIは違う・最適化されたUIをクライアントサイドで 実装できる方法の1つがResponsive Design