Overview of Breakpoints in Responsive Web Design

Posted in Tips, Usability, Web Design • Posted on 14 Comments

Last time, we went over media queries. This is an important aspect to know of Responsive Web Design (RWD from now on) because it is this CSS declaration that allows for the different layouts to appear at different screen sizes.

Hmm, now what about different screen sizes? To make it easy to understand, lets 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 break points.

What are Break Points

*Image Credit: djeucalyptus

Break points 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 once 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

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

/* Styles */

}

Tablets

@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 instance, creating breakpoints for devices when they are in landscape and portrait orientation.

Mobile Portrait

@media only screen and (max-device-width : 320px) {

/* Styles */

}

Mobile Landscape

@media only screen and (min-device-width : 321px) {

/* Styles */

}

Tablet Portait

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

}

Tablet Landscape

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

}

Creating Custom Breakpoints


*Image Credit: bookgrl

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 like 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 to just 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 suppose 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 a RWD Expert

Since the release of the great responsive frameworks now available, learning and instantly applying RWD has been greatly 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 higher 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 Right 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

*Image Credit: lanier67

  • 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.

34 Written ArticlesWebsiteGoogle+

I code, write, and stuff at Five Alarm Interactive. Tweet me: @5alarmint.

14 Comments Best Comments First
  • Veruca

    Sunday, October 7th, 2012 07:58

    3

    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

    +1
  • Brianna Deleasa

    Monday, October 8th, 2012 17:43

    9

    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.

    +1
  • Anonymous

    Monday, October 8th, 2012 06:04

    6

    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.

    0
  • Casey Dennison

    Sunday, October 7th, 2012 00:16

    2

    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.

    0
    • Ralf

      Monday, October 8th, 2012 07:16

      7

      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;
      }

      0
      • Jamal

        Wednesday, October 24th, 2012 11:49

        14

        Good catch Ralf!

        0
    • Jamal

      Wednesday, October 24th, 2012 11:48

      13

      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?

      +1
  • djwd

    Monday, October 15th, 2012 04:42

    11

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

    0
    • Jamal

      Wednesday, October 24th, 2012 11:46

      12

      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.

      0
  • Kelvin Newton

    Wednesday, October 10th, 2012 21:11

    10

    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.

    0
  • Muksid Ratul

    Monday, October 8th, 2012 03:06

    5

    Great information’s. I really liked it.

    -1
  • Roberto Alanis

    Saturday, October 6th, 2012 23:34

    1

    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 */

    }

    -1
    • Jamal

      Sunday, October 7th, 2012 11:50

      4

      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 :)

      +1
  • dave

    Monday, October 8th, 2012 11:00

    8

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

    -1
  • djwd

    Monday, October 15th, 2012 04:42

    11

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

    0
    • Jamal

      Wednesday, October 24th, 2012 11:46

      12

      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.

      0
  • Kelvin Newton

    Wednesday, October 10th, 2012 21:11

    10

    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.

    0
  • Brianna Deleasa

    Monday, October 8th, 2012 17:43

    9

    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.

    +1
  • dave

    Monday, October 8th, 2012 11:00

    8

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

    -1
  • Anonymous

    Monday, October 8th, 2012 06:04

    6

    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.

    0
  • Muksid Ratul

    Monday, October 8th, 2012 03:06

    5

    Great information’s. I really liked it.

    -1
  • Veruca

    Sunday, October 7th, 2012 07:58

    3

    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

    +1
  • Casey Dennison

    Sunday, October 7th, 2012 00:16

    2

    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.

    0
    • Ralf

      Monday, October 8th, 2012 07:16

      7

      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;
      }

      0
      • Jamal

        Wednesday, October 24th, 2012 11:49

        14

        Good catch Ralf!

        0
    • Jamal

      Wednesday, October 24th, 2012 11:48

      13

      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?

      +1
  • Roberto Alanis

    Saturday, October 6th, 2012 23:34

    1

    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 */

    }

    -1
    • Jamal

      Sunday, October 7th, 2012 11:50

      4

      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 :)

      +1

Comments are closed.

54.161.147.106 - unknown - unknown - US