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