Your SlideShare is downloading. ×
Responsive web design
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

Responsive web design

2,231
views

Published on

I gave a presentation about responsive web design in training course in iAgent Lab in NTU.

I gave a presentation about responsive web design in training course in iAgent Lab in NTU.

Published in: Technology, Design

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

No Downloads
Views
Total Views
2,231
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
38
Comments
0
Likes
6
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 Web Design Janet Huang 2011/08/03 @janetyc
  • 2. mobile site standard site
  • 3. Responsive Web Design context-aware web design
  • 4. Think Vitamin http://thinkvitamin.com/Hicksdesign http://hicksdesign.co.uk/
  • 5. Flexible grid +Flexible image = Responsive web +Media queries
  • 6. http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/
  • 7. header banner content sidebarcontainer
  • 8. header banner content sidebarcontainer
  • 9. fixed layout
  • 10. 1. Flexible grid
  • 11. proportional thinking
  • 12. target / context = result
  • 13. px % or em 1200px 900px/1200px = 75% header or 900px/16px = 56.25em banner 900px 280px 280px/1200px = 23.3333% or default font size 280px/16px = 17.5em content sidebarcontainer
  • 14. 2. Flexible images
  • 15. img { max-width: 100%; }embed, object, video { max-width: 100%; }or .feature.feature { overflow: hidden; } img
  • 16. #issue in IE6: max-width can’t be used in IE6 v img, video, object { width: 100%; }
  • 17. 3. media queries
  • 18. How?in html... <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />in css... media type media query @media screen and (max-device-width: 480px) { ... } @import url("shetland.css") screen and (max-device-width: 480px);
  • 19. Media feature width device-aspect-ratio height color device-width color-index device-height monochrome orientation resolution aspect-ratio scan grid
  • 20. css-mediaqueries-js http://code.google.com/p/css3-mediaqueries-js/browser compatibility
  • 21. #issue in viewpoint v.s.
  • 22. viewpoint... width device-width browser <meta name="viewport" content="width=device- width; initial-scale=1.0"/>
  • 23. Demo & Practice
  • 24. Get the book!
  • 25. Tools• Opera Mobile Emulator• HTML5 Boilerplate• Modernizr
  • 26. Reference• Responsive web design • http://www.alistapart.com/articles/responsive-web- design/ • http://net.tutsplus.com/tutorials/html-css- techniques/responsive-web-design-a-visual-guide/ • http://mediaqueri.es/• HTML5 • http://www.html5rocks.com