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.


Table of Contents:

  1. What are Responsive Design Breakpoints
  2. Responsive Design is Like Water
  3. Ultimate Guide to Responsive Web Design

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.


*Image Credit: djeucalyptus

@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

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

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


*Image Credit: mloge

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


*Image Credit: ceNineJon

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


Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples

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.


Tools

1. Less Framework 4

Less-framework-responsive-web-design-showcase

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

2. Gridless

Gridless-responsive-web-design-showcase

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

3. Mobile Boilerplate

Mobile-boilerplate-responsive-web-design-showcase

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.

4. Skeleton

Skeleton-responsive-web-design-showcase

5. 320 and up

320-up-responsive-web-design-showcase

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

6. Fittext

Fittext-responsive-web-design-showcase

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

7. Media Query Bookmarklet

Media-query-responsive-web-design-showcase

The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.

8. Responsive testing

Testing-responsive-web-design-showcase

A quick and easy way to test a website design in multiple screen widths.

9. Media Queries

Media-queries-responsive-web-design-showcase

A collection of inspirational websites using media queries and responsive web design.

10. PhotoSwipe

Photoswipe-responsive-web-design-showcase

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

11. Adapt.js

Adapt-responsive-web-design-showcase

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page.

12. Adaptive Images

Adaptive-images-responsive-web-design-showcase

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. No mark-up changes needed.

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.

1. Responsive Design with CSS3 Media Queries via Web Designer Wall

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

2. Fluid Images via Unstoppable Robot Ninja

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.

3. How To Design a Mobile Responsive Site via UX Booth

This is a great tutorial written by Elaine Simpson, going into great detail and giving a great process to follow when going about a responsive design.

4. Responsive Data Tables via CSS Tricks

Data tables are an important aspect of showing results, or grouped information on a website. With this tutorial, you’ll learn how you can keep this aspect with style.

More Tutorials

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website via Smashing Magazine

Context Aware Image Sizing via Filament Group

Experimenting With Responsive Design via Lee Munroe

Optimizing your email for mobile devices with the @media query via Campaign Monitor

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.

1. Responsive Web Design By Ethan Marcotte

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.

2. Responsive Web Design: What Is It and How To Use It via Smashing Magazine

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.

3. Beginner’s Guide to Responsive Web Design via Think Vitamin

 

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.

4. Introduction to Responsive Web Design via 1stwebdesigner

This is a solid offering by Christian Vasile at introducing those new to this topic, while also doing it in a brief manner.

More Reading

Responsive Web Design via sitepoint

Responsive Web Design via A List Apart

Responsive Web Design Demystified via Elated

Seven Lessons Learned From Responsive Web Design via .Net Magazine

Responsive Web Design Techniques, Tools and Design Strategies

Inspiration

1. Briangardner

Briangardner-responsive-web-design-showcase

Briangardner-2-responsive-web-design-showcase

2. Notloremipsum

Notloremipsum-responsive-web-design-showcase

Notloremipsum-2-responsive-web-design-showcase

3. Fortysevenmedia

Fortysevenmedia-responsive-web-design-showcase

Fortysevenmedia-2-responsive-web-design-showcase

4. Osvaldas

Osvaldas-responsive-web-design-showcase

Osvaldas-2-responsive-web-design-showcase

5. Thegregthompson

Thegregthompson-responsive-web-design-showcase

Thegregthompson-2-responsive-web-design-showcase

6. Studiopress

Studiopress-responsive-web-design-showcase

Studiopress-2-responsive-web-design-showcase

7. Food Sense

Food-sense-responsive-web-design-showcase

Food-sense-2-responsive-web-design-showcase

8. Raewynbrandon

Raewynbrandon-responsive-web-design-showcase

Raewynbrandon-2-responsive-web-design-showcase

9. Gonzoblog

Gonzoblog-responsive-web-design-showcase

Gonzoblog-2-responsive-web-design-showcase

10. Zync

Zync-responsive-web-design-showcase

Zync-2-responsive-web-design-showcase

11. Techdept

Techdept-responsive-web-design-showcase

Techdept-2-responsive-web-design-showcase

12. Pelicanfly

Pelicanfly-responsive-web-design-showcase

Pelicanfly-2-responsive-web-design-showcase

13. Marijazaric

Marijazaric-responsive-web-design-showcase

Marijazaric-2-responsive-web-design-showcase

14. Raymacari

Raymacari-responsive-web-design-showcase

Raymacari-2-responsive-web-design-showcase

15. Handsomecopy

Handsomecopy-responsive-web-design-showcase

Handsomecopy-2-responsive-web-design-showcase

16. Jaypegams

Jaypegams-responsive-web-design-showcase

Jaypegams-2-responsive-web-design-showcase

17. Joshuasortino

Joshuasortino-responsive-web-design-showcase

Joshuasortino-2-responsive-web-design-showcase

18. 36creative

36creative-responsive-web-design-showcase

36creative-2-responsive-web-design-showcase

19. Whitelotusaromatics

Whitelotusaromatics-responsive-web-design-showcase

Whitelotusaromatics-2-responsive-web-design-showcase

20. Forefathersgroup

Forefathersgroup-responsive-web-design-showcase

Forefathersgroup-2-responsive-web-design-showcase

21. Dentsunetwork

Dentsunetwork-responsive-web-design-showcase

Dentsunetwork-2-responsive-web-design-showcase

22. Upperdog

Upperdog-responsive-web-design-showcase

Upperdog-2-responsive-web-design-showcase

23. Teehanlax

Teehanlax-responsive-web-design-showcase

Teehanlax-2-responsive-web-design-showcase

24. Weareduo

Weareduo-responsive-web-design-showcase

Weareduo-2-responsive-web-design-showcase

25. Unfold

Unfold-responsive-web-design-showcase

Unfold-2-responsive-web-design-showcase

26. Builtwithmomentum

Builtwithmomentum-responsive-web-design-showcase

Builtwithmomentum-2-responsive-web-design-showcase

27. Glorm

Glorm-responsive-web-design-showcase

Glorm-2-responsive-web-design-showcase

28. Quazarwebdesign

Quazar-responsive-web-design-showcase

Quazar-2-responsive-web-design-showcase

29. Agenciart

Agenciart-responsive-web-design-showcase

Agenciart-2-responsive-web-design-showcase

30. Apgdesign

Apgdesign-responsive-web-design-showcase

Apgdesign-2-responsive-web-design-showcase

31. Createdm

Createdm-responsive-web-design-showcase

Createdm-2-responsive-web-design-showcase

Editorial Team

Written by Editorial Team

16 Comments

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

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

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

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

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

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

    Reply

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

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

    Reply

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

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

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