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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Responsive design

2,523
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,523
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
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