SlideShare a Scribd company logo

Responsive Design

•Download as PPTX, PDF•
•
D
DheerajPachauri

This document discusses responsive web design. It begins by defining responsive design as using HTML and CSS to automatically resize and reformat web pages to look good on different devices. It then explains why responsive design is necessary today due to the rise of mobile usage. The document outlines how to check if a site is responsive, the benefits of responsive design like improved user experience, and the major components used to build responsive sites like meta tags, CSS media queries, grid systems, and frameworks. It concludes that responsive design improves the user experience by avoiding unnecessary resizing or scrolling across devices.

Related slideshows

Responsive web design
Responsive web design Responsive web design
Responsive web design
 
The exploration of a responsive web design – that elevates your website’s pot...
The exploration of a responsive web design – that elevates your website’s pot...The exploration of a responsive web design – that elevates your website’s pot...
The exploration of a responsive web design – that elevates your website’s pot...
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
1 of 15
JSS ACADEMY OF TECHNICAL EDUCATION, NOIDA DR. APJ ABDUL KALAM TECHNICAL UNIVERSITY, LUCKNOW, U.P NAME: DHEERAJ PACHAURI ROLL NO.: 1809113042 BRANCH: IT-1 Topic: Styling with Responsive Design
CONTENT ● What is RESPONSIVE DESIGN ● Why RESPONSIVE DESIGN is Necessary Today ? ● How to check a Site is PLATFORM INDEPENDENT or Not ? ● Benefits of using RESPONSIVE DESIGN in our sites ● Major components of RESPONSIVE WEB DESIGN ● Conclusion ● Refrences
What is RESPONSIVE DESIGN? Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink or enlarge a website to look good on all devices (desktop, tablets and phones). Responsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. It means it makes websites PLATFORM INDEPENDENT. . Responsive web design is about creating web pages that look good on all devices. A responsive web design will automatically adjust for different screen sizes and viewports.
Why RESPONSIVE DESIGN is Necessary Today ? Today we live in a multi-screen society. Because of this, it’s important for our site to be viewable across as many devices as possible, because we never know what device someone will be using to view our website. In early 2015, Google announced that mobile-friendliness would become a ranking factor in its search engine algorithms. This meant that sites that were mobile-friendly would potentially lose some ground in search engine results because they wouldn’t be delivering a good experience to mobile searchers and viewers.
Responsive Web Design is also replace the need of separate site for mobile devices for small screen users, Now instead of designing multiple websites for multiple screen size, we can just design one website that scales up or down automatically to match the device it’s being views on.
How to check Site is Plateform Independent or Not ? There are number of ways by which we can check a site and confirm that the site is Platform Indepedent or Not: ● By resizing our window screen and refresh in desktops. ● By using Site http://ami.responsivedesign.is. ● By using inspect element option in Web Browser.
Benefits of using RESPONSIVE DESIGN in our sites ● Improve User Experience ● Flexibility ● Search Engine Optimization ● Cost Effectiveness ● Faster mobile development at lower cost ● Improve Online and Offline Browsing experience.
Major components of RESPONSIVE WEB DESIGN ● Meta Tags ● CSS Media Queries ● Grid System ● Frameworks
Meta Tags We use Meta Tags for making a web page Mobile Optimized. Meta Tags are Coding statements in HTML and placed at the top of the web pages as a part of heading. This gives the browser instructions on how to control the page's dimensions and scaling. <meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS Media Queries Media Query allows us to depend upon the media properties. It uses the @media rule to include a block of CSS properties only if a certain condition is true. @media only screen and (max-width: 600px) { body { background-color: lightblue; } }
Grid Systems Many web pages are based on a Grid System, which means that the page is divided into columns. Using a Grid System is very helpful when designing web pages. It makes it easier to place elements on the page.
Frameworks Frameworks are someone else code or layout of a website. They are free, and easy to use. There are many existing CSS Frameworks that offer Responsive Design. ● BOOTSTRAP ● W3.CSS ● ULKIT ● SEMANTIC UI
CONCLUSION The ultimate goal of responsive design is to avoid the unnecessary resizing, scrolling, zooming, or panning that occurs with sites that have not been optimized for different devices. If we want to improve the user experience then we should focus on Responsive Design. Our Site can be Responsive, If we use components of Responsive Design like CSS Media Queries, Framework and Met Tags.
REFERENCES ● Ethan Marcotte. Responsive Web Design. A Book Apart, Jan 1, 2011 ● J Mazzei, “Responsive Web Design[J]”,Business NH Magazine, vol. 9, 2012 ● W3schools.com ● Wikipedia ● webfx.com
THANK YOU

