The goal of responsive web design is to create websites that look great on all devices!

In 2010, Ethan Marcotte came up with the phrase “responsive design”, which referred to the usage of three different methods together.

1. The first was the concept of fluid grids, which Gillenwater had already begun to investigate; read more about it in Marcotte’s paper, Fluid Grids (published in 2009 on A List Apart).
   
2. The concept of fluid images was the second technique. Images would scale down lower if their contained column became narrower than the image’s intrinsic size using a relatively straightforward technique of setting the max-width attribute to 100%, but they would never grow larger. As a result, an image can shrink in size to fit inside a flexible-sized column rather than overflowing it and still avoid growing too large and being pixelated if the column widens to a size greater than the image.
   
3. The third key component was the media query. The type of layout swap that Cameron Adams had previously experimented with using JavaScript is now possible using only CSS thanks to media queries. The layout could be altered rather than having a single layout for all screen sizes. For the smaller screen, sidebars might be moved, or alternative navigation could be shown.

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to resize, hide, shrink, or enlarge automatically a website, to make it look good on all devices (desktops, tablets, and phones).

Setting The Viewport

To create a responsive website, add the following <meta> tag to all your web pages.

For Example:

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

By setting the viewport of your page, you are instructing the browser on how to manage the page’s size and scale.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Responsive Images

Responsive images are those that scale easily to fit any browser size.

Using the width property:

If the CSS width property is set to 100%, The image will scale up and down and be responsive.

Let’s look at some examples:

/* HTML */
<img src="img_girl.jpg" style="width:100%;">

/* CSS */
img {
  width: 100%;
  height: auto;
}

Using the max-width property:

If the max-width property is set to 100%, The image will scale down if necessary, but it will never enlarge beyond its original dimensions.

For Example:

/* HTML */
<img src="img_girl.jpg" style="max-width:100%;height:auto;">

/* CSS */
img {
  max-width: 100%;
  height: auto;
}

Show Different Images Depending on Browser Width

We can define different images for different browser window sizes using media queries.

For Example:

/* For width smaller than 400px: */
body {
  background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

Responsive Text Size

The “viewport width” unit, abbreviated “vw,” can be used to adjust the text size. The text size will adjust to fit the size of the browser window in this manner.

For Example:

<h1 style="font-size:10vw">Hello World</h1>

The Viewport is the size of the browser window. Viewport width is 1% of 1vw. 1vw is 0.5cm if the viewport is 50 cm wide.

Grid-View

What is a Grid-View?

• A Grid-View, which is the foundation of many web pages, divides the page into columns.
  
• It is quite beneficial to use a Grid-View while designing websites. It makes positioning objects on the page simpler.
  
• The box-sizing property of HTML elements is all set to border-box. This ensures that the padding and border are counted against the components’ overall width and height.

* {
  box-sizing: border-box;
}

To have better control over the web page, we wish to employ a responsive grid-view with 12 columns.

First we must calculate the percentage for one column: 100% / 12 columns = 8.33%.

Media Queries

In CSS3, a method known as media query was first used. It uses the @media rule to include a block of CSS properties only if a specific condition is true.

For Example:
If the browser window is 600px or smaller, the background color will be red:

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

Add a Breakpoint

We can include a breakpoint where specific components of the design will act differently on either side. With the help of the min-width and max-width parameters, breakpoints can be easily set.

Let’s look at some examples:

CSS kicks in when the device width is 768px and above

@media only screen (min-width: 768px){
...
}

CSS kicks in within the limits : 768px to 959px

@media only screen and (min-width: 768px) and (max-width: 959px){
...
}

Always Design for Mobile First

Designing for mobile devices first involves doing so before designing for desktops or other devices (This will make the page display faster on smaller devices). This calls for some CSS adjustments. When the width exceeds 768px, we should alter the design rather than the styles.

Typical Device Breakpoints

It is challenging to design a precise breakpoint for every device because there are so many screens and devices with various heights and widths. To keep things simple you could target the following groups:

Orientation: Portrait / Landscape

Media queries can also be used to alter a page’s layout based on the browser’s orientation. A set of CSS properties can be configured to only be used in “Landscape” mode, or when the browser window is wider than its height.

For Example:
The web page will have a green background if the orientation is in landscape mode:

@media only screen and (orientation: landscape) {
  body {
    background-color: green;
  }
}

Hide Elements With Media Queries

Hiding components on various screen sizes is another frequent application of media queries.

For Example:
If the screen size is 600px wide or less, hide the element

@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Change Font Size With Media Queries

Media queries can also be used to adjust an element’s text size for various screen sizes.

For example:

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Conclusion

When you think about the websites you visit on your phone, it is probably rare to find one that is the desktop version scaled down or requires you to scroll horizontally to access stuff. This is a result of the web moving toward this method of responsive design.

Today, there are a lot more tools available to web developers who are just starting out than there were in the early days of responsive design. No matter what device your visitor uses to see the site, it is much simpler to develop stunning and practical designs with today’s CSS and HTML techniques.