What to learn to conquer responsive designing

There is a multitude of devices with different screen sizes in the world of tech and to create apps that respond on all screen sizes is a tussle without the necessary skills.

In this article, I will explain the tools that can be used to develop a fully responsive web application. First and foremost, developers must understand that an app is already responsive before adding any CSS code. But because of highly complex designs at the hands of developers, and to attain a better user experience, developers cannot rely on custom HTML to create web applications.

The following are the 5 tools I mostly use to create responsive web applications;

1. Percentage VS fixed width
2. Relative CSS units: rem, em, vh and vw
3. max-width, min-width
4. FlexBox
5. Media queries

Percentage VS Fixed width

Fixed widths cause elements to overflow or leave space at a certain screen size. But by simply setting a percentage value on height or width the element will take up as much space relative to the screen size.

.container{
   width:90%;
   height:fit-content;
   padding:2em 0;
}

Relative CSS Units

In CSS there are relative units such as rem, em, vh, and vw. To begin with, rem and em, are mostly used to create responsive font sizes and space of elements.

What is the difference between rem and em?

rem is relative to the font size of the root or in other words the HTML tag. if you specify the padding of an element to be 2rem it means two times the font size of the root which is in pixels. The default font size of the root is 16px. On the other hand, em is relative to the parent element.

html{
    font-size:16px;
}

.element{
    font-size:1.125rem;
}

<div class="container">
    <p class="element">This is the element</p>
</div>

.container{
    font-size:10px;
}

.element{
    font-size:2em; /* font-size:20px; */
}

Where and how to use rem and em ?

Because em is relative to the parent element do not use it for font sizes rather use em to specify margin and padding. On the other hand, rem is only relative to the root hence it can be used for font sizes.

.container{
    width:95%;
    padding:2em 1em;
}

.element{
    font-size:1.5rem;
    text-align: center;
}

vh stands for viewport height and vw stands for viewport width. The vh and vw units are mostly used for setting widths and heights. They can also be used to specify responsive font size.

.container{
    width:100vw;
    height:10vh;
}

.element{
    font-size:2vw;
    text-align:center; 
}

max-width and min-width

It is important to set restrictions to the space occupied by elements to avoid overflowing and also to create a better user experience. Imagine having text occupying the whole space of the screen size. It gives a headache for users to move their eyes across the screen.

.container{
    width:90%;
    min-width:300px;
    max-width:750px;
}

.container-2{
    width:minmax(300px, 750px); /* specifies minimum and maximum value */
}

.container-3{
    width:clamp(300px, 100%, 750px); /*specifies minimum, current and maximum value */
}

Flexbox

Flexbox is one of the most used tools for creating responsive layouts including navigations. Flexbox offers flexibility in creating both horizontal and vertical layouts. The default display of flex is horizontal.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container{
    display: flex;
    align-items: center;
    justify-content:space-between;
    flex-wrap: wrap;
    gap:1em;
}

Media queries

Finally, media queries offer a great opportunity for developers to create certain styles for specific screen sizes.

/* desktop first approach */
@media screen (max-width:900px){
    .nav-bar{
        flex-direction: column;
        align-items: center;
        gap:1em;
     }
}

/* mobile-first approach */
@media screen (min-width:900px){
    .nav-bar{
        flex-direction: row;
        align-items: center;
        gap:1em;
     }
}

Other Tools

CSS Grid

CSS Grid is also a great way to create responsive layouts by creating a grid system. It highly resembles the Flexbox tool. It wouldn't be a waste of your time if you dive into it.

Mobile first approach

In creating responsive designs, most people argue whether to start designing mobile first or desktop first. In my point of view, developers should start with mobile first because it reduces the CSS applied because the layout for mobile devices is mostly vertical. On top of that, it helps developers to avoid removing some elements because of small screen sizes.