Tips on Creating a Responsive Design

Before the advent of smartphones and other mobile devices, websites were viewed on computers only, so the term responsive design was non-existent. As mobile devices became an alternative to assessing the web, the need for a responsive design in creating websites arose.

Statistics now show that website record more views on mobile than desktop computers, hence the need to be aware that a website can be viewed on devices with different viewport dimensions. Consequently, you should be able to build a web design that can adapt to all screen sizes.

Creating a responsive web design is challenging because by convention, you must adjust your code at specific breakpoints to provide a good browsing experience for visitors across all devices.

CSS breakpoints are widths where your style is adapted to suit specific viewports and screen sizes. It can be a hassle for specific designs to adapt your style to different breakpoints, especially with a desktop-first approach. However, there are particular properties whose value can be set so that you don't worry about modifying them in a breakpoint, you will read about them in this article.

Prerequisite

Basic knowledge of HTML and CSS

What is Responsive Web Design?

Responsive web design refers to an approach that involves making web layouts and elements adjust well to any device and maintain a good view. It is commonly achieved with the use of media queries. With media queries, you can define different styles for different screen sizes.

Media queries are very crucial in creating a responsive website. However, as a developer, it is essential to accomplish a task with as few lines of code as possible. Therefore, in this article, you will learn tips and tricks to write optimized codes that save you lines of code on a media query. With these tips and tricks, you spend lesser time making a layout responsive.

A more interesting fact is that these tips make a web design fluid. Fluid Design is a new approach to creating a responsive layout that entails setting your properties to values that change with the viewport and not breakpoints. In other words, Breakpoints have no place in fluid design because your design immediately and without a media query adapts to a change in the viewport dimension.

1: Set your width in percentages.

In CSS, the width of any content is always 100% of the parent container by default. In this section it is assumed the parent container is the viewport. Whenever you adjust the viewport the width adjusts simultaneously.
However, when you set the width of elements in CSS using absolute units such as pixels, they make the width rigid and unresponsive to different viewports without a media query. Instead, set the width of contents using percentages because it makes the width fluid and responsive to different viewports.

In the scenario where you set the width of a container to a value of 900px, the contents will overflow at a lesser screen size such as a device of 372px. This cause a horizontal scroll bar to appear on the page, which can mess up the page’s layout.
You can write a media query to adapt the width to smaller devices, giving it a lesser value for smaller screens. A much-optimized way is to set your width using percentage, and only use pixels for max-width. Doing it that way ensures it covers up for different viewports and screen sizes.

If you set the width of a container to 80%, at every screen size, the container will take up 80% of the width of the parent element or viewport in this case. However, if you do not want the container to grow above a certain size at large screens, you will need to set a max width.
If you add a max width of 900px in addition to a width of 80%, it means that no matter how large the screen grows the width of the container will never exceed 900px, and at lesser screen sizes the contents will always be 80% and not overflow out of the viewport. It is important to set the max width because it can be difficult to keep up with a long line of text on a huge screen.

.container {
  width:80%;
  max-width:900px;
}

Also, you can set the width of a container using the min() function. The min() function is a modern CSS function that ensures the lesser of the two values given to it is taken as the value of a property.

 .container {
      width: min(80%, 900px);
    }

On a large screen of 1800px, the lesser value is 900px, so 900px is taken as the width. On a lesser screen of 372px, 80% of 372px is the lesser value, so it is taken as the width. The video below shows how the container's width adjusts to different viewport widths using the code snippet above.

2: Do not set the height of a Container.

The height of elements increases as you adjust the viewport to smaller screens. This is to keep up with the decrease in the width. Setting a height on a container keeps the container static and unable to grow with the height of the elements which means elements will overflow out of their container messing up the page’s layout. To avoid this, do not set a height on a container.

This gif demonstrates what happens when you set the height of a container.

Typically, the height will constantly adjust as the viewport is adjusted. However, you might need to set the height of a container. In such instances set the height using min-height.

Min-height ensures a container will not be smaller than the set height, but when the height has to increase to accommodate the contents, it will.
This is what you have with min-height.

3: Use the auto-fit property of the grid layout to allow the browser implicitly set the number of columns based on the viewport.

When you explicitly set the number of columns in a grid layout, you have to gradually decrease it in a media query as you progress to smaller screens at each breakpoint or vice versa. An easier approach to creating columns is to allow the browser implicitly set the number of columns and rows based on the screen size. This can be achieved by setting the repeat function of the grid-template-column property to auto-fit.

This code snippet below demonstrates the explicit approach to creating columns of the same size in CSS.

   .container{
    display: grid;
    grid-template-columns: repeat(12, minmax(200px, 1fr));
}

The repeat function tells the browser to repeat columns as many times as stated in the function, and the size of each column should be the second value given.
The minmax() function defines the extent to which a property can grow or shrink which is a size range greater than or equal to the ‘min’ and lesser than or equal to the ‘max’. This means that the column's size will not exceed the maximum value and the minimum value stated. Rather than being squished, it will overflow out of its container.

To let the browser implicitly set the column, add the auto-fit keyword in place of a value for the number of columns in the repeat function.

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

The auto-fit keyword tells the browser to adjust the size and number of columns so that the element will wrap into rows when the viewport's width is not large to fit them.

The minmax() function tells the browser to distribute any available space to the columns equally as many as can fit into a row, such that each column occupy one fraction of the available space. It also tells the browser that when we are left with one column to a row, that column should not go below 200px.

This approach still leaves doubt about this process being entirely responsive or fluid. While it is rare to find a device that is less than 200px, if there happens to be one, the column in the grid layout will overflow. To circumvent that, consider the code snippet below.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr))

This approach of using the min() function is to ensure that the columns do not overflow if the available width falls below 200px, instead, it takes up just 100% of the available space.

4: Use the flex-wrap property to make your flexed items responsive.

There are two common ways of creating a layout in CSS; the flexbox and the grid display. The preceding tip covered how to make a layout responsive in the grid layout.

This tip covers how to make a flexed item responsive. If you prefer your flexed items to transition to one column from multiple columns instantly as the viewport is adjusted, you can use a media query for that. However, flex-wrap is your best man if you want to gradually decrease the number of columns as the viewport is adjusted from a larger screen to smaller screens.

Activating the flex-wrap property in CSS makes the browser responsible for making your flex layout responsive. This property is valuable when you need to create multiple columns, and you don’t want them squished together as the viewport is adjusted.

    .div{
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: space-between;
    }

When the viewport is adjusted, the columns wrap or are pushed into new rows. Without setting the flex-wrap property to wrap, you have to keep adjusting the number of columns at each breakpoint or they overflow out of the container.

5: Use the clamp method to make your typography responsive.

As you adjust the viewport and screen size, the width changes. To maintain a good layout, the font-size of elements must also change.
Typically, you will want the font-size on a larger screen to be relatively large and on a smaller screen, to be relatively less so anyone can see letters with ease.

To let the browser handle the task of making your fonts responsive depending on the screen size, use the clamp() function.
The clamp() function clamps a value between an upper and lower bound. It accepts three values, anything more or less it won’t work. It accepts a minimum, a maximum and a median or preferred value.

font-size: clamp(1.5rem, 1.5vw, 4rem);

The median value is the default value and is given a relative unit to make the design fluid and responsive. As the viewport is adjusted, the value of the font-size changes. However, if the median/preferred value becomes lesser than the minimum, the function takes the minimum value as the font-size. Similarly, if the middle/preferred value exceeds the maximum value, the function takes the maximum value as the font size.

The font-size which is in vw changes with the size of the viewport. However, it doesn’t go below the minimum bound or above the maximum bound.

This might sound uninteresting if you are unfamiliar with using relative units such as vw. Consider the snippet below to help you understand how to arrive at a value for the font-size in vw;

1.5vw = 1.5% of the width of the viewport, 
if the width of the viewport is 1000px. Therefore,
1.5vw = 15px on a 1000px viewport

Having that in mind, you can calculate the vw value of a font-size in pixels.

Notice the font size of the title changing in size as the viewport width is adjusted. As the font-size increase in size with the viewport, at a certain point, it stops increasing and as it decreases in size with the viewport, it stops decreasing at a certain point. That is when the upper and lower limit is reached respectively.

Conclusion

This article can be summarized into three note-worthy points;

• Avoid fixed sizes; Fixed sizes like setting the width of a container in pixels and setting the height of a container make responsive design tedious because you have to overwrite many properties with every breakpoint. Relatives units such as percentages and view width ease the burden of adjusting the width at each breakpoint because the width is adjusted with the viewport.
• Adopt modern CSS approaches; Modern CSS functions like clamp(), min()and max make it easy to build a responsive site with a fluid design where you do not have to worry about breakpoints. This article used clamp () to demonstrate how to make font sizes responsive. However, it can also be used for various properties such as width.
• Media queries should be used for more intricate tasks like adding a new style to a viewport and not overwriting many properties.

Resources

To learn more about modern CSS functions you can use in your project check out the articles below.

• CSS comparison functions: min(), max() and clamp
• min(), max(), and clamp(): three logical CSS functions to use today

Struggling with media queries or want to know more about media queries? the article below will be of help.

• A Complete Guide to CSS Media Queries

These articles will help you further prop up your responsive design game.

• The Guide to Responsive Design in 2023 and Beyond
• Modern Responsive Design