Responsive Design- Part 1

I wanted to take a quick break from my Intro to React Hooks series by starting up a new series around Responsive Web Design. This is another topic that is very interesting to me and that I am attempting to learn more about as I strengthen my skills.

Nowadays, there are so many different screen sizes to account for when building a website. Think about all of the different devices we use each day to browse the internet- iPhones, iPads, laptops, desktops, maybe a big screen TV or screen projector. This makes building and designing a website much more difficult these days, as of course you want to make sure that no matter what device your customer or user is viewing it on, that your website always works and looks good. You want to make sure that the user experience is always seamless and frictionless.

This series will cover some of the different things we can do with CSS to make a website responsive, such as:

• CSS units
• Layouts
• Flexbox
• Media queries

For Part 1 of this series, we’ll first dive into the different CSS units we can work with and go over an example with one of them.

Different Types of CSS Units

One of the first and most important things to understand before attempting to make a website responsive is knowing the different types of CSS units. For this series, we’ll break these down as follows:

• Absolute units
• Relative units
• Percentages

Staring with Absolute units, the most common is pixels (px) and these are the easiest to understand because they’re a fixed size and so always the same size. There are also other not as common options such as pt, cm, mm, in, etc. These are usually not used unless you’re working specifically with print styles for a document that needs to be printed. But for most cases, if you need an absolute fixed unit, pixels are the way to go.

Percentages are mainly used for widths, and also pretty easy to understand. In most cases, the percentage will be relative to the parent (more on this to come). The one exception is on height, as sometimes the percentage can be relative to the height of the parent but also the width of the parent. But for this series we’ll mostly be talking about and working with percentages for widths.

Then for Relative units, we have two different types: units relative to font-size and units relative to the viewport (the browser window). The most common types of units relative to font-size are em and rem. And for units relative to viewport, there’s vw, vh, vmin and vmax. For this series we’ll be focusing on units relative to font-size, because they’re used much more frequently.

Percentage Example

We’ll start with a percentage example because it’s pretty easy to understand how they work.

Imagine you have a page layout in a container that has a width of 960px. If you wanted to define a width of 70% for the left side with CSS using pixels, you’d have to calculate that number by multiplying 960 by 0.7, which is 672px. If you then wanted to figure out a different width for the right side you’d have to do another calculation. And then there’s padding to think about as well. And this is all for a fixed width, imagine having to think about all of this and then adjusting for different screen sizes. This can be a lot of work, which is why it’s always best to think responsively in order to simplify our design.

So, looking at the following code:

style.css
.container {
  width: 960px;
  margin: 0 auto;
}
index.html
<section class="section-one">
  <div class="container">
    <h2>Hello World!</h2>
    <p>Welcome to my website.</p>
  </div>
</section>

There is a set width on this container, of 960px. If you were looking at a website in your browser, and adjusting the screen size, you’d notice that as you start going to a smaller screen there will eventually be a scrollbar allowing you to view the content that’s getting cut off the screen. This is because the container and the content inside is larger than the viewport width. And if the page was opened on a mobile phone, it would be a real pain to view the content or use that platform’s service.

In order to fix this, we need to change the container width from a fixed unit to a percentage. The percentage will make sure that the container is always a certain percentage of the screen size, allowing your content to always be fully visible. If you try making your screen size larger and smaller, you’ll see that the container is automatically adjusting to the percentage of the screen size that you set.

To go one step further, the percentage you set is always going to be relative to the percentage of the element’s parent. For this example, the percentage we give the container class in style.css is going to be x% out of 100%. This is because the container’s parent is a section, and since the section doesn’t have a width specified, block level elements by default have a width of 100%. So section one will be 100% of the screen size, and the container will then be x% of that screen size.

To complete this first example, let’s make the following change to the above code (changes in bold):

style.css
.container {
  width: 90%;
  margin: 0 auto;
}
index.html
<section class="section-one">
  <div class="container">
    <h2>Hello World!</h2>
    <p>Welcome to my website.</p>
  </div>
</section>

Now, if you make your screen size larger and smaller, you’ll see that the container and the content within the container are going to adjust as your screen size changes. And the reason we usually don’t put a width of 100% is to allow a little spacing on either side of the container.

That wraps up our first example, thanks for reading and see you next time!