Part 1. Responsive Web Design Using Breakpoints

By the way, I have a few more helpful hints.

One side will make you grow taller…

….and the other side will make you grow shorter.

— Lewis Carroll, Alice’s Adventures in Wonderland

"Another article about responsive design. Really?!", the surprised reader asks. Not quite. There is an infinite stream of posts about relationships: theoretically true, but in fact absolutely useless because of generalizations. We, however, are going to step aside from academicism and tell you how to succeed without generalizing too much. Namely, how to make life easier when working on relatively simple web projects.

Responsive Web Design Using Breakpoints

Though there is more than enough information on media queries, many people still get confused. They do not understand what the conditions for breakpoints activation are and how to control them. That is why we’d like to tell you in this article how to tackle the responsiveness of mock-ups and how to confidently use breakpoints.

Introduction to Breakpoints

Under the simple projects mentioned above we mean, generally speaking, everything not overloaded with user interface elements. These are corporate and portfolio websites, landing pages, websites for advertising brands and special offers, microsites, blogs and even small eCommerce shops. Along with making such sites mobile friendly, the responsive web design provides for a good presenting of their content and interface on laptops and desktops with various resolutions.

Drawing on the principles of web application development, the task of responsive web design is often solved by using CSS frameworks and CSS preprocessors. However, this approach makes things difficult if you work mostly with the layout, not front-end development. And the fine tuning of responsiveness using framework tools for a non-templated design is problematic and exhausting.

The point of the method is not new; we by no means claim sole authorship. This information has been always on the surface. One of the first books on responsive design, Responsive Web Design by Ethan Marcotte, even used it in its examples.

Although the reader was given the right ingredients, the order of putting them in the dish, though mentioned, was not stressed enough. We would like to tell you about the order that actually matters.

Limited Scale Range Example

Our example is a desktop-first website that can easily take a mobile friendly form. Our first tip is to work with two CSS files. The first file is a common one, let us name it styles.css: you code all the necessary styles in it. It will be added first. The second one, responsive.css, codes responsiveness and contains all media queries. Activate this file second to prioritize it.

Responsive Web Design Using Breakpoints

Write your HTML code exactly by your sketch. Do not think for now about responsive features and what to do with scaling the browser’s window smaller. For example, your mock-up is designed for 1200 pixels. Most likely, you expect it to be scaled and stretched further. In most cases it means you create the layout setting the width for each block in percents. (Probably not a problem for you: otherwise read the perfectly described solution in the mentioned book by Ethan Marcotte).

Eventually, you create a mock-up that looks well in the plus-minus range of scaling your original sketch. Say your content and control elements stretch correctly in a range from 1150 to 1500 when changing the screen size; then you have the familiar elastic layout.

However, expanding beyond this range results in gaps, and the information starts to look somewhat small. A considerable scaling down causes troubles as well. Parts of content overlap, the interface falls apart, and some elements just do not fit. The latter brings back scrolling and other relics from the "dark ages" before media queries.

Responsive Layout for Any Range

Well, let us type the queries in. The most common mistake web designers and html coders make is coding the styles exceptionally for a specific resolution in the range "from min-width to max-width only". (Or relying on the conditional classification of screens offered by frameworks).

Range 1

For example, they code a lot of styles for different blocks in the range from 1400 to 1500. For convenience, we name it "Range 1".

The media query is:

@media (min-width: 1400px) and (max-width: 1500px) {
}

Then "Range 1" is a set of properties that work only within the range of 1400-1500. For any other conditions, >1500 or <1400, these properties will be simply ignored.

Well, it makes sense that scaling the mock-up down 1400 doesn’t meet the condition any more, and the styles do not work. What is wrong?

Range 2

Let us add another condition. It is obligatory, as you need to set parameters of the elements for other resolutions. We name it "Range 2".

@media (min-width: 1200px) and (max-width: 1400px) {
}

