The Break-Fix Approach for Responsive Website Design

Responsive Web Design is quite hot topic over the last few years. This post will give you a basic overview of the totally made-up break-fix approach.

The concepts of the approach are simple – having a non-responsive website you iteratively shrink the browser width, monitor when the site breaks (a horizontal scroll appears) and “fix” the website’s look and behaviour for the size. Check the image:

responsive-web-design-break-fix-approach
Responsive Webdesign with Break-Fix Approach

 

  •  Requirements (knowledge)

Requirements (Or what will make it easy for you)

  • Google Chrome Dev Tools (or FireBug) and basic knowledge how to use it (hind: use the magnifier tool)
  • Hacky CSS Knowledge (change widths, understand positioning, floating and similar stuff)

Benefits Of the ApPrOach

  • Good solution for existing non-responsive websites, also a quick one
  • Simple and not that much thinkin involved – just see what breaks the site and fix it
  • Agile – you do it step by step

The Steps

1. Shrink the browser width
  Simple
2. Find where the site breaks
  *breaks – a horizontal line appears or anything else that doesn’t look nice
3. Find what makes it break
  Look for:
  • Fixed width
  • Paddings
  • Margins

4. Fix it:

  • Add a breakpoint (using a media query) for the current width of the screen (hint: check the width of the html body element to know what is the current width)
  • Change the width to percents or something relevant
  • Set a max-width: 100% (or something relevant)
  • Anything that makes sense for your case.

Something like this:

@media (max-width: 700px) {
    .breaking-elements {
        width: 100%;
        padding: 0;
    }
}
5. Continue to step1 until you’ve reached the smallest device you want to support.
Hint: After you’re done don’t forget to add
<meta name="viewport" content="width=device-width"/>

Advanced hint:

If it makes sense merge close breakpoints so you don’t write too much of them

I did a presentation about this approach on WordCamp Sofia 2012. You can find the slides from it in another blog post.

Good luck with getting responsive!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.