The Ultimate Overview of Responsive Web Design Breakpoints

Previously, we talked about media queries, so in this article, we will give a better understanding of responsive web design breakpoints.

Hmm, now what about different screen sizes? To make it easy to understand, let us look at this using an analogy.

So, imagine that RWD is a blueprint for a wonderfully new house. The foundation, which the rest of the house depends on, would be media queries. After the foundation comes the first level of the house, which sets the tone for how the rest of the house will be built. In this house, the first floor would be the break points.

What Are Responsive Design Breakpoints?

Breakpoints in RWD are browser widths that have a media query declaration to change the layout once the browser is within the declared range. Take, for example, the recent media query tutorial published.

In this tutorial, Michael has the page changing from its base 960px layout once it is being viewed at 768px. The code snippet for doing this is shown below.

@media only screen and (max-width: 768px){ /* CSS Styles */
}

This media query is called a device with a browser width of 768px or below is viewing this page, creating a break point.

The Standard Breakpoints

On average, every responsive site will have a minimum of two break points. These being for tablets and mobile devices. Unlike the desktop, tablet and mobile are based on the screen sizes of the iPhone and iPad because they are the most popular devices in both mobile and tablet devices.

Whether or not this is a best practice is a conversation for later. Below, you’ll find the code snippets for these standard breakpoints.

Mobile Breakpoint

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }

Tablet Breakpoints

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }

Going the Extra Mile

This is good enough for most responsive websites today. However, there are always instances when a little more detail in how your layout changes is necessary. For example, creating breakpoints for devices when they are in landscape and portrait orientation.

Mobile Portrait Breakpoint

@media only screen and (max-device-width : 320px) { /* Styles */ }

Mobile Landscape Breakpoint

@media only screen and (min-device-width : 321px) { /* Styles */ }

Tablet Portait Breakpoint

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */ }

Tablet Landscape Breakpoint

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */ }

Creating Custom Breakpoints

Why Create Custom Breakpoints

It is well documented, in code namely, that no two websites are built the same. With that in mind, it only makes sense that no two responsive websites should be able to successfully satisfy its responsive needs by using the standard breakpoints.

Therefore, it is important to figure out where and when inside the range of the standard breakpoints does your build need some extra attention.

Writing Your Custom Breakpoint

Creating a custom breakpoint is very straightforward and only requires a familiarity with media queries to create. However, there are a lot of ways it can be done wrong and create unnecessary breaks.

For instance, let’s say that a website looked a little off at 355px. So to fix this, a developer would do something like the code snippet below.

@media only screen and (max-device-width : 355px){
/* Styles */ }

The problem with this snippet above is that while it is correcting the issue for viewing devices at 355px, it is also creating other issues now for devices that are lower than 355px.

A proper way of doing this would have been to find the range in which this visual issue is occurring and to specify an orientation.

So let’s just imagine that the proper range would be 340px and 355px, and this is a portrait viewing mode issue. The code for that would look like what is shown below.

@media only screen and (min-device-width : 340px) and (max-device-width : 355px) and (orientation : portrait) {
/* Styles */ }

Should it Be by Device or Layout

Imagine this very typical situation. A newly responsive website looks great at all the major screen dimensions of popular devices, but there are a few hiccups. The hiccups being that the layout looks out of whack at some browser widths in the 400px area.

Since this is not a popular screen width, the creative behind the build decided just to let it be. Was this a good decision? No!

The purpose of RWD is to create a best possible future proof solution in possible browser screen dimensions. To accomplish this, the viewing devices of today should not be a determining factor of how a responsive site is supposed to break or have a higher priority in the long run.

The widths of devices today are best described as benchmarks or starting points. What should be done here is put an emphasis on the layout of the page, and what browser width does the layout start looking bad?

Why This Will Make You Appear to be an RWD Expert

Since the release of the excellent responsive frameworks now available, learning and instantly applying RWD has been significantly simplified. However, like with any starter code, only rookies take the code done by another and completely wrap their project(s) around it.

Being able to ensure that the responsive site(s) that you’re going to be doing look good at any possible viewing resolution, not just the standards, shows a higher understanding.

This perceived greater understanding will translate into a better view of your services in the eyes of clients, and will give you more leverage in initial talks.

How to Create a Custom Breakpoint the Proper Way

Step 1: Make Sure You Have the Right Browser Extensions

Extensions like Resize Window for Chrome are great for doing things like this because as you shrink your browser, the current dimensions are shown in the bottom right corner.

Step 2: Look in Between Your Standard Breakpoints

This is where you’re going to find the inconsistencies in appearance. In this step, with an extension like Resize Window, you’re going to need to spend some time looking at your site at every pixel width to see where it starts to look funny and document it. This could take a while.

Step 3: Create Your Media Query Declaration

Simply put your findings into a call similar to the ones listed above, and there you go.

What to Walk Away With

• Breakpoints are when your responsive site reaches a certain viewing width and calls new styles for that width
• The standard breakpoints are tablet and mobile, and their respective orientations
• It is always important to check your site at points that aren’t the default to create a truly cohesive experience.
• Make sure that your custom breakpoints don’t conflict with any of the standard breakpoints.
• RWD is meant in an attempt to be future proof, so spending to much time focusing on present devices is not good practice
• Ensuring the viewing experience remains at a consistent quality level will make you look like an expert to clients.