Basics of responsive web designIn todays web design scenario the responsiveweb design new york is no doubt a big thing. If you arenot habituated with RWD then in reading these slidesyou can get a clear idea about the RWD. We illustratethe basic logic of the responsive design and media queriesin 3 steps. We illustrate these steps in serial numbers.These areMeta tagHTML structureMedia queries
Meta TagMost mobile browser scales HTML pages in wideviewport so it fits to the screen. You can resetthis using viewport meta tag. Below viewporttag tells the browser viewport width anddisable the initial scale point of the device. Inthe HTML code include the meta tag in thehead tag.<meta name=“viewport” content=“width=device-width,initial-scale=1.0”>IE 8 or older version doesn’t support this query.You can use media-queries.js or respond.js
HTML StructureIn this example we use the basic pagelayout using header, footer, content andsidebar. Header has 180px, content 600pxand sidebar is 300px. Header Sidebar Sidebar Content Footer Footer
Media QueriesCSS means cascading style sheet. We use the CSS3 formedia query. It is the main trick of the responsive design.We use the following example for the 980px or less. Weset the container width to pixel value to the percentagevalue.
What Next …??For viewport 700px or more specifythe #content #sidebar forautuwidth and remove the float.
You can write many media query as you like. In these slides we only shown only 3 queries. Purpose of these media queries is apply to different CSS for the different layouts. It can be in a same stylesheet or in adifferent stylesheet. If it is in the same sheet then it is called internal CSS or if it isimported from outside then it is called external CSS.