If you're looking into making your site responsive, you'll want to start converting your pixel based columns into percentages. Fonts should also be converted into using the em unit if they are currently pixel based. Changing these units for columns and fonts will allow more flexibility with scale and readability for different screen resolution and sizes.
Converting your units for layout flexibility is only one of the steps you'll need to go through in order to have a responsive web design. For this article, I'll only be focusing on the process for converting these units. Let's get started!View Demo
The Fixed Layout
You'll see below, as an example, that I have a fixed layout. Everything is based in pixels and laid out in columns. What we want to do is convert the pixels to percentages while maintaining the same structure and dimensions.
Here's the HTML:
Here's a simplified breakdown of all the container widths and margins that will need to be converted:
The header, content, and footer classes do not need an assigned width because they are nested within the #page container, which has the set width of 960px.
I want my design to be centered on the page, so I'm going to guesstimate and convert 960px to 90% which will leave 5% margins on each side. Feel free to play around with the numbers, but in my case this works perfectly.
The conversion formula is
target ÷ context = results x 100 = final results. The target would be, in this case, the width of the leftColumn class. You would then divide that width by the context. The context is the overall width of the parent container you are dividing by. Here's what the numbers look like when plugged into the formula:
- 740 ÷ 960 = 0.77083333 x 100 = 77.083333% width for leftColumn
- 220 ÷ 960 = 0.22916667 x 100 = 22.916667% width for rightColumn
Now we divide the middleColumn width by the context/parent container, which would be the leftColumn width.
- 360 ÷ 960 = 0.48648649 x 100 = 48.648649% width for middleColumn
There's a little bit of math involved, but it's not that complicated. Remember, the child container width is divided by the parent container width and then multiplied by 100 and you're all set.
The conversions for margins and padding is done the same way.
- 10 ÷ 740 = 0.013513514 x 100 = 1.3513514% right margin for middleColumn
You'll noticed that the percentages aren't rounded. I believe it's better to allow the browser to handle the rounding to achieve a more accurate result.
Now that we have everything converted here's what the widths and margins look like in percentages.