Techniques Of  RWD ~ Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Techniques Of RWD ~ Responsive Web Design

on

  • 579 views

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

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

Statistics

Views

Total Views
579
Views on SlideShare
578
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

http://www.docshut.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Techniques Of  RWD ~ Responsive Web Design  Techniques Of RWD ~ Responsive Web Design Presentation Transcript

  • 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 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
  • 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.