xy.css

As awesome as they are, grid-based designs are by no means a requirement. If you’re racing the clock to complete a project, spending extra time to align everything to a grid would be laughable to most designers. Rather, the grid (or matrix) should be integrated early in the design process as a progressive enhancement.

What is progressive enhancement?

For those new to the idea, “progressive enhancement” is the idea that all sites should provide some sort of basic functionality for all browsers and devices. Stuff’s gotta work, and so having a baseline across browsers is a good thing. But some browsers are better than others, and can do things that other browsers can’t (yet) do.

For example, lots of useful CSS3 selectors aren’t supported by, say, Internet Explorer. But that’s no reason not to take advantage of them in your next design. Instead, you make sure that IE can display the page (and that it looks decent, etc.), and then use the CSS3 stuff to enhance your design for browsers (like Chrome) that can handle it.

Why does this work? Because users of IE will continue to be able to use the site without ever knowing that they’re missing out on the latest and greatest that web design has to offer. So visitors use your site with IE and effectively accomplish the same goals (e.g., sign-up, make purchase, etc.) as someone visiting via Chrome. The thing is, with progressive enhancement, visitors using Chrome, Firefox, Opera, and so forth will enjoy a more luxurious and rewarding experience. Everyone’s a winner, as they say.

A simple example

Here’s a simple example of progressive design in the stylesheet:

h1 { color: #333; color: rgba(0,0,0,0.7); }

In the first property, we style <h1> headings with a dark grey color. All browsers will understand the #333 value, but we want to progressively enhance the color by making it slightly transparent for any browsers that can handle it. Thanks to the CSS “cascade”, browsers that can “do” rgba colors will display the <h1> tag with a bit of transparency (70% to be exact).

In a prefect world, we could omit the fallback property and just roll with the latest and greatest for all browsers. In reality, old browsers exist and technology is always changing, so progressive enhancement provides a way to design on the edge while ensuring that everyone has access to the content.

Grid-based design = Progressive enhancement

All of that to say this: grid-based design should be treated as progressive enhancement. It’s not a requirement for any design, but rather should be approached as strictly an aesthetic enhancement, aimed at capable browsers and visitors. No need to worry about older browsers when it comes to the grid.

For example, the grid-based WP-Mix looks fine even in old versions of IE, but visit in any modern browser and everything displays rhythmically on the liquid CSS matrix.

Another example, xy.css goes even further with cross-browser support for the grid. If you examine this site’s design on older versions of Firefox and IE, you’ll see that great pains were taken to ensure adherence to the CSS matrix. Was it necessary to do so? Not at all, I could have stopped with the latest browser versions and called it good.

In other words, progressive design enables us to accomodate as many or as few browsers as desired. In this particular case (with this site), it made sense to show that it’s possible to stick old browsers to the grid, but going forward it makes sense to adopt a more efficient strategy.

Notes on strategy

The take-home message here is that it’s up to YOU to decide how to progressively enhance your designs, if at all. If you’re getting into grid-based work, understand that you can literally go crazy trying to make every browser stick to the grid, which again is something that totally isn’t necessary to begin with.

A good strategy is to set your baseline, tune the grid for modern browsers, and then decide which older/other browsers need attention. To illustrate, here’s my current design/testing strategy:

• Design in Chrome
• Tune the grid in current versions of Chrome, Firefox, Safari, Opera, Camino, and IE9
• Ignore the grid in all other browsers (but ensure that things look good otherwise)

But that’s just my (evolving) strategy. Yours may be more or less cross-browser intensive depending on your design goals and other factors. The important thing that I want to reiterate here is that grid-based designs are an enhancement for capable browsers. And while it is possible to wrestle older browsers onto the grid, the amount of time and resources required to do so gets to be ridiculous. For modern browsers, however, grid-based designs require much less effort and produce excellent results.