Naturally, the styles are set only in the 1200-1400 range. And here comes the problem. What if you need a part of "Range 2" elements to change, unlike the default styles, but in the exactly the same way the elements did in "Range 1"? And we have not inherited anything going from "Range 1" to "Range 2" as we unequivocally set each range to have its own parameters. In this case, you obviously have to copy some of the style elements changed in "Range 1" to "Range 2". Then it accumulates like a snowball. Next ranges will have a bunch of duplicates. If the code needs fixing, more duplicating follows with a high chance for you to get absolutely confused. One may think of the pre-processors, keeping in mind that they smooth the situation with duplications. However, we are going to prevent this scenario from happening at all.

That is why styles for groups of elements should NOT be written ONLY for "Range 1", ONLY for "Range 2", or ONLY for "Range 3". It is better to use the following method: for "Range 1" and all following points, for "Range 2" and all following points, for "Range 3" and all subordinate points, etc. They follow as if in a cascade, implementing fixtures as the website layout narrows in the browser.

Using Inheritance for Better Responsiveness

The superior "Range" cannot see the styles of the subordinate one. The styles, however, are inherited by the subordinates, and can be also modified by them or completely replaced and transferred further into the cascade. We get a mathematical description of a physical action. You compress the browser window, and additional modifying styles are applied to the existing ones as specific limits are met. It is more logical, natural and resembles training of muscles. Each change of the condition is caused by the downsized workspace (the increase in the workload on a body). The website’s elements initially were prepared for a slight change, then for a bigger, then for even bigger one. It makes sense to modify a “leveled-up” element which has already experienced an increased workload and become ready for more action.

Responsive Web Design Using Breakpoints

To begin to "level up" our mock-up for better responsiveness, we set the maximum possible width that does not make the mock-up look too pathetic. Say the mock-up’s width is 1500: it looks stretched but still not bad. This will be the starting point for scaling the mock-up down.

We have already agreed to code all the styles responsible for its current appearance in the default file styles.css. All the rules for media queries will be written in the file responsive.css.

Minimum Range Responsive Layout

Imagine we compress the browser window to 1400 and see an element to be shifted out of place while others still look as planned. We compress it by 10 pixels more and see that one more element will not behave. Well, in this case, you need to write a rule for the group of elements not “feeling comfortable” at the point of 1400. One small tip: do not go for the numbers standing for the standard display resolutions (1480, 1380, 1280, 1024, etc.). Keep in mind the scrolling width that varies in different browsers, so there is no magic in these digits.

Now:

@media (max-width: 1400px) {
}

In this rule we write a new parameter in the condition that became incorrect for this resolution.

For example, the element has a class with a bunch of styles, a 5% left margin and a 100% width. We still like everything about it, except the margin-left parameter: it is too high. So we tell the element to change it:

@media screen and (max-width: 1400px) {
    .element {
        margin-left: 4%
    }
}

We deal likewise with every element craving our attention. After this we see that as soon as we reach the 1400 pixels point, the properties of the element are corrected. It is quite obvious that the new properties will not change during the further scaling down.

Say we compress the element down to 1200 pixels to see that this element with the new fixed properties does not look good to us anymore. Add the “When the width is <=1200, it will be like this» rule:

@media screen and (max-width: 1200px) {
    .element {
        margin-left: 4%
        width: 70%
    }
}

We have again reduced the left margin value and changed the width value. This way the object of our experiments will get these changes on reaching the 1200 pixels limit. These properties will remain as the workspace will shrink.

Let us continue our experiment. We compress the element to 990 pixels and see that the margin does not suit us again, though the width is acceptable. We add the "When the width is<=990, it will be like this" rule:

@media screen and (max-width: 990px) {
    .element {
        margin-left: 2%
    }
}

We correct the required parameter in the rule (in our case, the left margin). The width parameter remains the same after the previous correction (on reaching the 1200 pixels limit).

The order of assigning styles within the CSS lets us use this logic:

  • from 1400 the margin=5%, the width=100% – our starting point;
  • from 1200 to 1400 the margin=4% (set), the width=100% (initial) – assign as soon as the 1400 limit is reached;
  • from 990 to 1200 the margin=3% (set), the width=70% (initial) – assign as soon as the 1420 limit is reached;
  • from 0 to 990 the margin=2% (set), the width=70% (initial) – assign as soon as the 990 limit is reached.

