SlideShare a Scribd company logo

RESPONSIVE_WEB_DESIGNRESPONSIVE_WEB_DESIGN

•Download as PPTX, PDF•
•
D
DaveEstonilo

This document provides an introduction to responsive web design. It discusses the viewport and how setting it to device-width makes a website responsive on different screens. It describes CSS grid view and how using a 12 column responsive grid helps elements resize based on screen size. It also covers media queries and how they allow parts of the design to behave differently depending on breakpoints, promoting a mobile first approach.

1 of 30
RESPONSIVE WEB DESIGN LOGO
TABLE OF CONTENTS
INTRO TO RESPONSIVE WEB ONE
VIEWPORT 1
CSS GRID VIEW 2
MEDIA QUERY 3
INTRODUCTION WEB DESIGN Why have a responsive website? - People view website on many different devices. - Make a website easy to use and easy on the eye. no matter which device it is viewed on. - Therefore we make our website responsive. It means the design our website should respond to the specification of the device.
RESPONSIVE_WEB_DESIGNRESPONSIVE_WEB_DESIGN
VIEWPORT 1
RD - VIEWPORT What is The Viewport? - The viewport is the user's visible area of a web page. - The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. - Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
RD - VIEWPORT How to apply the Viewport? - HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. - You should include the following <meta> viewport element in all your web pages:
RD - VIEWPORT How to apply the Viewport? <meta name="viewport" content="width=device- width, initial-scale=1.0">
RD - VIEWPORT How to apply the Viewport? This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen- width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
RD - VIEWPORT
RD - VIEWPORT Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally! So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.
CSS GRID VIEW 2
WHAT IS CSS GRID VIEW?
RD - GRID VIEW Many web pages are based on a grid-view, which means that the page is divided into columns: Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.
RD - GRID VIEW
RD - GRID VIEW A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.
RD - GRID VIEW
RD - GRID VIEW Building a Responsive Grid-View First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements.
Add border box
RD - GRID VIEW Building a Responsive Grid-View First we must calculate the percentage for one column: 100% / 12 columns = 8.33%. Then we make one class for each of the 12 columns, class="col-" and a number defining how many columns the section should span:
RESPONSIVE_WEB_DESIGNRESPONSIVE_WEB_DESIGN
RD - Media Query What is Media Query? Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.
RD - Media Query What is Media Query?
RD - Media Query Add a Breakpoint Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen. Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.
RD - Media Query Always Design for Mobile First Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices). This means that we must make some changes in our CSS.
THANKS FOR WATCHING Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat.

More Related Content

RESPONSIVE_WEB_DESIGNRESPONSIVE_WEB_DESIGN

  • 7. INTRODUCTION WEB DESIGN Why have a responsive website? - People view website on many different devices. - Make a website easy to use and easy on the eye. no matter which device it is viewed on. - Therefore we make our website responsive. It means the design our website should respond to the specification of the device.
  • 10. RD - VIEWPORT What is The Viewport? - The viewport is the user's visible area of a web page. - The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. - Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
  • 11. RD - VIEWPORT How to apply the Viewport? - HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. - You should include the following <meta> viewport element in all your web pages:
  • 12. RD - VIEWPORT How to apply the Viewport? <meta name="viewport" content="width=device- width, initial-scale=1.0">
  • 13. RD - VIEWPORT How to apply the Viewport? This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen- width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
  • 15. RD - VIEWPORT Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally! So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.
  • 17. WHAT IS CSS GRID VIEW?
  • 18. RD - GRID VIEW Many web pages are based on a grid-view, which means that the page is divided into columns: Using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.
  • 19. RD - GRID VIEW
  • 20. RD - GRID VIEW A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.
  • 21. RD - GRID VIEW
  • 22. RD - GRID VIEW Building a Responsive Grid-View First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements.
  • 24. RD - GRID VIEW Building a Responsive Grid-View First we must calculate the percentage for one column: 100% / 12 columns = 8.33%. Then we make one class for each of the 12 columns, class="col-" and a number defining how many columns the section should span:
  • 26. RD - Media Query What is Media Query? Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.
  • 27. RD - Media Query What is Media Query?
  • 28. RD - Media Query Add a Breakpoint Earlier in this tutorial we made a web page with rows and columns, and it was responsive, but it did not look good on a small screen. Media queries can help with that. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.
  • 29. RD - Media Query Always Design for Mobile First Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices). This means that we must make some changes in our CSS.
  • 30. THANKS FOR WATCHING Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat.