Breakpoints for Responsive Design

The points or width measurements where jumps can be created in the Responsive design, commonly called breakpoints, from where to apply the media queries for Responsive Web Design.

Responsive Web Design is many things, it is, browsers and operating systems, speeds and screen widths. In this case we are going to deal with the optimization for screens, the types of screens and the leaps that the design must take to adapt.

You’ll notice that a responsive layout is responsive to changes in the browser window. As we make it larger or smaller, the page template changes to better adapt to the new dimensions. When stretching the screen you will notice that, from a single column in small settings, it becomes two columns in a larger screen width, then it becomes three columns when you expand the space even more and so on indefinitely, as the designer has defined .

We call those jumps in which a design changes from one layout to another, as the browser window enlarges, and they occur thanks to the . In this article we will talk about breakpoints and what are the ideal points in which to do them.

Breakpoints should not target devices

This is the most important point of the article, since generally people with less experience in Responsive Web Design tend to assume that there are some standard measures in which breakpoints should be applied. There could be them according to the dimensions of various devices, such as iPhone, iPad, computers with standard screens and we will talk about them later, but the reality or the recommendation goes the other way.

As we saw in the introductory chapters in , one of the reasons this design philosophy exists is to not create different versions for different types of systems. We did not create a version for mobiles, another for tablets and another for computers. That should have been clear. Well, in the same way, we do not create device-oriented breakpoints. The reason is the same: it is impossible that you can generate as many jumps as types of screens and their resolutions, etc.

If you insist on creating breakpoints with device dimensions in the head, you will have to create breakpoints for hundreds of devices. When they release a new model or a new brand, you certainly don’t want to update your jumps so that the web looks good on them. It is impossible to reach all devices, all makes and models. It is impossible for you to know all the screen dimensions, those that exist today and those that may exist tomorrow.

How to know where to place a breakpoint

If you don’t make device-oriented breakpoints, how do you know where to put them? The answer is given by your design. In other words, breakpoint must be oriented to the particular design of your website.

To know where to place the jumps with the mediaqueries you must stretch the browser window, starting from the window with reduced dimensions (mobile first) you stretch the width until you begin to appreciate that your design is looking worse. It is not that users dedicate themselves to changing the dimensions of the browser window, it is something that designers do, to quickly imitate different screen sizes of mobile phones or tablets.

Take any responsive web page, like the one from .com, and put it in small width dimensions. Then enlarge the window and you will notice that at a certain moment there is a lot of empty space or that the columns start to be too big. Then, at that moment, shortly before or shortly after, you will see that “zam”, the layout changes.

In other words, you make the page wider and when your design starts to get worse, or the spaces start to be worse distributed, then it’s the right time to place a breakpoint.

Big and small breakpoints

The golden rule is not to limit ourselves to a certain number of breakpoints. You should not skimp when making breakpoints. Do not see them as points where you change the layout, oriented to mobile phones, tablets or high-definition computer monitors. As we have said, that is not the objective, to create versions of the design, even if you maintain a single HTML. Sometimes a breakpoint can simply be changing the alignment of an element, the size of a text in a headline, etc. The points where you place media queries can be for anything you need. Sometimes it is something as simple as an image, that from certain dimensions, you want it to float (float) so that the text around it surrounds it. Or a tiny increase in the page font. No matter how small the change is, if you see that it benefits the appearance of your page, it is a reason to create a new “media queries”.

Therefore, there are both large breakpoints, which will change the layout of the page and therefore affect the design in a more radical way, and other small intermediate breakpoints, which will make small adjustments to fix details that are worth tweaking. For all this, we reemphasize the previous point, it is important that you make breakpoints based on your design, appreciating the right moment to produce them, enlarging and shrinking the browser window to decide how and when.

Standard measurements for media queries

There are designers who, despite everything said above, still wonder if there are standard measurements for a page, in which to create their breakpoints. We cannot give you those measures, among other things because we do not intend to contradict ourselves, at least not in this article. But don’t despair because you really don’t need them.

We insist again, as many times as necessary, that mediaqueries should not be defined to optimize a design for iPad or iPhone, etc. rather, they should be those that produce a better adaptability of the design. And you can only achieve that by knowing your own design and not knowing the supports from which it will be accessed. Also remember that any collection of devices you may have is always going to be biased, since it’s impossible to bring together all screen sizes and resolutions in any one document. Basically also because we would need to be updating that list almost daily.