Responsive Web Design (RWD)

Go back to HTML and CSS Index

Once upon a time, there was a man who invented the World Wide Web - an information system accessible from a computer with internet access.

This was all before smartphones, iphones, tablets, ipads, smart TV's, smart watches and other IoT devices where invented.

In the beginning, websites consisted of text - and text only - but not for long, though. Soon it was possible to insert images on webpages as well.

Today, it is possible to insert practically everything from text to images and videos and animations - and also to access webpages from a long list of different devices, including the ones mentioned above.

The challenge then, is that websites shouldn't just look right on one device - but on all of them! And that's the reason why we will look into responsive web design today.

RWD - What is it?

Responsive Web Design or RWD is an approach where the user's behaviour and environment is taken into account in the design and development process.

The components of RWD are:

Let's have a look at each of them.

The meta viewport tag

The viewport is the visible area of a webpage which varies with the device and size of the browser window. The dimensions of your current device's viewport is: X .

The meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling, setting the width of the page to follow the screen-width of the device, and also setting the initial zoom level:

<meta name="viewport" content="width=device-width; initial-scale=1.0">
8.1 | The meta viewport tag

The meta viewport tag is placed in the head element and inserted on all pages.

Flexible images and media

When designing and developing websites, you often include a number of images. Now, if these images have a fixed size that doesn't work well on all devices, or if the images don't scale right, your website is likely to look unprofessional. What we want, then, is a sizing method that allows the images to scale without stretching them:

img {
max-width: 100%;
}
8.2 | Flexible images

By setting the max-width property instead of the width property to 100%, the image will scale up and down if it has to, but it will never scale to be larger than its original size, meaning that if the actual width of the image is 600px, the image will never scale to be larger than that.

In the example above, we don't set the height of the image, as it will automatically resize - constraining proportions - if we don't.

Flexible grids

Not long ago, we looked at the CSS Flexbox module and how we could use it to create flexible grids for our content:

.gallery {
display: flex;
flex-direction: column;
}
8.3 | Flexible grids

Now, be aware that the term flexible grid doesn't inherently refer to the CSS Flexbox module - or the CSS grid for that matter - it is a more general term.

Flexible grids combine the use of relative values and a media query-based grid system (we will get back to that in a bit) to organize content consistently, in a way that is still flexible enough to dynamically resize for any viewport.

Media queries

To change the layout of a page when the viewport size changes, we use something called media queries

Media queries were introduced in CSS3. The technique uses the @media rule to include specific style instructions if a certain condition is true.

@media screen and (min-width: 800px) {
.gallery {
flex-direction: row;
flex-wrap: wrap;
}
}
8.4 | Media queries

In the example above, we add a breakpoint at 800px, meaning that the style instructions inside the curly brackets of the media query will kick in, when the viewport has a minimum width of 800px.

Media queries are often placed in the bottom of the CSS document below the general style instructions.

You can add as many breakpoints to a page as you want - you may even be tempted to add one for each device out there but that is really not necessary. The number of breakpoints used on a page should depend on the content, not the number of different devices out there.

An important thing to remember when adding media queries is that the general style instructions still apply - unless we overrule them. In the example 8.4 above, we don't need to access the flex module again by setting display: flex, because we already did so in example 8.3 - but we do need to change the flex-direction, if we don't want it to still be column.

Next up

Next time we will look at how to create a responsive bars menu: Next up: The responsive navigation menu - an example