What kind of grid article is this?
Good question. After I blogged that I wanted to write this entry a few weeks ago, I started wondering if it was worth it since more appropriate people (visual designers) have written about grid-based web design already. Few people, however, seem to have talked about their actual process of getting a comp, cutting up its graphics and using it to produce actual CSS. As you may know, this blog is all about exposing my processes. So I thought there might be some value in writing about it.
As a site developer I often have to produce web graphics from other people's design comps, a process that involves slicing up layered Photoshop files. When I'm lucky, what guides me is a visual designer's grid system. A few years ago I would then take these grids and turn them into tables. The technique and math of doing CSS layout today is bit more complex than doing HTML tables, but it's also simpler in terms of separating presentation from content.
In this article I'm going to discuss the steps I take when measuring and cutting a comp layed over a grid and turning that data into CSS. The point is to demonstrate the steps to site developers who are new to grids. If you are already doing grid-based site development, this is not for you. I'm writing a second part to this article that provides more step-by-step instruction to using grids to design a site theme and producing the XHTML/CSS to match the visual design.
First a disclaimer. This entry is not meant to instruct you with regard to the design of grid systems. If you need an introduction to designing with grids, the literature below should give you what you need.
- Articles
- "Five simple steps to designing grid systems", Mark Boulton — discusses the practice of designing grid systems and ultimately applying them to web layouts.
- "The Funniest Grid You Ever Saw", Khoi Vinh — discusses the use of a grid system in the Onion.com redesign.
- "Thinking Outside the Grid", Molly Holzschlag — offers a differing opinion about the restrictiveness of grids in web layouts.
- Books
Sketch, measure, cut and sew: An example deconstructing a design grid
Here's a quick example to show you what grids do for you and how to use them as a site developer. You'll forgive the headings, but a friend has gotten me into watching Project Runway lately. The analogy to me is obvious. When we design, we strategize, architect and then produce. Not very unlike making a dress, no?
Sketch
On a project I completed in summer 2005, a visual designer gave me a few comprehensive sketches for the fixed-width layouts he wanted to use on their site. The comps showed a unique layout per section. A simple grid system was used to lay out the pages.
Grid system applied to home page
In dress-making, this would be the part where someone sketches designs and drapes fabric or paper over a dress form or mannequin to prototype the design concept. In our case, the grid is the mannequin and the comp is the pattern. I was surprised by how easy my job of planning the multiple layouts was because of this simple grid. The next step would be to identify where those divs would go and how to size them.
Measure
I worked with the designer to come up with usable widths for his grid based on browser resolutions we would expect from prospective users. He ended up providing me a final version of the grid that maxes out at 767px wide. This gave him enough room to be usable for browsers at 800 x 600 pixel resolution. He finally delivered a document to me that looked like the figure below (scaled down to fit this this blog entry). This was to be the grid system used in all of the layouts for a client web site. If you're playing the sewing game along with me, again this is the paper for our dress pattern.
Grid system
You'll notice that this simple grid specifies widths for columns and heights for rows. The designer gave me a set of comprehensive sketches that were drawn to grid. I was a little apprehensive at first, of the preciseness of the comps, thinking that positioning fixed-sized boxes might be tricky in some places. But the layouts are not that complicated really. Only a few key boxes needed to be precisely positioned at vertically locations. The main content areas would of course stretch vertically as needed. The trickiest part was dealing with font size increase in the narrow navigation links (system text) of the header. The logo was not a problem because I was using image replacement for that. In the end, I was excited by the challenge and set out strategizing how I'd architect everything and started measuring.
Cut
Home page: Identification of style elements and measurements for divs
Using the grid-based design comps provided me with units of measurement that I could easily turn into divs for the style sheet. I figure out the areas of content in the same way I would work with a wireframe to block out content and graphics. I come up with a naming scheme for these blocks and turn them into CSS elements. Next, I measure out the blocks of content or graphics in the designer's comp and record measurements for my style sheet.
I don't usually do all the documentation of things like above, but if I was working with a large team, e.g. handing off pieces to another site developer, these documents would be very useful. What would be even more useful is a method to automate some of this process of wireframing and CSS element measurement without using something like Dreamweaver.
Sew
One of the requirements of this site was that the owners have the flexibility of using a unique layout in each section (each link in the global nav). Using a method I gleaned from Doug Bowman, I tell the content management system (CMS) to change the id applied to the body tag depending on what section the page is in. This targets a set of layout rules specific to the section it's in. To provide an example, the "Principals" section uses this <body id="principals"> while the "Contact" section uses this <body id="contact">. Each section uses the same grid but their layouts differ from one another.
The result would be that we produce different layouts for each layout type (section in this case). So we could modify the position of the page title area for example like so:
#principals #title {
position: absolute;
left: 0px;
top: 97px;
width: 189px;
height: 189px;
background: #000;
}
#contact #title {
position: absolute;
top: 96px;
left: 96px;
width: 96px;
height: 96px;
background: #E50530;
}
I'm using the same markup in both XHTML files, but because the Principals section uses the <body id="principals"> tag, it gets that first set of rules for positioning the #title above. The #contact section gets that second set of rules.
Now to show how we sewed up the final product. The grid is ghosted over screenshots of the two layouts I mentioned above. You'll notice how the page titles are positioned differently, following the CSS rules above. I was very satisfied at how precisely I could get the final pages to look like the sketches using CSS.
"Principals" page design layered over grid
"Contacts" page design layout layered over grid
Pretty simple process, but wow, that was a long example. I won't go into the details of that site's CSS, but the next part of this article will talk a little about the redesign of my site, getting from those comps to markup and CSS and how you can use the same process to plan and implement your site theme/skin files.
See also: Grid-based design: Part 2, Designing blog theme templates.