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

1. Techniques Of RWD ~
Responsive Web Design

2. Basics of responsive web design
In todays web design scenario the responsive
web design new york is no doubt a big thing. If you are
not habituated with RWD then in reading these slides
you can get a clear idea about the RWD. We illustrate
the basic logic of the responsive design and media queries
in 3 steps. We illustrate these steps in serial numbers.
These are
Meta tag
HTML structure
Media queries

3. Meta Tag
Most mobile browser scales HTML pages in wide
viewport so it fits to the screen. You can reset
this using viewport meta tag. Below viewport
tag tells the browser viewport width and
disable the initial scale point of the device. In
the HTML code include the meta tag in the
head 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 Structure
In this example we use the basic page
layout using header, footer, content and
sidebar. Header has 180px, content 600px
and sidebar is 300px.
Header
Sidebar
Sidebar
Content
Footer
Footer

5. Media Queries
CSS means cascading style sheet. We use the CSS3 for
media query. It is the main trick of the responsive design.
We use the following example for the 980px or less. We
set the container width to pixel value to the percentage
value.

6. What Next …??
For viewport 700px or more specify
the #content #sidebar for
autuwidth 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 a
different stylesheet. If it is in
the same sheet then it is
called internal CSS or if it is
imported from outside then
it is called external CSS.