Thoughts on Spacing

We’re finished judging, and we’re now in the process of composing the results. Tony and I are leaving on vacation tonight (not together, it’s just a coincidence), so we won’t have the final results ready until the middle of next week.

In the meantime, be thinking about spacing issues. An issue that kept coming up in this contest, to our surprise, was less of a markup issue and more of a design issue.

The EarlyBird comp gives a clean, birds-eye view of search results, and makes use of white space and regular spacing to achieve a high-level of scan-ability. Elements that belong together are grouped visually, separated by white space and the occasional border. Font-sizes and font-weights help to convey importance in relation to other elements on the page. Color draws the eye to the more important spots. Line-height makes paragraphs seem less intimidating to read. So do shorter lines. All of this adds up to create a high level of scan-ability.

Figure AConsider this example of spacing which makes it hard to distinguish what text belongs to what result. The orange dotted lines show the perceived visual grouping, while the green indicates the actual grouping.

Figure BNow look at this example, where spacing clearly groups the search results.

If you’re having trouble making your spacing match the design’s spacing, download MeasureIt for Firefox, and use it to count the pixels between elements. If you know it looks wrong and can’t figure out why the spacing won’t do what you tell it to do, consider resetting browser defaults.

The judges of CSS Off want web programmers to pay more attention to spacing. Group things logically. Use white space to your advantage.

Thoughts? Other resources?