More Related Content

Responsive Design

  • 1. JSS ACADEMY OF TECHNICAL EDUCATION, NOIDA DR. APJ ABDUL KALAM TECHNICAL UNIVERSITY, LUCKNOW, U.P NAME: DHEERAJ PACHAURI ROLL NO.: 1809113042 BRANCH: IT-1 Topic: Styling with Responsive Design
  • 2. CONTENT ● What is RESPONSIVE DESIGN ● Why RESPONSIVE DESIGN is Necessary Today ? ● How to check a Site is PLATFORM INDEPENDENT or Not ? ● Benefits of using RESPONSIVE DESIGN in our sites ● Major components of RESPONSIVE WEB DESIGN ● Conclusion ● Refrences
  • 3. What is RESPONSIVE DESIGN? Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink or enlarge a website to look good on all devices (desktop, tablets and phones). Responsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. It means it makes websites PLATFORM INDEPENDENT. . Responsive web design is about creating web pages that look good on all devices. A responsive web design will automatically adjust for different screen sizes and viewports.
  • 4. Why RESPONSIVE DESIGN is Necessary Today ? Today we live in a multi-screen society. Because of this, it’s important for our site to be viewable across as many devices as possible, because we never know what device someone will be using to view our website. In early 2015, Google announced that mobile-friendliness would become a ranking factor in its search engine algorithms. This meant that sites that were mobile-friendly would potentially lose some ground in search engine results because they wouldn’t be delivering a good experience to mobile searchers and viewers.
  • 5. Responsive Web Design is also replace the need of separate site for mobile devices for small screen users, Now instead of designing multiple websites for multiple screen size, we can just design one website that scales up or down automatically to match the device it’s being views on.
  • 6. How to check Site is Plateform Independent or Not ? There are number of ways by which we can check a site and confirm that the site is Platform Indepedent or Not: ● By resizing our window screen and refresh in desktops. ● By using Site http://ami.responsivedesign.is. ● By using inspect element option in Web Browser.
  • 7. Benefits of using RESPONSIVE DESIGN in our sites ● Improve User Experience ● Flexibility ● Search Engine Optimization ● Cost Effectiveness ● Faster mobile development at lower cost ● Improve Online and Offline Browsing experience.
  • 8. Major components of RESPONSIVE WEB DESIGN ● Meta Tags ● CSS Media Queries ● Grid System ● Frameworks
  • 9. Meta Tags We use Meta Tags for making a web page Mobile Optimized. Meta Tags are Coding statements in HTML and placed at the top of the web pages as a part of heading. This gives the browser instructions on how to control the page's dimensions and scaling. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • 10. CSS Media Queries Media Query allows us to depend upon the media properties. It uses the @media rule to include a block of CSS properties only if a certain condition is true. @media only screen and (max-width: 600px) { body { background-color: lightblue; } }
  • 11. Grid Systems Many web pages are based on a Grid System, which means that the page is divided into columns. Using a Grid System is very helpful when designing web pages. It makes it easier to place elements on the page.
  • 12. Frameworks Frameworks are someone else code or layout of a website. They are free, and easy to use. There are many existing CSS Frameworks that offer Responsive Design. ● BOOTSTRAP ● W3.CSS ● ULKIT ● SEMANTIC UI
  • 13. CONCLUSION The ultimate goal of responsive design is to avoid the unnecessary resizing, scrolling, zooming, or panning that occurs with sites that have not been optimized for different devices. If we want to improve the user experience then we should focus on Responsive Design. Our Site can be Responsive, If we use components of Responsive Design like CSS Media Queries, Framework and Met Tags.
  • 14. REFERENCES ● Ethan Marcotte. Responsive Web Design. A Book Apart, Jan 1, 2011 ● J Mazzei, “Responsive Web Design[J]”,Business NH Magazine, vol. 9, 2012 ● W3schools.com ● Wikipedia ● webfx.com