Responsive design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • 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,562
On Slideshare
2,028
From Embeds
534
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 534

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

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