responsive website design

Download Responsive website design

Post on 08-May-2015




0 download

Embed Size (px)


  • 1.RESPONSIVE WEBSITE DESIGN Presented by S.Vaithiya Lingam

2. Introduction Introductory article for Responsive webdesign is written by Ethan Marcotte. Released on may 2010. 3. What is mean by ResponsiveDesign? Responsive design means, Websiteautomatically fits in the users device. If the user has a small screen, theelements will rearrange to the screenwidth. 4. Two important steps Meta tag Media Queries 5. Meta Tag tags always goes inside the element. Provides metadata about the HTMLdocument. Meta elements are typically used tospecify page description, keywords, andother metadata. 6. Continue The width property controls the size ofthe viewport. Initial-scale property controls the zoomlevel when the page is first loaded 7. Media Queries CSS Media Query is the trick forresponsive design. It is like writing if conditions.. 8. Example: 9. viewport width is 980px or less 10. viewport 700px or less 11. 480px or less 12. For IE8 and older versionbrowsers.. 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. 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. 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. Cont/* Desktops and laptops ----------- */@media only screenand (min-width : 1224px) {/* Styles */}/* Large screens ----------- */@media only screenand (min-width : 1824px) {/* Styles */} 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. Flexible Imagesimg {max-width: 100%;height: auto;width: auto9; /* ie8 */} 19. Flexible Embedded embed,.video object,.video iframe{width: 100%;height: auto;} 20. Advantage Compatibility. Sharing/Linking. No need to Redirect. 21. Disadvantage Image Resizing. This consumes unnecessary CPU and RAM. Longer time to load. Hover will not work 22. DemoA demo on responsive website design canbe found in the following website 23. THANK YOU