Responsive Breakpoints in Web Design

Atari Breakout

Responsive design is everywhere. We are living in an age where a single webapp can be used across a multitude of devices; each with their own resolution and screen size.

If that wasn’t overwhelming enough, rarely is a single UI effective on every type of screen: Mobile devices excel at displaying content stacked vertically, while laptops and desktops’ extra screen real estate prefers content that sprawls out horizontally. Tablets are roughly a mixture of the two, depending on their size. And we can’t leave out the users that browse in landscape orientation (I know you exist!).

That is a lot to worry about. Or at least it would be if we didn’t have Responsive Design — an approach in which we attempt to account for devices of all sizes and orientations and respond to each with a unique user experience that is best suited for the platform they’re using.

Rather than account for every device in existence, Resposnive Design allows designers to lump them into a handful of categories and create distinct UIs for each.

With design software like Sketch, we can create mockups to get an idea of what the end result will look like for each screen type:

Responsive Design — Different UIs for different screen types

Nice, we have our designs. Now how do we know when to switch between them? You guessed it, Responsive Breakpoints are here to save the day.

The Bootstrap Way

The smart folks over at Bootstrap created a standard set of breakpoints that they use across their framework, each taking a different type of device into account:

• “Extra Small” Screens (<576px wide) should be considered mobile phones in portrait mode
• “Small” Screens (≥576px): mobile phones in landscape mode, larger phones, smaller tablets in portrait mode
• “Medium” Screens (≥768px): tablets in portrait mode
• “Large” Screens (≥992px): smaller desktops or laptops, tablets in landscape mode
• “Extra Large” Screens (≥1200px): desktops or laptops
• “Extra Extra Large” Screens (≥1400px): enthusiast laptops, large external monitors

You may be wondering why these values were chosen. Bootstrap states:

“Breakpoints are also representative of a subset of common device sizes and viewport dimensions — they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.”

I’ve found this to be true across a variety of devices I’ve tested for, which is why I tend to stick with these — And unless your project demands precise UI transitions I’d recommend doing the same.

OK, we have our designs, we’ve defined our breakpoints — The next step is to direct our browser to handle the transitions. We’ll use media queries to accomplish this.

CSS Media Queries

Media queries are essentially blocks of CSS properties that are only included if a certain condition is met. They typically reside below your main styles as this gives them the ability to override rules that were defined previously.

.welcome-banner’s font size increases on screens 576 or more pixels wide

That’s great for us, because it means that we can code up a single UI, then supplement additional rules depending on the size of the user’s screen. This works because most UI designs will contain the same base elements across every platform — the key difference is how they are arranged on the page.

Below are Bootstrap’s breakpoint definitions as media queries:

...
/* Rules outside of a media query apply to screens <576px */
...
/* Small (sm) devices */
@media(min-width: 576px) { 
    ...
    /* Rules apply to devices between 576px and 767px */
    ...
}
/* Medium (md) */
@media(min-width: 768px) {     
    ...
    /* Rules apply to devices between 768px and 991px */
    ...
}
/* Large (lg) */
@media(min-width: 992px) { 
    ...
    /* Rules apply to devices between 992px and 1199px */
    ...
}
/* Extra Large (xl) */
@media(min-width: 1200px) { 
    ...
    /* Rules apply to devices between 1200px and 1399px */
    ...
}
/* Extra Extra Large (xxl) */
@media(min-width: 1400px) { 
    ...
    /* Rules apply to devices 1400px or greater */
    ...
}

By using min-width to define our breakpoints and arranging them this way, we create the perfect environment for developing a mobile-first design: Your main styles control the behavior of elements on mobile screens while each subsequent breakpoint applies additional rules to “morph” the content into a brand new design.

You can simulate different device widths by resizing the browser window

If your goal is to design a desktop-first experience, you might use the following media queries instead:

...
/* Rules outside of a media query apply to screens >1400px */
...
/* Extra Extra Large (xxl) devices */
@media(max-width: 1400px) { 
    ...
    /* Rules apply to devices between 1201px and 1400px */
    ...
}
/* Extra Large (xl) */
@media(max-width: 1200px) { 
    ...
    /* Rules apply to devices between 993px and 1200px */
    ...
}
/* Large (lg) */
@media(max-width: 992px) { 
    ...
    /* Rules apply to devices between 769px and 992px */
    ...
}
/* Medium (md) */
@media(max-width: 768px) {     
    ...
    /* Rules apply to devices between 577px and 768px */
    ...
}
/* Small (sm) */
@media(max-width: 576px) { 
    ...
    /* Rules apply to devices 576px or less */
    ...
}

Now everything is somewhat reversed. When using max-width rather than min-width, your main styles will apply to a large screen, with additional rules being applied as the screen becomes smaller.

And there you have it. Responsive design is critical to great web design. Transitioning from desktop to mobile and back again should be seamless — and breakpoints are the secret to making those transitions as smooth as possible!

Here’s a link to the pen if you'd like to mess around with it yourself.