Why width 960px?

Question

I have a question regarding fixed layout. It has two parts, closely related, so I\'m putting in one question.

Part (a) Why 960px is suggested for th

Answer 1

Here is a different way of thinking about grids. What I offer here is a working solution to create accurate layouts needed for the width independence of responsive design. I make the assumption that all good web design should be responsive and accurate at all scaled sizes.

Having designed/built hundreds of responsive landing pages over the past three years I discovered an issue with the 960 pixel grid early on. Since responsive designs use percentages for widths instead of pixels, the number 100 becomes all important. The second important aspect of this issue is to avoid the use of fractional percentages. The final essential part is to make sure the image widths are in exact proportion to the percentage they occupy. Given these three constraints there is only one grid that makes sense: the 1000 pixel grid.

Before adopting this approach, we used the 960 pixel grid with the associated fractional percentages for our responsive designs. As a result we found different results from one browser to the next. The variance is subtle, a pixel this way or that, and due to round-off errors. There are some who find such nuances to be an acceptable trade off for the ease of dividing columns exactly equal using fractional percentages. If you are interested in a thoughtful alternative I invite you to read on.

For those familiar with U.S. currency, specifically the dollar, you already understand how whole number percentages work. You know the dollar can be sub-divided using pennies, nickels, dimes, quarters and fifty cent pieces. Anytime you have to split a dollar three ways someone will end up with the extra penny. In your layout, using whole numbers, this means three columns could be set up as 33%:34%:33%. Your image sizes would be 330px, 340px & 330px. The differences in width are virtually imperceptible because our perception is far more attuned to the alignment of elements rather than the comparing of widths. The 100 percent grid and the 1000 pixel grid correlate as a simple 1:10 ratio. This method is simple, accurate and easy to remember.

Building your layouts using percentages is a tremendous time saver. Our main container does get a fixed pixel width set using a single CSS class. When you change the fixed max width the layout scales. When a mobile device such as a table or phone requests your page, your layout will scale accordingly. I would, however, limit the upward scale to be no more than 125% to avoid noticeable softening of the images. For example, our new upcoming view port of 1230 pixels falls within this constraint.

In conclusion, it is best to remember we are craftsmen who, at our best, create true art. History provides us with wonderful analog examples created before computers existed. We have all seen the beautiful mosaics created with broken pieces of glass or tile; their beauty comes not from machine-cut, equal size pieces but rather, the carefully crafted pieces assembled by the hands of an artist. Established historic methods provide insight to solving similar problems found in web design.