Overview of Breakpoints in Responsive Web Design

Advertisement

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.

 

%tutke

What are Break Points

%tutke

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

 

Advertisement
Overview of Breakpoints in Responsive Web Design | manda | 4.5
%d bloggers like this: