Your SlideShare is downloading. ×
0
Techniques Of  RWD ~ Responsive Web Design
Techniques Of  RWD ~ Responsive Web Design
Techniques Of  RWD ~ Responsive Web Design
Techniques Of  RWD ~ Responsive Web Design
Techniques Of  RWD ~ Responsive Web Design
Techniques Of  RWD ~ Responsive Web Design
Techniques Of  RWD ~ Responsive Web Design
Techniques Of  RWD ~ Responsive Web Design
Techniques Of  RWD ~ Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Techniques Of RWD ~ Responsive Web Design

379

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

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
379
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Techniques Of RWD ~Responsive Web Design
  • 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. 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. 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. 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. What Next …??For viewport 700px or more specifythe #content #sidebar forautuwidth and remove the float.
  • 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.

×