Responsive Design Breakpoints: The Ultimate Overview

Last Updated on March 30, 2016

180

shares

Facebook

Twitter

Google+

Pinterest

+

Last time, we went over media queries and in this article we will get to know responsive design breakpoints. 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 Responsive Design Breakpoints

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.

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.

Tablets

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.

Tablet Landscape

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.

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

}[/css]

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.

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

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.

In the next section we will talk more about responsive design and how it seems that it has no true form. Let’s roll.

Responsive Design is Like Water

There are three states of matter known to be found on Earth. These states of course being that of solid, liquid, and gas. Taking into account that these three states are distinctly different, it is easy to assume that they each have a unique form. Solids are rigid and tightly packed molecules , gases are hyperactive molecules that are always just bouncing around everywhere, and liquids are closely connected molecules that have no true form. Before steering away from this post because of the brief refresher on some chemistry notes, which may or may not have triggered haunting blocked out memories, take some time to consider something. Why would any professional creative ever be daft enough to mention anything relating to science subjects like chemistry in a blog post? And how can knowing this honestly improve my responsive design skills?

Liquid: The Responsive State

For the sake of the article, the matter state of liquid will now be referred to as water. Everyone in every part of the world can tell you what water looks like, but have you really noticed it? With all the discussion arising due to responsive design going mainstream, its troubling to see the original responsive design go unnoticed. Let’s take a look at a few examples, while also explaining how they relate to responsive design.

Example 1: Water has no True Form

As aforementioned the state of water is the only one to be fully visible, yet have no exact form. The loosely connected molecules of this state bond together to take the shape of whatever container they are in. In responsive design, the website is meant not to have any true form. Its form depends on the device it is being viewed on, or containing it.

Example 2: When Pressure is Added, Water can be Dangerous

The phrase speed over power never becomes clearer then when dealing with water. Normally, water is in a very nice refreshing state with no harm coming from touching it. However, that can easily change once the right level of pressure is added. Once the right pressure level has been reached, the safe water state quickly turns into a blade sharp enough to cut through almost anything.

In responsive design, the pressure level relates to the use of space on the viewing device . The higher level of space used then what would be considered acceptable, the higher chance the pressure to find the message in said viewing device grows.

Example 3: Water Easily Separates, Without Losing its Identity

The beauty that truly is found in water is that no matter how you try to break it up, whenever it is viewed, water will still be easily recognized as being water. With responsive design as screen resolutions go down in size, parts of the website will not be seen. It is important to make sure that no matter the screen resolution that the site is still easily recognizable and leaves no question about its purpose.

Applying Traits of Water To Your Designs

Hopefully now you see the benefits of taking a closer look at water when creating a responsive website, if not go ahead and start over from the top one or more times. Chances are, something was skipped or you just breezed through too fast. Next up is learning how to apply certain traits of water to responsive design that will allow the most to be obtained from your site.

Use Screen Dimensions as a Guide, Not a Sole Determining Factor

The common thought on responsive design is that you design your site differently based on the usual screen resolutions of the device power trio (phones, tablets, desktops/notebooks) and work from there. This may work to some degree, but it defeats the purpose of pursuing a website that is responsive. For such a case, the website would best be described as being adaptable for the screen resolutions mentioned. What should be done instead of this, is understanding the different resolutions and coming up with a framework, or editing a pre-built one, to the point where how it responds with different screen sizes matches up well with your websites design and layout.

Understanding how Much your Viewer can Take

Imagine a scenario where you have an adult and a young child, both are thirsty and are about to get a drink to quench said thirst. Does the adult and the child have the same size drink? Of course not, the child would be overwhelmed by such a size and might have a negative impact from taking in more than allotted for their size. When dealing with what content should stay, and which should go, with smaller screen resolutions it’s all in a matter of a few determining factors: what type of content does your site have, what are the reading habits of your visitors, what areas are needed to maintain the message, and what would go unnoticed missing.

Forming a Bond between Independence and Cohesiveness

The most beautiful thing about water is that every one of its molecules is completely independent of one another, but when combined with another water molecule, a cohesive bond is formed. This bond allowing for each one to stay independent, and able to detach from one another, and allowing for a greater amount of water to be formed without conflict. This may be a general practice for any website built, but it’s way more important when dealing with one that is responsive. The goal here is to find a way where all aspects are independent enough to stand alone on their designated resolutions without an issue, and be able to come together when that time is called like they belong with each other.

In Conclusion

The responsive state of water is a very beautiful in form, process, and identity. By taking a closer look at how it acts and responds to different situations, can give quite the amount of good insight into how to better a responsive website. The main thing to take away from this article is that responsiveness is not the same as being adaptable to certain screen resolutions. Being truly responsive is about growing, shrinking, or whatever else to adjust to the screen dimensions of the device that is doing the viewing.

What have You Noticed about Water that You would like to Add?

Now let’s take a look at some tools and inspiration to responsive web design. Below you will find a complete guide.

Mobile is the new trend and most of the businesses are recognizing it. Having a fluid and responsive website will not only make you cooler, it’s the new way of increasing conversions and engaging your visitors. Not sure where to start? Responsive design might not be as big a mystery as you’ve imagined it. Indeed, there are frameworks and plugins that will make it much easier for you to create responsive designs. Continue reading and check out useful tools for creating responsive web design as well as 35 stunning examples of responsive web design.

Mobile Boilerplate is your trusted template made custom for creating rich mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Tutorials

We know that not everyone learns through reading, for some its all about actually getting up and doing it. That is why below, we are going to take a look at some good tutorials on responsive web design for those just itching to start playing with it.

Media queries are the backbone of responsive web design, and this function of CSS3 will definitely up your ante if you’re familiar with. In this tutorial, Nick La does a great job of introducing and explaining media queries while offering a tutorial for using them.

The early adopters of responsive web design were mostly text-based sites, with very few images. This is easy to understand because the one question a lot of people had that made them wary about this new practice was how images would render. Well after going through this article by Ethan Marcotte, you won’t be one of the latter.

Publications

Trying to learn new material is always hard when first starting out, which is why having great written work on the subject is a great way of easing the learning curve. That is why before going any further, we’re going to take a look at some very useful books and blog articles on responsive design.

It is only right to start off our listing of great resources on responsive web design with this thoroughly detailed book written by Ethan Marcotte. In this book, Ethan guides an exploration of understanding and appreciated what is responsive web design. Honestly, this book very well may be all you need.

This article written by Kayla Knight for Smashing Magazine is probably the best, at the very least one of the best, published articles in the blogosphere on responsive web design. This will give you a good explanation of what exactly responsive web design is, how it works, and how you’ll leave knowing some cool ways of implementing it.

If you’re looking for something informative, and more so straight to the point, as a good introduction to responsive web design then Nick Pettit wrote the article for you. Nick did a good job at offering a very easy to follow explanation of responsive web design for the less experienced web designer or developer trying to get their feet wet in this new practice.

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/1TvK18YYou 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.”

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.

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

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.