320px   480px   600px   768px   960px   1200px   1600px
320px   480px   600px   768px   960px   1200px   1600px
320px   480px   600px   768px   960px   1200px   1600px
Sharp AQUOS Phone      Kindle Fire720x1280               600x1024BlackBerry Bold 9900   Galaxy Tab480×640                6...
320px   480px   600px   768px   960px   1200px   1600px
27     WOFF: iOS5, Opera Mobile 11+     * No Android Support (yet)     ** All major webkits support @font-face
@media screen and (max-device-width: 480px) {  style..}@media screen and (orientation:portrait) {  style..}
320px   480px   600px   768px   960px   1200px   1600px
320px   480px   600px   768px   960px   1200px   1600px
photo by John Manoogian III
ReviewTest       Design
Review                   Review                   ReviewTest                     Test                     Test       Desig...
photo by Trey Ratcliff
<img src="small.r.jpg" data-fullsrc="large.jpg">
<img src="small.r.jpg" data-fullsrc="large.jpg">
AB
AB
AB
photo by Trey Ratcliff
Do websites need to look exactly the same in every browser?
IE8
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
未来へレスポンシブに対応するための設計と戦略
Upcoming SlideShare
Loading in...5
×

未来へレスポンシブに対応するための設計と戦略

14,446

Published on

何が来るか分からない未来に反応(レスポンシブ)するには、どうしたら良いのでしょうか。それはレスポンシブWebデザインという作り方だけで解決するものではなく、企画/運営/ビジネスモデルなどもレスポンシブでいる必要がでてきます。レスポンシブに対応するために何が必要なのか、どのような解決策が考えられるかを紹介します。

Published in: Design, Technology, Business
0 Comments
39 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,446
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
39
Embeds 0
No embeds

No notes for slide

Transcript of "未来へレスポンシブに対応するための設計と戦略"

  1. 1. 320px 480px 600px 768px 960px 1200px 1600px
  2. 2. 320px 480px 600px 768px 960px 1200px 1600px
  3. 3. 320px 480px 600px 768px 960px 1200px 1600px
  4. 4. Sharp AQUOS Phone Kindle Fire720x1280 600x1024BlackBerry Bold 9900 Galaxy Tab480×640 600×1024Xperia PLAY SO-01D Arrows Tab LTE480×854 800x1280HTC Nexus LG Optimus Pad480×800 768x1280LG Optimus LTE Samsung Series 7720×1280 768x1366
  5. 5. 320px 480px 600px 768px 960px 1200px 1600px
  6. 6. 27 WOFF: iOS5, Opera Mobile 11+ * No Android Support (yet) ** All major webkits support @font-face
  7. 7. @media screen and (max-device-width: 480px) { style..}@media screen and (orientation:portrait) { style..}
  8. 8. 320px 480px 600px 768px 960px 1200px 1600px
  9. 9. 320px 480px 600px 768px 960px 1200px 1600px
  10. 10. photo by John Manoogian III
  11. 11. ReviewTest Design
  12. 12. Review Review ReviewTest Test Test Design Design Design
  13. 13. photo by Trey Ratcliff
  14. 14. <img src="small.r.jpg" data-fullsrc="large.jpg">
  15. 15. <img src="small.r.jpg" data-fullsrc="large.jpg">
  16. 16. AB
  17. 17. AB
  18. 18. AB
  19. 19. photo by Trey Ratcliff
  20. 20. Do websites need to look exactly the same in every browser?
  21. 21. IE8

×