A Guide to Responsive Breaking Points


Planning, designing, and coding responsive websites can be a daunting task. For every type of mobile device or monitor, you have to accommodate yet another media query. With new phones and tablets hitting the market seemingly every day, it’s just not possible to include them all.

When it was our turn to tackle the responsive challenge, we wanted to find a way to accommodate the majority of devices with the simplest code possible. With responsive design, you can’t code for every unique device – but you can code for each width. We hit the digital “books”, looked at what other sites were doing, sought after the emerging industry standards, and determined that the base breaking points found in the Bootstrap framework were spot on. We love the flexible platform that the framework provides, and currently use it as the base for all of our website designs. 

Since we work in a visual industry, and we’re visual thinkers (just like you), we complied an infographic containing visual guides for the breaking points, testing tools, and a few key resources from our research.

Without further ado, here it is!

A visual guide to Bootstrap responsive breaking points:


Share this Image On Your Site. Copy and Paste the Code Below

Please include attribution to DesignFiles.net with this graphic.
<a href=”https://www.designfiles.net/responsive-infographic/”><img alt=”A Guide to Responsive Breaking Points” src=”https://www.designfiles.net/wp-content/uploads/2013/03/phases_responsive-break-points.jpg” width=”540px” border=”0″ /></a>


Leave Your Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 Comments on “A Guide to Responsive Breaking Points

    As always, nice job! There’s actually a lot of cool things you can do with a responsive layout now. The user experience can be adjusted for each device which ultimately also helps conversions.

    Designing a website for just one screen size is like building a website that will work in only one web browser.