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
fable-feat
Photoshop Website Template

Photoshop Website Template Today, I have a nice template for you!...

Pathfinder Panel
The PathFinder Panel in Illustrator

PathFinder Panel Before I used the Pathfinder panel, I used to...

christmas-popup-preview
Free Collection of Christmas Insignias

Christmas Insignias It definitely is the season to be jolly! Christmas...

Premium
testimonials
Let Your Satisfied Customers Speak for You: Testimonials

The Importance of Testimonials A lot of websites have customer testimonials...

premium-vintage-ornaments-feat
Premium Vintage Ornaments

With the launch of he new premium graphics area, I wanted...

web design and social media tips for medical professionals
Web Design and Social Media Tips for Medical Professionals

Web Design and Social Media Tips Facebook, Google+ and Twitter all...

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

textured-wp-feat
20 Rebellious Textured WordPress Themes

Textured WordPress Themes 20 Extraordinary textured WordPress themes are quintessence of...

Monarch Social Sharing plugin
Breaking News: Elegant Themes Releases Monarch

Monach Social Sharing Those of you who’ve read my blog for...