Your SlideShare is downloading. ×
未来へレスポンシブに対応するための設計と戦略
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

14,257
views

Published on

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

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

Published in: Design, Technology, Business

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

No Downloads
Views
Total Views
14,257
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
39
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. 320px 480px 600px 768px 960px 1200px 1600px
  • 2. 320px 480px 600px 768px 960px 1200px 1600px
  • 3. 320px 480px 600px 768px 960px 1200px 1600px
  • 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. 320px 480px 600px 768px 960px 1200px 1600px
  • 6. 27 WOFF: iOS5, Opera Mobile 11+ * No Android Support (yet) ** All major webkits support @font-face
  • 7. @media screen and (max-device-width: 480px) { style..}@media screen and (orientation:portrait) { style..}
  • 8. 320px 480px 600px 768px 960px 1200px 1600px
  • 9. 320px 480px 600px 768px 960px 1200px 1600px
  • 10. photo by John Manoogian III
  • 11. ReviewTest Design
  • 12. Review Review ReviewTest Test Test Design Design Design
  • 13. photo by Trey Ratcliff
  • 14. <img src="small.r.jpg" data-fullsrc="large.jpg">
  • 15. <img src="small.r.jpg" data-fullsrc="large.jpg">
  • 16. AB
  • 17. AB
  • 18. AB
  • 19. photo by Trey Ratcliff
  • 20. Do websites need to look exactly the same in every browser?
  • 21. IE8