Ethan Marcotte in his excellent book Responsive Web Design gives us a formula for defining our layouts in percentages derived from a pixel perfect design. The formula, is target width divided by context width (target / context = %). However, in chapter 2 when choosing his overall grid with, Ethan says:

I’ll confess that I arrived at 90% somewhat arbitrarily, doing a bit of trial and error in the browser window to see what looked best.

I’m not sure why Ethan chose not to use his formula here, if we do, we find that the 960px he needs works out to be 93.7% of 1024 pixels, whereas 90% would translate to a screen width of around 1066 pixels. If we are going to use his method accurately we need to use it from the outset otherwise our grid is wrong right from the beginning.

Allow Scrollbars

Another thing to consider is the vertical scrollbar. When clicking through from a shorter page to a longer one, the apperance of a scrollbar can cause a ‘jump’ in a sites central alignment which is quite undesirable. The generally accepted solution to this is to force the vertical scrollbar using an attribute of overflow-y: scroll; on the body element. However if we do that, we need to incorporate the reduction in page width of 17px to the formula so that we aren’t miscalculating our new ‘precise’ grid width. So we now have:

target / (context - 17px) = % When forcing a vertical scrollbar.

I’m keen to here if others have approached this problem, or can otherwise explain the reasoning behind the arbitrary 90% in the book.