2. The term Responsive means ,
To provide
“Reacting Quickly and Positively”
to the users.
3. Why You Need A Responsive Website?
Growing Demand for Smart phones
Multiple Screen Sizes and Mobile
Browsers
Easy Reading.
Reduce Scrolling and Zooming.
Wide Usage of Internet
6.
Meta tag is a coding statement in HTML.
Information provided in the meta tags is used by the search
engines for page indexation.
Placed at the top of a web page as a part of heading.
We use viewport meta tag for making a web page Mobile
Optimized. See the example on next page. The viewport tag below
tells the browser to use the device width as the viewport width
and disable the initial scale. Include this meta tag in the <head>.
7. Example:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”
/>
Internet Explorer 8 or older doesn't support media query. You can use
media-queries.js or respond.js to add media query support in IE.
Example:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3mediaqueries.js"></script>
<![endif]-->
8.
CSS3 media query is the trick for responsive design. It is like writing if
conditions to tell the browser how to render the page for specified
viewport width.
The following set of rules will be in effect if the viewport width is 980px
or less. Basically, I set all the container width from pixel value to
percentage value so the containers will become fluid.
9. /* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
10.
Then for viewport 700px or less, specify the #content and #sidebar to
auto width and remove the float so they will display as full width.
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
11.
12.
Adjusts to every screen.
It automatically shuffles content, resizes images, and adjusts font size.
Users are able to read information as per their needs and preferences.
Search Engines Like It.
Content accessibility across devices.
13.
14.
It Breaks A Feature-Driven Website.
No compatibility for IE 8.
It Costs More and Takes Longer.