how to develop responsive websites - website development
DESCRIPTION
TRANSCRIPT
![Page 1: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/1.jpg)
Develop Responsive Website in Just 10
Minutes
www.mukesoft.com
![Page 2: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/2.jpg)
Meaning of Responsive
The term Responsive means ,
To provide“Reacting Quickly and
Positively”to the users.
![Page 3: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/3.jpg)
Growing Demand for Smart phones
Multiple Screen Sizes and Mobile Browsers
Easy Reading.
Reduce Scrolling and Zooming.
Wide Usage of Internet
Why You Need A Responsive Website?
![Page 4: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/4.jpg)
![Page 5: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/5.jpg)
1. Meta Tag
2. CSS Media Queries
Responsive Design In 2 Steps
![Page 6: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/6.jpg)
What are Meta Tags?
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>.
![Page 7: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/7.jpg)
Examples
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/css3-mediaqueries.js"></script>
<![endif]-->
![Page 8: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/8.jpg)
CSS Media Queries
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.
![Page 9: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/9.jpg)
Example 1 of Media Queries
/* for 980px or less */@media screen and (max-width: 980px) {
#pagewrap {width: 94%;
}#content {
width: 65%;}#sidebar {
width: 30%;}
}
![Page 10: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/10.jpg)
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;
}
}
Example 1 of Media Queries
![Page 11: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/11.jpg)
Advantages of Responsive Web Designing
![Page 12: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/12.jpg)
Advantages to the Users
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.
![Page 13: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/13.jpg)
Disadvantage of responsive Web Designing
![Page 14: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/14.jpg)
Disadvantages to the Users
It Breaks A Feature-Driven Website.
No compatibility for IE 8.
It Costs More and Takes Longer.
![Page 15: How to Develop Responsive Websites - Website Development](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bced1e4a7959e64b8b464f/html5/thumbnails/15.jpg)
Thank You