Techniques Of RWD ~Responsive Web Design
Basics of responsive web designIn todays web design scenario the responsiveweb design new york is no doubt a big thing. If...
Meta TagMost mobile browser scales HTML pages in wideviewport so it fits to the screen. You can resetthis using viewport m...
HTML StructureIn this example we use the basic pagelayout using header, footer, content andsidebar. Header has 180px, cont...
Media QueriesCSS means cascading style sheet. We use the CSS3 formedia query. It is the main trick of the responsive desig...
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 queri...
Techniques Of  RWD ~ Responsive Web Design
Techniques Of  RWD ~ Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Techniques Of RWD ~ Responsive Web Design

395

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

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

  • Be the first to like this

No Downloads
Views
Total Views
395
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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.
  1. A particular slide catching your eye?

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

×