Responsive Web Design: Understand And Apply It Once And For All

As a Microverse student for one month, I realized that my first clone webpages didn’t have a responsive layout. I was using pixels in the Navbars, percentages in one section and rem in another, I didn’t have a rule or a standard procedure. The goal was to make it look like the original webpage IN MY SCREEN.

As I advanced through the course, I learned that these units made all the
difference to the webpage’s response in different screen sizes. My code
reviewers would tell me to adjust my webpage because it looked different when they were viewing it.

When I started having these issues, I made a lot of research on the subject,
but I was still a little confused about it. This article’s goal is to create a
simple and direct rule to achieve the required responsiveness any developer needs in their code.

Why Make Your Webpage Responsive?

Right now, I am using a Lenovo Ideapad S145 to write
this article, it has a screen size of 15.6” and the Hackernoon webpage looks
like this:

Now, I was reading an article there, when my Windows Update started (can we control it?), so I had to switch to my mobile to continue reading it. I have a Motorola G7 Plus, with a screen size of 6.2”, this is how the same webpage looks like in this device:

Did you see the difference? Hackernoon’s webpage is responsive enough to change the position and appearance of each section when the screen size changes. You can see those changes by zooming in and out on your PC while looking at their webpage.

Now, if those changes weren’t made it would be very difficult for me to read that article on my mobile phone, as I would need to keep scrolling left and right or zoom in to see some of the content. Check out this great article on Medium!

Solutions For Our Problems

To solve our problems, we have a lot of solutions. In
this article, I’m going to focus on two of them:

• Relative units (rem, em, and percentage);
• Media queries.

Relative Units vs Fixed Units

When using CSS properties like font-size, width, height, margin or any other that needs a size unit, you have some options, and they are divided into two groups: relative units like rem, em and percentage (more info) and fixed units like pixels. The first group is the one we should be using, and
the images below show why.

In this image, we have a maximized window showing two boxes, I used pixels in the top one and percentage in the bottom one. Now, let’s see what happens when I shrink the screen size of my browser.

Can you see the scroll bar? That happens because the top box has a fixed unit value, so its width goes on even if we shrink the window’s size. The bottom box has a percentage value, it responds to the change in the window’s size.

This is the first solution on making your webpage more responsive, but we are not quite done yet, we can improve our projects even further, take a look at the next section!

Media Queries

Now let’s say you have a horizontal navbar in a webpage that has a 1024 px width on an 1440 px laptop, when you look at the page it is fine, you can read anything written in the navbar and it’s very easy to navigate through it:

But, if I switch to my mobile (width: 375px), look at what happens when we don’t use media queries:

The scroll bar is back! Also, did you see what happened to the navbar? That’s bad, isn’t it? I agree! The solution to this problem is using media queries in our CSS code to adjust our layout when the screen size is different. You can take a look at this article from CSS Tricks about media queries. Now, when we add the media query, the above webpage should look like this:

Terrific, the scroll bar is gone, as is the navbar! The thing is, now this page used that menu button (top green area, beside the light icon) which, when clicked, provides that same navbar vertically, isn’t it awesome?

If you want to see the results of your work with ease, you can use Google
Chrome’s Developer Tools and access the Device Toolbar where you can play with the window’s width and see how the changes are applied in each media query breakpoint.

Conclusion

In this article, I tried giving you the basic concepts of some of the tools needed for building a responsive webpage. But if you need a more detailed step-by-step guide, I recommend you to watch this (tutorial) from TutsPlus.
This article shouldn’t be your only source of information, you should take a
look at the links I provided and make some more research before jumping into your project. And never do it like Peter Griffin. Happy coding!