How to Develop Responsive Websites in 10 minutes

50 %
50 %
Information about How to Develop Responsive Websites in 10 minutes

Published on March 4, 2014

Author: costaalan


PowerPoint Presentation:  Develop Responsive Website in Just 10 Minutes Meaning of Responsive :  Meaning of Responsive The term Responsive means , To provide “ Reacting Quickly and Positively ” to the users . PowerPoint Presentation: 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? PowerPoint Presentation:  1. Meta Tag 2. CSS Media Queries Responsive Design In 2 Steps What are Meta Tags?:  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>. Examples: 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 =""></script> <![ endif ]--> CSS Media Queries: 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. Example 1 of Media Queries: Example 1 of Media Queries /* for 980px or less */ @media screen and (max-width: 980px) { # pagewrap { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } } PowerPoint Presentation: 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 Advantages of Responsive Web Designing:  Advantages of Responsive Web Designing Advantages to the Users: 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. Disadvantage of responsive Web Designing:  Disadvantage of responsive Web Designing Disadvantages to the Users: Disadvantages to the Users It Breaks A Feature-Driven Website. No compatibility for IE 8. It Costs More and Takes Longer. Thank You: Thank You

#content presentations

Add a comment

Related presentations

Related pages

How to develop responsive websites in 10 minutes by Alan ...

Meaning of Responsive The term Responsive means , To provide. “Reacting Quickly and Positively� to the users.
Read more

Responsee - lightweight responsive CSS framework

... all components are fully responsive. Build new layout in 10 minutes ... responsive CSS framework which ... develop your responsive ...
Read more

How to Make Website Responsive In About 15 Minutes

The buzz around responsive websites has been ... about 15 minutes to build a responsive ... teach you how to create a responsive website ...
Read more


how to develop a responsive node js ... building responsive websites using ... build a bootstrap wordpress responsive menu in 10 minutes | ...
Read more

10 Developer Tips To Build A Responsive Website ...

10 Developer Tips To Build A Responsive ... If you are in the business of building and designing websites, ... We employ responsive design here at ReadWrite.
Read more

Build a Responsive Website with HTML5, CSS3 and Bootstrap ...

Learn modern web design and code responsive websites from scratch using HTML5 and CSS3. Develop and code a huge project. ... 10:11 ...
Read more