aPaddedCell Article: Using Grids in Web Design

Good concept and something new web designers should read.

Might I suggest referencing a couple CSS frameworks that follow this structure. The Golden Grid is one of them that I have come across in the past.

My one beef with most frameworks out there is their dependence on pixels for sizes. Even when designing a fixed width layout, I use percents for left and right margins and padding on nearly all structural elements.

Why do I do this? Well, the technology is constantly changing. Yesterday's cool 800 pixel wide screen soon became today's 1024 pixel "standard." Most of today's crop of computers have higher resolution, while the use of hand-held devices is rapidly getting more common-- more change is inevitable.

By using percents, I can change the width of my entire design and everything else pretty much adjusts. If I were to use pixels, imagine the pain of changing page width.

Just a thought.

while the use of hand-held devices is rapidly getting more common-- more change is inevitable.

I don't think that means that the layout has to be fluid enough to handle a 1680px widescreen all the way down to a 200px phone. In a case like this, I would design a special mobile theme and use that one as necessary. Otherwise, I use a fixed layout.

A couple months ago, I was setting up computers at a flooring showroom. They had me setup a computer that was connected to a decent sized LCD TV for showing interior designs. Well, of course I couldn't keep myself from seeing my websites on that awesome TV after I setup the computer...to test it of course . My sites with fluid layouts looked bad when you stretch it out beyond what you thought was possible on an original computer. Since then, I have used fixed layouts or *maybe* a layout with max&min-widths. With ginormous (sp?) widescreens becoming the norm, designing a fluid layout that can stretch to that width and still fit on the standard 1024px screen is difficult...more than it's worth IMO.

Heard of max-width, pr0gr4mm3r ?

nice article, I just emailed the link to some of my designer colleagues

so, why don't you guys have "email this article" "add this" and other viral tools?

a grid can be a useful guide, but a gifted designer knows when to "break the rules" - otherwise too strict adherence to a grid can result in a boxy look

I read the article, and its quite helpful
to a web design newbie like me. I've been learning
how to work with grids these past few days
and the article helped a lot. thanks.

The beauty of CSS is that you have so many design choices. In addition to "fixed" and "fluid" designs, and the "elastic" (Fluid with min and max widths) there are several others.

You can offer multiple styles using alternative stylesheets or either client-side or server-side scripts as pr0gr4mm3r hints at. With media queries getting quite good support, you can even accomodate iPhones and pr0gr4mm3r's giant TV display in a single stylesheet.

Yet another design I have used is Mike Purvis's "Jello Mold"[1]. SImply by changing a percentage between 0 and 100 the layout varies from fixed through fluid and anything between.

To get back to the subject -- Megan's article -- the beauty of her proposal is its adaptability. Once you have calculated the sizes the way she suggests, simply by converting the interior widths from pixels to percents, you have the basis of an almost infinite number of use cases, far beyond the fixed widths that she uses in her example.

The article is great for beginners-- but not only.

[1] Features of the Jello Mold

There are a lot of great takes on the grid idea. While I try not to get too locked into any one way of thinking or approaching projects, I do use a Photoshop Template that has a series of grid overlays to help line up page elements.

I combined three or four .psd files that I found in my research about grids and recently made it all available on my site, complete with detailed instructions on how I use it.

You can find it here.

It uses a 10x10px and 60x60px grids to fit into a 960px wide layout. It also has 50x50 and 100x100 for a 1000px layout. It uses transparent overlays to divide the layout into 2,3,4,5,6,8 and 16 column layouts. On top of all that is a browser overlay to see what the design looks like on small monitors.

I tried to think of all of the factors that I need to keep in mind when starting a new design but I would love to hear feedback or ideas for improving it.

[Edited: Please keep personal links to the signature]

So far it seems to work well.

CMIIW, I think grid is a CSS approach to table layout:) The beauty of grid system which makes it different from table is you may design a totally rigid box models or even out of the box ones just as easily.