Making the CSS Switch with Grids

CSS layouts have been all the rage for the last 5 years or, since Jeffery Zeldman’s groundbreaking book Designing With Web Standards and the rise of CSS Zen Garden . I’m obviously no designer, but the ideas behind why you’d want a CSS layout instead of a table based layout are becoming more important than ever with mobile devices now in the forefront (hey, I had to tie this in with the IPhone somehow). So why use CSS? It’s not because it’s easier I can tell you that.

You can create a table based layout in far less time, with less skills needed to make it happen- – and it’ll work on all browsers. But what happens when you want it to behave different in different resolutions? Or if you want to get rid of a particular cell in the layout? If you’re lucky that cell can just be removed, but when you’re designing with tables often that cell will be supporting other cells, meaning more and more changes are necessary.

With CSS though, content is localized to divs which can be made interchangeable. There are a number of other reasons to use CSS as well, with the most common being more semantic HTML, cleaner look when viewed without styles, lower file size and possibly the most important – separation of content and style.

Taking the plunge into CSS is a bit daunting, even if CSS markup is relatively straightforward. Putting them together to get a layout that works in all modern browsers is a feat is in it’s own. So where do you start? I’m no expert in this by far, but in a recent design I’ve been working on I decided to try out a grid based layout . Grid based layouts, which can be read about in much more detail in that article, are based on vertical and horizontal grids which control layout elements. The advantage of grids is that the eye will read up and down, left to right along the grids and catch the most content. The grid will also make the most sense the user who won’t be disoriented with a layout their mind can’t make sense of. Grids just make more sense.

So where do we start? One thing to focus on is the width of the main content. If you check the global resolution statistics , you’ll see somewhere around 11% of people are still using 800×600 and below, with the majority above that. Whether you want to account for these 11% depends on your customer base. Big guys like Yahoo use a grid layout and also redirect to a skinnier Yahoo based on the users resolution. Finding the sweet width for a site doesn’t mean it’s limited to that width, just that it’s optimized for it.

Choosing a width of 960x is a sweet spot for a number of reasons. One of the most important things about 960 is that many many inner layouts can be made with. 960 is divisible by 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480, and 960. Not bad hunh? These smaller resolutions such as 120, 160, 192, 240 and 320 make great pod sizes. For putting this into practice there are a few tools to help.

Cameron Moll created a nice looking 960 width grid that can be set as the background for a page for easy measuring. You could do this in your CSS of course, but it’s inconvenient to change your CSS to need to switch out your CSS. That’s where Greasemonkey comes in.

Greasemonkey can add javascript that runs for urls that match specific criteria. I use a handy little Greasemonkey script to add this to the background for URLs that meet the criteria http://localhost * and file://**.

Pretty simple and now we can measure things much more easily. There are lots of articles about normalizing CSS, but most of them concentrate on one thing: reseting the default size to base 10. This is a little trickier than you might think. All elements have a default size that has to be overwritten if we want to be consistant.

The easy way to do this is using either a reset script or more simply the ** {} selector. This selector, as you might expect, will add this css to all elements on the page. There’s a few more elements in my default CSS as well:

{ margin: 0; padding: 0;font-size:1em;font-weight:normal;} body {font-size:62.5;font-family: "Lucida Grande”, verdana, arial, helvetica, sans-serif;} \#wrapper {width:96em; margin:0 auto;}

That font-size:62.5%; bit coupled with the font-size:1em; is the key. 62.5 resets fonts that 1em to be 10px, while font-size:1em makes all elements 10px.

Now, you can specify the wrapper width as 96em and it’ll be 960px wide! Why wouldn’t you just specify 960px as the width you might ask?

Well when it’s enlarged it won’t expand, it’ll be stuck at 960px. Using em’s for everything scale up and down. Take another look at Yahoo and try enlarging text (control+scroll wheel up). The page scales extremely well, and is an example of what can be done using relative sizes.

Yahoo uses percent based sizes to control this, but the same could be done using ems. To me, specifying a font size to 1.2em is clearer than 120% when trying to set a font to 12px/pt, but it’s all preference after that.

There’s a lot of information out there for designing with css, getting a grid layout down, normalizing css and making scalable layouts, and this is just the tip of the iceberg. It’s a fun topic to learn about, and not entirely difficult. The hard part comes when you want to make it look good!