9. Media Queries continued/ FlexBox

How to choose Breakpoints

In the early days of responsive design, many designers would attempt to target very specific screen sizes. Popular phones and tablets’ screen sizes were published as a result so that designs could be created to neatly match those viewports.

15 years have gone by and there are now far too many devices to account for. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to “break” in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That’s the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn’t matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as breakpoints (something we learned earlier).

The Responsive Design Mode in Google Chrome and Mozilla Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.

Broadly speaking, you can take one of two approaches to a responsive design. The first is you can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller. The second is you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as mobile-first responsive design and is quite often the best approach to follow.

The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don’t need to do a lot of layout for small devices — the key is to order your sources well and you will have a readable layout by default.

The below example takes you through this approach with a very simple layout. In a production website, you are likely going to have more things to adjust within your media queries. The approach, however, will be exactly the same.

Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout. You can see it in this repl.it:

So far we’ve made no layout changes. It’s important to keep in mind, however, that the sources of the document is currently ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.

When you maximize and minimize the screen size, you’ll notice that this simple layout also works well on mobile (and other smaller screens).

Now let’s add some media queries to your website!

From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long and we have space for the navigation to display in a horizontal line. This is where we’ll add our first media query. We’ll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size.

To achieve this effect, we can add the code snippet below to the bottom of the previous example’s “style.css” file.

You can see the above code snippet being applied in this repl.it:

When you resize the screen, you’ll notice that the CSS gives us a two-column layout inside the article on wider screens. Of the article content and related information in the aside element, we have also used flexbox to put the navigation into a row.

Let’s further expand on our example

We will next expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query, we’ll make the main element into a two column grid. We then need to remove the margin-bottom on the article in the order that the two sidebars align with each other. We’ll also add a border to the top of the footer. These small tweaks are the kind of things you typically will do to make the design look good at each breakpoint.

Here is the code in repl.it to demonstrate the newest additions.

If you look at this final iteration, for different screen widths, you can see how the design responds and works as a single column, two columns, or three columns. This is a basic example of a mobile first responsive design.

Do you really need a media query?

flexbox, grid, and multi-column layouts all give you ways to create flexible and even responsive components without the need for a media query. Therefore, it’s always worth considering whether these layout methods can achieve what you want without adding media queries in the first place. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with the grid layout, using no media queries at all.

Take a look at this repl.it for an illustration of what we mean:

With the example opened in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component.

It might seem strange to conclude the section on the topic of media queries with a suggestion that you might not need one at all! However, in practice, you will find that good use of modern layout methods, enhanced with media queries, will give you the best results.

Layout and grid systems before CSS Grid Layout

It may seem surprising to anyone coming from a design background that CSS didn’t have an built-in grid system until fairly recently. In its place, we experimented with a variety of sub-optimal methods to create grid-like designs. We now refer to these as “legacy” methods.

For new modern projects, in most cases, CSS Grid Layout will be used in combination with one or more other modern layout methods to form the basis for any layout. You will however encounter “grid systems” using these legacy methods from time to time. It is worth understanding how they work and why they are different from CSS Grid Layout.

The example below will illustrate how grid systems and grid frameworks based on float and flexbox work. Having studied Grid Layout, you will probably be surprised how complicated this all seems! This knowledge will be helpful to you if you need to create fallback code for browsers that do not support newer methods. It also allows you to work on existing projects that use these types of systems.

It is worth bearing in mind, however, that as we explore these systems, none of them actually create a grid in the way that CSS Grid Layout creates a grid. They work by giving items a size, and pushing them around to line them up in a way that looks like a grid.

One of the simplest examples of that system is a two columns layout.

Each one of the columns needs an outer element to contain its content and let us manipulate all of it at once. In this example, we’ve chosen <div>s, but you could choose something more semantically appropriate such as <article>s, <section>s, and <aside>s.

For the CSS, the body will be 90% of the viewport wide until it gets to 900px wide, in which case it will stay fixed at this width and center itself in the viewport. By default, its children (the <h1> and the two <div>s) will span 100% of the width of the body. If we want the two <div>s to be floated alongside one another, we need to set their widths to total 100% of the width of their parent element or smaller so they can fit alongside one another. To achieve this effect, we added the following to the bottom of “style.css”:

By setting both <div>s to be 48% of their parent’s width, this totals to 96%; leaving us 4% free to act as a gutter between the two columns. Let’s also add the effect of float to the columns, the new CSS code snippet with float looks like this:

The entire example can be seen in this repl.it:

You’ll notice here that we are using percentages for all the widths. This is a good strategy as it creates a liquid layout – one that adjusts to different screen sizes and keeps the same proportions for the column widths on smaller screen sizes. Try adjusting the width of your browser window and you can see this effect for yourself. This is a valuable tool for responsive web design.

Responsive layouts with Flexbox

You can achieve a similar setup using flexbox as well. Refer to this video below for a rundown of how that can be done using flexbox.

Mobile First Design with Flexbox

For a deeper dive introduction to mobile first design with flexbox. Watch the video below: