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:
- 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!