HTML Responsive Web Design Tutorial | Learn HTML

Responsiveness is one of the most important characteristics of an ideal and professional website. Responsive web design gives the ability to a website to fit in every device.

In this tutorial, we will learn about responsive web design and how you can develop an HTML responsive website from scratch.


What is Responsive Web Design?

responsive web design

Basically, responsive web design is all about making a website automatically resizable for different devices like desktop, table, and mobile.

Responsive website uses only HTML and CSS. It makes sure that a website looks good and fit in properly in every screen size.

Now the question is why this is so important.

The most important reason is the increasing number of mobile users. Now everyone can access internet on their mobile.

Therefore, the number of mobile users is increasing rapidly. So, it becomes obvious to optimize a website for both tablet and mobile devices.

This technology is used to shrink or enlarge the images, text, layout with the change of screen size.

You can also hide any section that is available on desktop version, in mobile or tablet if you want.


Setting The Viewport

New feature has introduced in HTML5 to let designers take control over the viewport, through the <meta> tag.

The viewport is the visible area of a web page. It’s size is different for different devices.

The size will be smaller on a mobile phone than on a computer screen.

You have to include the following code in the <head> section of your HTML document.

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

This code will control web page width to adept with the device screen. If device screen is large, page width will be large. However, if device screen is small, page width will be small too.

The width=device-width part sets the width of the page to follow the screen-width of the device (which is different depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page first loads by the browser.


Fluid Layout

In fluid layout, different sections and images width are defined in percentages not in pixels.

If the screen size changes, the width will remain consistent with that screen size. This is the main concept in fluid layout.

It is very important to make a responsive website design. If you change the screen size, the width of your website will also change.

Because it is not fixed in size like 700px. You will define the width in percentage like 70%.

That means the width of that section is 70% of the screen size. With the change of the screen, that section will also change and become 70% of the new screen size.

Note: Use percentage to declare widths in your website layout.

<div class="container">
    <div class="image-section">
       <img src="pic/html-website-layout-elements.jpg">
    </div>
    <div class="content-section">
	<p>Responsive web design is all about making a website automatically resizable for different devices like desktop, table, and mobile.</p>
    </div>
</div>

In the above example, there are 3 sections. One is a container, that holds the other two sections image-section and content-section.

.container{
   width: 80%;
   margin: 0 auto;
   padding: 10px;
}

Here container width is 80% of the main screen size. If screen size changes, its width will shrink or enlarge to become 80% of the current size of the screen.

.image-section{
   width: 30%;
   margin-right: 2%;
   float: left;
}
.content-section{
   width: 68%;
   float: right;
}

The width of image-section is 30% of its parent. That means this section is not related to screen size. It is 30% of the container section.

Similarly, the width of content-section is 68% of the  container section also.

Fluid Layout Demo


Responsive Images

The images that used to resize to fit in any web browser size and devices are known as responsive images.

You can do this in two different ways:

  1. Using the width Property
  2. Using the max-width Property

First, add image to your HTML document using <img> tag. Then you have to add CSS properties to make the image responsive.

Learn how to add image in web page – HTML Images


1. Using the width Property

If you set CSS width property to 100% for an image, it will become responsive and scale up and down with the browser size.

<!DOCTYPE html>
<html>

   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Responsive Image</title>
   </head>
	
   <body>
      <h3>Responsive Image with Width Property</h3>
      <img src="light-house-image.jpg" style="width:100%;">
   </body>
   
</html>

The output shows in a web browser:

Responsive Image with Width Property

If browser size is larger than the original image size, the image will scale up to larger than its original size. It may cause losing image quality.

A better solution will be the using of max-width property instead of width property in many cases.


2. Using the max-width Property

If you set CSS max-width property to 100% for an image, it will become responsive and scale down with the browser size.

But the difference is the image will scale down if it is necessary, but never scale up to more than its original size.

<!DOCTYPE html>
<html>

   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Responsive Image</title>
   </head>
	
   <body>
      <h3>Responsive Image with Max-width Property</h3>
      <img src="light-house-image.jpg" style="max-width:100%;height:auto;">
   </body>
   
</html>

The output shows in a web browser:

Responsive Image with Max-width Property


Responsive Font Size

You can set font-size of your text with “vw” unit which means “viewport width”.

With this technique, the text will follow the size of your browser window.

<!DOCTYPE html>
<html>

   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Responsive Text</title>
   </head>
	
   <body>
      <h3 style="font-size:10vw;">Responsive Text</h3>
      <p style="font-size:5vw;">This paragraph text is using VW unit. So, it is resizable with the browser window.</p>
   </body>
   
</html>

The output shows in a web browser:

Responsive Text

This paragraph text is using VW unit. So, it is resizable with the browser window.

The viewport is the browser window size. 1vw = 1% of window width. If the browser window size is 100cm wide, 1vw is 1cm.


CSS Media Query

Beside of using resizable image, text, and sections, it is also common to use a CSS media query to give different looks of a web page for different devices.

With the @media rule, you can rearrange your web page columns. You can also hide some sections for any specific devices.

It is possible to do a lot more using this rule like change color, width, height, etc.

You can set different color and width of your web page sections in different devices like mobile, tablet or desktop.

OUTPUT


Responsive Web Design With Frameworks

You can do all those things very easily using CSS frameworks.

A framework is a collection of programs that are used to do some useful functions. It works like a skeleton of an application.

There are many CSS frameworks that provide all the features to make a website responsive very easily.

The frameworks you can use for your website:

  • Bootstrap
  • Foundation
  • Materialize
  • Bulma
  • Semantic UI

Choose one of these CSS frameworks to create a responsive web design for different devices.