Responsive Web Design

Responsive Web Design is a big part of web development. Responsive Web Design makes your web app look good on any device that is used to view the page, it uses HTML and CSS. A user may be visiting your site from a laptop device, tablet, or a mobile device. Making sure that your site looks good regardless of a device is very important for user experience. We call it responsive web design by using HTML and CSS to resize, hide, shrink, enlarge, or move around the content to make it look good on any screen!

Setting The Viewport

What is a Viewport? — A viewport is what a user sees when they’re on your webpage, it will vary in size depending on the size of a device that you use.

Before tablets or phones came out, web pages were designed only for computer screens which were common to only use a fixed size screen. Now that we are mainly using our phones on an everyday basis HTML5 introduced a method that takes control over a users viewport and that method is the <meta> tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width=device-width — will set the width of the page to follow the screen width of a device and as we know that will vary depending on the device.

The initial-scale=1.0 is what sets the initial zoom level on the page's first load.

Grid-View

Many websites we see out there are based on grid-view. This means that the page is divided into columns. Grid-view makes it easier to place elements on the page, to see how you can get started with grid-view — visit this site.

Media Queries

Media queries are a feature of CSS3 that allows the content of the page to adapt to different screen sizes, again depending on the device and its size. Media queries add a breakpoint(size breakpoint) where different elements of the design will show up differently on each side of the breakpoint. The general rule to follow is to design for the mobile devices first and then start working on different sizes of screens. Below you will see an example of a media query for a browser window that is 600px or less and the background color will be set to pink.

@media only screen and (max-width: 600px) {
  body {
    background-color: pink;
  }
}

You can look into starting with your media queries here.

These are the bolded points you will look into to start with your responsive website. Practice makes perfect so let's get to it!