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
vintage-vector-badges-feat
Free Retro & Vintage Vector Badges

Vintage Vector Badges There’s something special about vintage design that everyone...

real estate wordpress themes
30 Premium Real Estate WordPress Themes

30 Real Estate WordPress Themes to be the Leader One super...

Gradient maps in Photoshop
Gradient Maps in Photoshop

Using Gradient Maps in Photoshop Photoshop has many tools available for...

Premium
open-cloud
Open Cloud Free Html5 Template

Open Cloud Free Html5 Template Finding unique website templates to share...

6
Top 10 WordPress Themes for Law Firms

Whenever you think of lawyers you think sharp suits, sharper tongues,...

konefix free html5 template
Konefix Free Html5 Template

Konefix Free Html5 Template A simple and streamlined site is usually...

6
Top 10 WordPress Themes for Law Firms

Whenever you think of lawyers you think sharp suits, sharper tongues,...

premium-wp-themes-feat
Selling the Better Idea: 50 Most Popular Premium WordPress Themes

The 50 Most Popular Premium WordPress Themes People want to be...

47405-wp-b
50 Premium Smashing Business WordPress Themes

Top 50 Smashing Business WordPress Themes for Success Sooner or later,...

premium Wordpress themes feat
3 Premium WordPress Themes for Free From ThemeFuse

3 Premium WordPress Themes for Free! The creative designers over at...