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.

Editorial Team

Written by Editorial Team

17 Comments

  1. Fernando Acevedo July 26, 2017 at 01:21

    Genius is the ability to make complicated things simple, when you’re describing you need to detail and help your readers to spend the less time trying to decipher or figure out what you’re talking about. In the very beginning you start speaking about RWD and it took some unnecessary wasting my valuable time figuring out that you’re abbreviating Responsive Web Design and for trying to “skip’ about a 3 seconds delay depending how fast you type the word Responsive Web Design you make it harder on your audience and readers to build a momentum in learning because we have to figure out what RWD is and you didn’t even put periods to help your readers to know you’re abbreviating.

    Reply

  2. Also even better, media queries support using dimension with inches as well.

    Because high resolution mobile devices can get thrown off by “768px”, try maybe “6in” instead.

    Reply

  3. Good article with strong overview of breakpoints, however I would suggest rethinking which media queries to use: ‘min/max-width’ instead of ‘min/max-device-width’

    As Google points out here: http://bit.ly/1TvK18Y
    You should base your media queries on viewport size ‘min/max-width’, NOT device screen size ‘min/max-device-width’ for two reasons.

    First, querying the device screen size can cause issues in some older browsers where they “…may not report the device width properly and instead report the screen size in device pixels instead of the expected viewport width”.

    Second, using ‘min/max-device-width’ “…can prevent content from adapting on desktops or other devices that allow windows to be resized because the query is based on the actual device size, not the size of the browser window.”

    Just some food for thought…

    Reply

  4. Good article. Using min-device-width and max-device-width will make the browser tools you mention later useless though.

    Reply

    1. Good catch djwd. I touched in this in my previous article on media queries. Its a good read, so you should find it to be interesting.

      Reply

  5. Definitely a nice site, but Ralf got it right by saying that your images does get distorted. But aside from that, I’m totally loving it.

    Reply

  6. Brianna Deleasa October 8, 2012 at 17:43

    Thank you for a great and informative article! Responsive themes are very useful with the wide range of screen sizes today. It is important to make sure your website looks great no matter what browser or screen resolution.

    Reply

  7. Great article about break points and RWD. I learned some new techniques to use in the future.

    Reply

  8. Great Article and very detailed.
    The min-width property is definetly a must in the css file, so that the site design can fit on every screen sizes.

    Reply

  9. Great information’s. I really liked it.

    Reply

  10. Thanks for your helpful article, Jamal. With the popularity of tablets and mobile devices, this information will certainly come in handy.

    Thanks again and have a great day1

    Reply

  11. This is a great article, Jamal. I’ve been messing with.responsive design myself, and have just recently implemented the technique on my own blog.

    Reply

    1. Your Site looks nice, but your images get distorted. You should fix this. Try something like:

      img {
      max-width: 100%;
      width: auto\9;
      height: auto !important;
      -ms-interpolation-mode: bicubic;
      }

      Reply

      1. Good catch Ralf!

        Reply

    2. Hey Casey,

      In my viewing, I don’t see how your site is responsive. Maybe you’ve made some changes that take that aspect of it away at my time of viewing?

      Reply

  12. Roberto Alanis October 6, 2012 at 23:34

    Media Queries should cover a range of resolutions. Your “Standard Breakpoints” have a gap, what happens when a device between 480px and 768px goes in your site? it will show the full site, probably broken; so I suggest for “Standard Breakpoints” this:


    /*Mobile*/
    @media only screen and (max-device-width : 767px) /*All from 0 to 767px*/ {

    /* Styles */

    }

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

    /* Styles */

    }

    Reply

    1. Hi Roberto,

      Thanks for the comment. Your statement is correct. However, as the title of the first breakpoint suggests it is for Mobile devices only. The area between 480 and 767 isn’t focused on entirely enough for the most part in RWD in my opinion, creating somewhat of a forgotten zone so to speak. So instead of including that line, but referring to it as the first code snippet, it goes along with my ending section of the article.

      Thanks for the comment again :)

      Reply

Leave a Reply