html

What is Responsive Web Designing?

The term responsive web designing corresponds to the strategy of making a website behave depending upon the device it is being displayed on. For instance, you can make a website alter its behavior according to the screen width, resolution, orientation, etc. A responsive web design makes a website dynamic in nature.

If you make your website responsive then there is no need to develop the same website over and over again for each new device that emerges in the market. The website would automatically change its behavior based upon the desire of the user. This responsiveness will make the website change its appearance when the user switches from using the website on a desktop to a mobile phone.

Now we know what a responsive website is, the next big question is how to generate one. Consider the next section to explore the answer to this question.

How to make your web design responsive

Making a website responsive involves making your elements such as text, images, etc flexible by utilizing certain layouts. Below we have shown you various entities that make your web page responsive.

1. Viewport

The first and the foremost thing that you should include in your source code file to make your web page responsive is to add a responsive meta tag.

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

In this tag, the width is set to device-width which means that the web page width will change in correspondence to the width of the device, whereas, the initial scale is set to 1 which means when the web page is loaded by the browser for the first time the zoom level will be 1. This tag basically commands the browser to adjust the measurements of a web page according to various situations.

2. Media Queries

CSS media queries let you change the appearance of the web structure depending on the type of device displaying the website such as desktops, phones, laptops, etc, and prove useful in designing responsive websites. Moreover, these can be used for evaluating things such as the height and the width of the device and the viewport, the orientation of the device, or the screen resolution.

These queries make use of certain breakpoints which are referred to as those points on which the layout of a website alters corresponding to the screen size of the device type.

Syntax

@media not|only media type and (media feature and|or|not media feature)
{
    //Code;
}

Keywords explained

  • not: It reverses the semantics of a media query.
  • only: It prevents the old versions of a browser from implementing the media query.
  • and: It combines a media type with a certain media feature.

Now let’s explore an example of how you make your web page responsive using media queries.

Example
Below we are demonstrating a media query.

HTML

<h1>Hello, World!</h1>

Here we have defined an <h1> element and placed some text inside it.

CSS

h1 {
    font-family: 'Times New Roman', Times, serif;
}

@media screen and (min-width: 720px) {
    h1 {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
}

In the above code, the initial font-family of the paragraph is set to Times New Roman, whereas, after applying the media query where we have specified that if the minimum screen width is 720px or wider then the font-family of the paragraph will change to Verdana. Resize your browser window to see the effect of the media query.

Output
When the least screen width is 720px or wider.

When the minimum screen width is less than 720px.

The media query is working properly.

3. Flexbox

CSS Flexbox is a layout model that allows an efficient and dynamic arrangement of elements. This layout is one-dimensional that permits the placement of elements inside a container with equally distributed space. This layout makes elements responsive which means that the elements change their behavior according to the kind of device displaying them. It makes elements flexible and provides them with appropriate position, and symmetry.

A flexbox consists of the following components which are; a flex container and a flex item. A flex container defines the properties of the ancestor element by setting its display to flex, or inline-flex. Meanwhile, a flex item describes the properties of the successor elements and there can be numerous elements present inside a flex container.

Moreover, there are a number of properties associated with a flexbox that help make a web design responsive. Here we are going to show you how you can use a flexbox to make your website responsive.

Example
In the example below we have shown how to generate a responsive image grid using flexbox.

HTML

<div class="container">
    <div class="columns">
        <img src="image1.jpg">
        <img src="image2.jpg">
        <img src="image3.jpg">
    </div>

    <div class="columns">
        <img src="image4.jpg">
        <img src="image5.jpg">
        <img src="image6.jpg">
    </div>
</div>

To make an image grid we are making a larger div element and nesting two div elements inside that larger div. Both of the nested div elements further nest three images each.

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

The div with the “container” class is being displayed as a flexbox, and has been given certain padding. Moreover, the flex-wrap property is assigned wrap value which means if necessary the images will be wrapped inside the container.

CSS

.columns img{
    width: 100%;
}
.columns {
  flex: 50%;
  max-width: 50%;
  padding: 5px;
}

The images have been given 100% width so that they fit appropriately in the container, moreover using the flex and max-width we are creating two columns that will be placed next to one another.

CSS

@media (max-width: 600px) {
  .columns {
    flex: 100%;
    max-width: 100%;
  }
}

Along with the flexbox we are also using media query. The media query above specifies that if the width is less than the specified then the two-column will be converted to one.

Output
Scale your browser window up and down to see the effect.

A responsive image grid was created.

4. Bootstrap

It is a CSS framework that lets its users create websites that are responsive in nature and with a mobile-first approach. This approach specifies that the web design is first developed for mobile phones, and later on for other devices. Here we are going to demonstrate how to make a navigation bar that is responsive in nature using Bootstrap.

Example
We are making use of the latest version of Bootstrap, which is Bootstrap 5 to make a navigation bar.

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

First of all to utilize Bootstrap 5 include CDN for CSS, and JavaScript in your HTML file like we have shown above.

HTML

<nav class="navbar navbar-expand-sm bg-success navbar-dark">
    <div class="container">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="#">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
            </li>
        </ul>
    </div>
</nav>

In the above code, we have made a navigation bar using various Bootstrap 5 classes. The .navbar class is used to wrap a navigation bar along with .navbar-expand-sm class for responsive collapsing. Meanwhile the .bg-success and .navbar-dark are the different color schemes provided to the navigation bar.

The .container class wraps all the elements of a navigation bar with a fixed-width. Meanwhile, the .navbar-nav class is used create a navigation bar that has a maximum height and is lightweight and also supports dropdowns.

The .nav-item, and .nav-link are used to create various list items in the navigation bar, and the .active class makes a link active.

Output

A responsive navigation bar was successfully generated.

Conclusion

Responsive web designing corresponds to the strategy of making a website alter its behavior depending upon the device it is being displayed on. If you make your website responsive, then there is no need to develop the same website over and over again for each new device that emerges in the market. Such a website can be developed utilizing various entities such as including a responsive meta tag in your file, using media queries, flexbox, or Bootstrap. Here in this write-up, we have shown you various techniques with which you can make your website responsive.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.