Responsive Web Design – Breaking the Box

June 4, 2012 In observatory

Being that responsive design has not been widely adopted until recently – it is in a stage of genetic mutation. Currently, there are 2 main branches of thought in terms of how content should be presented.

Breakpoints or Fluid?

responsive web design breakpoints

Breakpoints

  • Breakpoints are established using the css concept of media queries.
  • The Breakpoint approach typically supports 3 or 4 views (laptop, ipad vertical, mobile).
  • Supported by GetSkeleton, Bootstrap and many other frameworks.

The strength of this approach is that you can present the right size content for almost all of your target audience. The weakness is that you are still restricting your contents ability to adapt.

Fluid

  • Fluid spans 100% of the browser width, but is typically limited to a maximum width.
  • This approach is created by using fluid columns and media queries to change column sizes.
  • Supported by cssgrid.net, Bootstrap and others.

The benefit is that your design will fit any device screen size. Instead of being optimized for 3 sizes, your design can have full-screen impact on a variety of monitor sizes, tablets and cell phones. The weakness is that design elements must be re-thought and simplified (not always bad), and that coding the CSS becomes much more challenging.

In comparison..

The breakpoints-only approach is an effective method and seems like a good introductory solution to responsive design. However, it places a limitation on scalability. You are essentially offering your customers: Small, Medium and Large as options. This is a major step in the right direction, but you are probably wasting 20-30% of screen space across the spectrum of devices used to view internet content. A good solution, and a step in the right direction – but not a final solution.

Fluid layouts solve the problem of serving up a full-screen experience on almost any internet device. The main concern with this approach is that it can impose design limitations. Designers may moan because it changes their desired experience, developers may moan because it is just hard to pull off effectively. Not the ideal solution for every website, but certainly very effective in some cases.

Now what?

It is important to learn and use both methods to solve all the problems of responsive design. Breakpoints solve many of the problems with responsive design. However, users expect to see full-screen media. This is especially true with images and video on mobile devices.

Learning from frameworks can be a great place to start. All the frameworks listed above are solid and tested. Just remember that the end goal is to create a custom site, with new code – and don’t fall into the trap of designing something to fit in a box.. That’s the old problem we were trying to solve with responsive design. Be the box. Don’t just fit in it.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>