All this does not mean simply duplicating styles. What works in the range over 1400 pixels, works also in the range from 0 to 1400, unless we change these values for others as we scale mock-up down.

If we wrote only one rule –

@media screen and (max-width: 1400px) {
}

– then its content would be applicable to the range from 0 to 1400.

As soon as we add the rule –

@media screen and (max-width: 1200px) {
}

– we receive a separate control over the range from 0 to 1200, while the previous rule remains valid.

We enable the rule –

@media screen and (max-width: 960px) {
}

– and focus on the range from 0 to 990 without cancelling the rules for ranges 0-1400 and 0-1200.

It is as if we were "guiding" our mock-up as we scale it down, prompting necessary changes, removals and additions. However, we advise against aiming for zero: it is better to set the minimal resolution of a laptop or a desktop (for example, 990) as the limit.

Ethan Marcotte will insist that you should go on and write more new rules until you reach the minimum of 320 pixels on mobile devices. It is possible but exhausting for you to make all these fake-breakpoints, keeping an eye on the properties of your elements pixel by pixel. Besides, Ethan Marcotte simply did not know how to define the device type, so he relied on the identification by size (if it is small, then it is a phone). The more complicated the website is, the more breakpoints are needed.

The trickiest range is 800-960 pixels, not even seen by most users. There is no point in compressing the website browser to less than 990 pixels on a laptop or a desktop. And stretching the browser window to this scale on a phone is physically impossible. The maximum to reach is 600-800 browser pixels in the landscape orientation. It makes more sense to separate the styles for the responsive desktop and for the likewise responsive tablet/smartphone physically. Furthermore, the mock-up for phones usually requires more major changes. We plan to cover displaying the mock-up on mobile devices in a separate article.

To sum it up, we have "banned" our mock-up from compressing down 990 pixels (min-width: 990px, you know).

Maximum Range Responsive Layout

We still have a very wide display problem. As you remember, we started with launching the website in the widest possible quality resolution and then worked on its correct downsizing. Now let us see what happens if we bite from another side of the mushroom.

Most likely, it is not that bad if you have already set the maximum values for the website to stretch in the default style (max-width). There is still a chance, however, that some elements and font sizes need fixing.

Let us add a rule to the very bottom of our list:

@media screen and (min-width: 1800px) {
}

making rules for the mock-up in the range from 1800 to infinity.

If something makes us uneasy as we scale the workspace up to 2500, then we can write another rule in addition to the existing one:

@media screen and (min-width: 2500px) {
}

Setting Responsive Mock-Up Height

It may be essential to change the styles in your mock-up not only according to its width but also according to its height. The rules for that are written on the same principle.

The styles when the height is from 0 to 600:

@media screen and (max-height: 600px) {
}

The styles when the height is from 0 to 500; all styles of the range 0-600 that are not reassigned remain the same:

@media screen and (max-height: 500px) {
}

It is important to understand the priorities. You may have the situation when the rules for width values tell the element to be this, while the rules for height values demand it to be that. If you place the rules for defining the height at the end, after the rules for defining the width, the former will be applied in case of doubt. And if you place the height rules in the beginning, they will be canceled out by the identical rules for width.

For finer adjusting of the height rules together with the width values you can add a new query, separate from the common rules:

@media screen and (max-width: 1400px) {
    @media screen and (max-height: 600px) {
    }
    @media screen and (max-height: 400px) {
    }
}

Summary

By clicking this link you can download an example of the file with various rules for responsive design. We also would like to point out that we have nothing against the method we criticized at the beginning. Using specific properties for a certain range has only been completely acceptable if you need the styles of your code to work only within it and not anywhere else.

In general, media queries offer a lot of possibilities for various logical conditions; there are plenty of variants and methods for their use.

How the method works is shown in the following diagram (the margin and width values were chosen randomly, without any particular design in mind and purely for a mathematically visual demonstration):

Responsive Demo

We have cast a little light upon the independent use of breakpoints in responsive mock-ups with efficiency and confidence. This can be applied both to interface elements and content alignment. We have shown how to stop believing in the miracles of bulky ready-made solutions and start using simple and reliable methods. All this helps to avoid making projects difficult for no reason.

Leave a Reply