Skip to content

Responsive Web Design

The web nowadays is going increasingly mobile. From small 3.5" phone screens to huge 4K monitors as large as walls, the websites of today have to be able to scale and look good on all these form factors.

How do we do that ? CSS is our friend here. As the defining way to design our websites, we use special CSS rules to tell the browser how we want our website to look at certain resolutions (called breakpoints). In doing so, Flexbox can help us a lot by easing the necessary design work in order to adapt our screens at certain breakpoints. Let's dig in!

First up: Telling the browser that we're responsive

By default, the browser will render your webpage at the resolution your screen is - if both your laptop have a 1920x1080 (full HD) resolution, there's no way the browser can use to tell that it's running on a mobile device.

The responsive meta tag

The magic key to this problem is represented by this tag:

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

This tag is called the responsive meta tag or the viewport tag. In this case, it defines two values:

  • width - this tells the browser that it needs to render our page at a resolution that's adapted to the device-width (or, in other words, the actual device's size) rather than the actual screen size.
  • initial-scale - this tells the browser that it should keep the page at the base (zero) zoom level. Some browsers automatically zoom into the page if this is not set.

After we add this tag, the browser will use a smaller resolution to render the page. You can test this by clicking the responsive mode button in the Developer Tools pane. Usually this resolution is around 360px wide, but this varies across devices, so the best course of action is to test manually on each and every resolution and see if things break.

The @media tag - our secret sauce

Okay, now that we've told the browser that we're responsive, we need to tell the browser how to change the CSS properties based on the width of the page (remember - this isn't always the same as the screen resolution!). To do this, we use the @media tag. It looks something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.example-div {
  width: 500px;
  height: 300px;
}

@media screen and (max-width: 600px) {
  .example-div {
    width: 200px;
  }
}

What this will do is render the .example-div by default at 500 px. If we resize the browser window to be smaller than 600px, then the .example-div will be 200px in width.

The screen part tells us that this rule will be applied when the page is viewed on a screen. Another value is print, which will apply the rules when the user wants to print the webpage - this is useful for removing colorful backgrounds and other elements that might use a lot of ink when printing.

Media rules are more specific

Media rules will always take precedence over CSS you've written, and the smallest media rule will take precedence over all others. That means that we can define media rules at 300, 600 and 800px, and our page will look exactly as we intend it to on each breakpoint.

Flexbox - easing our layout woes

The Flexbox layout is a way to arrange CSS elements when we don't know their exact size (hence the flex in the name). The main idea is to give the container the ability to decide how its children elements will show up. This makes it very easy to arrange elements vertically, horizontaly, on rows, columns, or any other combination. This helps a lot with responsive design.

This guide by css-tricks does a very good job of explaining how flexbox works through an easy to understand, visual way.