RESPONSIVE WEBSITE     DESIGN             Presented by         S.Vaithiya Lingam
Introduction Introductory article for Responsive web  design is written by Ethan Marcotte. Released on may 2010.
What is mean by ResponsiveDesign? Responsive design means, Website  automatically fits in the user’s device. If the user...
Two important steps Meta tag Media Queries
Meta Tag <meta> tags always goes inside the  <head> element. Provides metadata about the HTML  document. Meta elements ...
Continue… <meta name="viewport"  content="width=device-width, initial-  scale=1.0"> The width property controls the size...
Media Queries CSS Media Query is the trick for  responsive design. It is like writing if conditions…..
Example:
viewport width is 980px or less
viewport 700px or less
480px or less
For IE8 and older versionbrowsers..<!--[if lt IE 8]><script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css...
Some more media queries/* Smartphones (portrait and landscape) ----------- */@media only screenand (min-device-width : 320...
Cont…/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* Styles */}/* iPads (portrait an...
Cont…/* iPads (landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and...
Cont…/* Desktops and laptops ----------- */@media only screenand (min-width : 1224px) {/* Styles */}/* Large screens -----...
Cont…/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel-  ratio : 1.5),only screen and (min-device-...
Flexible Imagesimg {max-width: 100%;height: auto;width: auto9; /* ie8 */}
Flexible Embedded Videos.video embed,.video object,.video iframe{width: 100%;height: auto;}
Advantage Compatibility. Sharing/Linking. No need to Redirect.
Disadvantage   Image Resizing.    ◦ This consumes unnecessary CPU and RAM. Longer time to load. Hover will not work
DemoA demo on responsive website design can  be found in the following websitehttp://www.studiopress.com/responsive/
THANK YOU
Responsive website design
Responsive website design
Upcoming SlideShare
Loading in …5
×

Responsive website design

365
-1

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
365
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive website design

  1. 1. RESPONSIVE WEBSITE DESIGN Presented by S.Vaithiya Lingam
  2. 2. Introduction Introductory article for Responsive web design is written by Ethan Marcotte. Released on may 2010.
  3. 3. What is mean by ResponsiveDesign? Responsive design means, Website automatically fits in the user’s device. If the user has a small screen, the elements will rearrange to the screen width.
  4. 4. Two important steps Meta tag Media Queries
  5. 5. Meta Tag <meta> tags always goes inside the <head> element. Provides metadata about the HTML document. Meta elements are typically used to specify page description, keywords, and other metadata.
  6. 6. Continue… <meta name="viewport" content="width=device-width, initial- scale=1.0"> The width property controls the size of the viewport. Initial-scale property controls the zoom level when the page is first loaded
  7. 7. Media Queries CSS Media Query is the trick for responsive design. It is like writing if conditions…..
  8. 8. Example:
  9. 9. viewport width is 980px or less
  10. 10. viewport 700px or less
  11. 11. 480px or less
  12. 12. For IE8 and older versionbrowsers..<!--[if lt IE 8]><script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3- mediaqueries.js"></script><![endif]-->
  13. 13. Some more media queries/* Smartphones (portrait and landscape) ----------- */@media only screenand (min-device-width : 320px)and (max-device-width : 480px) {/* Styles */}/* Smartphones (landscape) ----------- */@media only screenand (min-width : 321px) {/* Styles */}
  14. 14. Cont…/* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* Styles */}/* iPads (portrait and landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px) {/* Styles */}
  15. 15. Cont…/* iPads (landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape) {/* Styles */}/* iPads (portrait) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait) {/* Styles */}
  16. 16. Cont…/* Desktops and laptops ----------- */@media only screenand (min-width : 1224px) {/* Styles */}/* Large screens ----------- */@media only screenand (min-width : 1824px) {/* Styles */}
  17. 17. Cont…/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel- ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}
  18. 18. Flexible Imagesimg {max-width: 100%;height: auto;width: auto9; /* ie8 */}
  19. 19. Flexible Embedded Videos.video embed,.video object,.video iframe{width: 100%;height: auto;}
  20. 20. Advantage Compatibility. Sharing/Linking. No need to Redirect.
  21. 21. Disadvantage Image Resizing. ◦ This consumes unnecessary CPU and RAM. Longer time to load. Hover will not work
  22. 22. DemoA demo on responsive website design can be found in the following websitehttp://www.studiopress.com/responsive/
  23. 23. THANK YOU
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×