Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Techniques Of RWD ~ Responsive Web Design


Published on

In this document we describe the techniques of responsive web design. We illustrate this using some steps like meta tag, HTML structure, media query etc. For further details dial us at (415) 234-3018

  • Be the first to comment

  • Be the first to like this

Techniques Of RWD ~ Responsive Web Design

  1. 1. Techniques Of RWD ~Responsive Web Design
  2. 2. 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 areMeta tagHTML structureMedia queries
  3. 3. 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
  4. 4. 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
  5. 5. 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.
  6. 6. What Next …??For viewport 700px or more specifythe #content #sidebar forautuwidth and remove the float.
  7. 7. 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.