Responsive Design: Break Points



What is Responsive Design?

Responsive design is all the rage lately, as many web designers and developers are adopting responsive design techniques for their websites. Responsive design is a solution that has derived from having so many different mobile devices and screen sizes out there. The problem is that when building a site, you want it to look consistent across all devices, so that they all look good and the content is easily accessible. Before responsive design, no one really knew how to approach this issue.

responsive design: tablet

You have desktop monitors at different sizes, tablet devices that range from 6 to 10 inches on average, and you even have cell phones that have a wide range of screen sizes and orientations. then, on top of all of that, you have devices with a retina display, which is double the typical resolution. Responsive design is meant to make your site look consistent across the variety of different devices available now. One solution was to create a site for desktop, and then a separate site for mobile. While that practice can still come into play, depending on your business’s goals, you have to build 2 sites. Then all of these different tablets started popping up, which made things even more difficult. Could you imagine trying to make a separate site design and layout for every screen size and orientation? It would be a nightmare, and I would leave the business. No thank you!

How does Responsive Design Solve the Problem?

A common method, and the one that I personally prefer,  allows you to set different break points via media queries in your cascading style sheets. You can set a pixel range for the screen size, so that when the screen is a certain size, the content reflows and restructures slightly to better fit the screen. Instead of looking at a giant image on a tiny screen and having to zoom out, the image scales proportionally. Instead of text and an image being next to each other, side by side, the text may appear underneath the image, and both the text and the image will span the full width of the container div. This is excellent, because you can simply place images and allow the CSS to control the size. You can use multiple media queries to set a multitude of break points.

The Debate About Break Points

A big debate about break points is how many are sufficient in order to get the job done? How do you determine where to set the break points so that your responsive designs truly meet the needs of your client?Some save three, some say five, some say more. The problem is that every time you set a new break point, it is something that you have to keep up with in CSS. It can become complicated quickly, especially if you are building a site by yourself or in a team. I use Firebug to inspect elements to try to determine what may be causing an image or a div to behave improperly. The problem with this is that Firebug can get confused, and it will display the last css property in the stylesheet that is affecting your element. If you set 3 break points, then you have to turn off each one in order to see if that is what is causing the problem.

So What Do You Think?

How many break points do you set in your responsive designs? Do you even use media queries at all? Leave your thoughts in the comments section below.





One Comment
  1. Dan Mitchell
    March 11, 2013 | Reply

Your opinion is important to me. Be heard!

Dreamweaver Fireworks Flash Illustrator Indesign Lightroom Painter Photoshop Quark Typography
Picture 30
Molding Images to a Surface in Photoshop

Molding Images If you want to create some cool effects with...

Clinix - Free Bootstrap Templates
5 Free Bootstrap Templates Via ThemifyCloud

Bootstrap Templates Normally, I share one free HTML 5 or bootstrap-based...

Screen Shot 2014-12-12 at 11.24.18 PM
Blend Objects in Steps in Illustrator (Cool Trick!)

In this tutorial, I’ll show you how to blend 2 shapes...

Premium
Clinix - Free Bootstrap Templates
5 Free Bootstrap Templates Via ThemifyCloud

Bootstrap Templates Normally, I share one free HTML 5 or bootstrap-based...

joomla-main
An Introduction to Joomla

What is Joomla and it’s Advantages? Joomla is an open-source CMS,...

Failure as a graphic designer
Why You’re Failing As A Graphic Designer

Failing As A Graphic Designer If you’ve ever tried starting your...

LittleSoul
75 Clean WordPress Blog Themes

Pick the Right WordPress Blog Theme for You WordPress has come...

photography-wordpress-themes-feat
10 Best Photography WordPress Themes

10 Best Photography WordPress Themes That Make Your Heart Beat Faster...

free-wp-feat
Top 20 Free and Premium WordPress Themes to Refresh Your Website

Free and Premium WordPress Themes Wait a minute, you say. Have...

refreshing-WordPress-themes
20 Refreshing WordPress Themes for Autumn

20 Refreshing WordPress Themes Seasons come one after another, and, fortunately,...