Why is HTML responsive web design important?

Html responsive web design makes a website appear good on all devices. Responsive web design uses HTML and CSS to shrink, resize, hide, resize, or move a website to improve its appearance.

The first thing to do is to set the viewport in the <meta>tag to this:

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

The viewport meta tag makes it easier for devices to adjust images, text, and videos to suit the dimensions of any type of device.

CREATING HTML RESPONSIVE WEB DESIGN IMAGES

Images can be programmed to fit any browser's size perfectly. Images like this are called responsive images. To make an image responsive, set the CSS width property max-width and equate to a value of 100%.

Here is an example that explains better. We'll set the width property in this example as width instead of max-width, so you understand why HTML responsive web design is important.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window.</p>

<img src="" alt="Html icon" style="width:100%;">

</body>
</html>

From this example, using the width property at 100% enlarges (scales up) the image above its original size.

But when we use the max-width property at a value of 100%, it shrinks the image to be smaller if it has to, but not larger, which is better.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window.</p>

<img src="" alt="Html icon" style="max-width:100%;">

</body>
</html>

CHANGING IMAGES ACCORDING TO BROWSER'S WIDTH

Another cool thing that can be done in responsive HTML is changing the images to different types depending on the browser's width. This means that a browser of 600px in width will not have the same image as that of a browser of 1500px in width.

To do this, we use the <picture> element.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Changing images depending on browser's width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>

<picture>
  <source srcset="" media="(max-width: 600px)">
  <source srcset="" media="(max-width: 1500px)">
  <source srcset="">
  <img src="" alt="Image,"" style="width:auto;">
</picture>

</body>
</html>

MAKING RESPONSIVE TEXT SIZE

Aside from setting a font size in pixels and percentage, we also can set the font size in vw (viewport) or in em. But for the purpose of making HTML responsive web design text, we'll use vw.

When we use vw on font sizes, it instructs the browser to follow the size of the browser's window when displaying the font size. 1vw is equivalent to 1% of viewport width.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Here, the size is 10vw.</h1>
<p style="font-size:6vw;">Here, the size is 6vw.</p>
<p style="font-size:4vw;">Here, the size is 4vw.</p>
<p>Resize the browser window to see how the text size changes in vw.</p>
</body>
</html>

USING MEDIA QUERIES FOR RESPONSIVE WEB DESIGN

Media queries are most common for creating responsive web designs. With media queries, you can influence the sizes of text, images, and videos simultaneously.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.left {
  background-color: #2196F3;
  padding: 20px;
  float: left;
  width: 20%; 
}

.main {
  background-color: #f1f1f1;
  padding: 20px;
  float: left;
  width: 60%; 
}

.right {
  background-color: #04AA6D;
  padding: 20px;
  float: left;
  width: 20%; 
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .left, .main, .right {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>
</head>
<body>

<h2>Media Queries</h2>
<p>Resize the browser window.</p>

<div class="left">
  <p>Left Menu</p>
</div>

<div class="main">
  <p>Main Content</p>
</div>

<div class="right">
  <p>Right Content</p>
</div>

</body>
</html>

In the above example, on small screens, the div elements will lay on each other, vertically, but on large screens, they'll remain horizontal.

There are other ways to create HTML responsive web design. There's a place for using CSS frameworks like W3.CSS and Bootstrap. We'll take about this in the latter articles.