Your SlideShare is downloading. ×
  • Like
Responsive design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive design

  • 2,506 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,506
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Responsive Designtomoyuki 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