CS(S) Monk: Meaningful positioning and understanding the grid

Cedric Savarese, Designer

www.csszengarden.com/070

WHO SAYS YOU NEED to have a master plan? Designer Cedric Savarese tackled CS(S) Monk by experimenting in Adobe Photoshop and seeing what would result. The advantage to this approach is flexibility; as new ideas form, older elements can be cast off or adjusted to fit the revised layout.

Savarese decided that the header would be the focal point and he'd build the rest of the layout around it. Sifting through hundreds of fonts several times over, he chose the title and subtitle typefaces to match the theme that was developing. Complementing the strong sense of Zen with garden imagery, flowers were placed to add a sense of depth to the layout, and a soothing red and gray color scheme was developed to keep the design inviting.

Positioning and Meaning

The dominant monk image of CS(S) Monk occupies the strongest focal point on the page, the top-left corner. The first element of this design is the most important to the piece, and also in the most important spot.

If you consider a flat, fixed-size canvas like a piece of paper, halving it both horizontally and vertically creates four quadrants. The sentences of Western languages run from left to right across a page, and top to bottom down the page. The average viewer has learned to unconsciously regard each quadrant with a different importance because of this.

Have you ever wondered why so many sites feature a logo in the top-left corner? It's because the eye naturally moves toward it. Placing an item in the top-left quadrant guarantees maximum exposure, so it's ideal for branding (FIGURE 1).

Figure 1. The top-left quadrant.

The top-right quadrant is important as well (FIGURE 2). On a Web page, the space "above the fold"the area immediately viewable without having to scrollis the most visible space on any page. Placing an item in the top right corner suggests that it's slightly less important than whatever is in the top left corner, but still significant to the rest of the page.

Figure 2. The top-right quadrant.

The two bottom quadrants don't offer much for most Web pages (FIGURE 3). Some designers throw in redundant navigation there; others place a simple copyright statement and nothing more. In traditional print design, placing an item at the bottom of a page might convey the impression that elements above it are elevated, or floating above. A sense of three-dimensional space might be created with simple positioning on a printed page, but on the Web it's more likely that an item across the bottom will be disregarded or missed entirely.

Figure 3. The bottom-left and bottom-right quadrants.

An interesting practice that's gaining traction is the placement of nonessential extras at the bottom of a Web page. Common links to inner content or site functionality might show up, links that have no place within a regular navigation hierarchy. If users miss them, no sweatthey can find the linked content by other means. But for those who are aware of them, the extra links may provide valuable extra functionality and context.

The Grid

A grid is an important layout tool, but it is often overlooked due to its rigidity. As in mathematics, a layout grid is simply a series of evenly spaced, crossing lines that create a set of logical, proportionately consistent boxes. These lines and boxes help set the stage for the design elements that will be added later. When a grid is closely followed, proportions and spacing may be more consistent, though perhaps at the expense of being overly ordered and creatively dry (FIGURE 4).

Figure 4. Different shape arrangements based on a grid.

Classic table-based design demonstrates the unintentionally confining nature of an overly structured gridan element placed within a table cell has no recourse but to stay within that cell. If an overlapping effect is desired, the adjoining cells need to play a part in the effect. Often the only way to accomplish any form of breaking out of the grid involves slicing images into tiny pieces and joining them back together by building grids within grids, or complex nested tables.

CSS, on the other hand, allows much more refined control over non-grid elements. A layout may be based on a grid structure, with many elements that spill outside the boundaries in a more fluid and spontaneous manner. The CSS positioning model gives much more freedom to elements. It allows you to nudge elements outside of their containers or reposition them anywhere else on the page.

Constructing the Grid

Of course, moving beyond the grid means first establishing it. If a grid is overlaid on CS(S) Monk, the header appears to be divided into three separate components and the main content area appears to be in two columns.

Header

Based on the relative weight of each element in the header, there are three distinct areas: the monk figure, the "Zen Garden" title text, and the text within #preamble, which has been moved out of the regular document flow and up into the header.

But upon examination of the individual images that make up the header of CS(S) Monk, it seems that two of the objects, the figure and the title, are combined within a single image. Though they make up different parts of the header's visual structure, for coding purposes they are treated as one. This is a common quirk of Web design in generalimagery needs to be flattened into a single image before saving, for ease of later coding (FIGURE 5).

Figure 5. Both figure and title combined within the same image.

Content Area

Although CS(S) Monk relies on a single central column of text, headers placed in the margins add a sense of an implied second column. A simple blue overlay highlights how each column proportionately fits within the page (FIGURE 6).

Figure 6. An implied second column within the body aligns to the grid structure.

The column on the left is roughly 2/3rds the width of the column on the right, so a 2:3 ratio is formed. The advantage to creating such a close numerical connection between columns is that proportions are automatic; after the first column's width is established, the width of the second is determined by the space left over. And the 2:3 ratio of these two columns is a classically harmonious match, setting up a typographical rhythm that feels natural and pleasing.

For more on proportions and design ratios, see Geometry of Design: Studies in Proportion and Composition, by Kimberly Elam (Princeton Architectural Press, 2001).

Breaking Out of the Grid

Savarese established a grid-based layout for the bulk of the page in CS(S) Monk, but he was able to move elements around just enough to burst out of the structure and add extra notes of interest to his layout.

The positioning model within CSS offers the flexibility to accomplish this, whether you choose absolute or relative positioning. An analysis of the difference between the two helps determine when you'd choose one or the other.

Absolute Positioning

Understanding absolute positioning means understanding the concept of the document flow. As written, HTML is linearan h1 might come first, followed by a p, followed by a div. The potential for nesting elements exists, but when a document is rendered without style, it's clear that the HTML parser starts from the top of the document and works its way down (FIGURE 7).

Figure 7. Unstyled markup renders in a linear, top-to-bottom fashion.

Absolute positioning provides the ability not only to move an element anywhere within the page, but also to remove it from the document flow. An absolutely positioned block no longer influences other elements within the document, and the linear flow continues as if that block doesn't exist (FIGURE 8). Visually, it will appear wherever it has been positioned, but as far as other elements on the page are concerned, it's not there. Negotiating the resulting overlap that may occur is up to the designer.

Figure 8. Other elements reflow as if the positioned block doesn't exist.

The only instance where an absolutely positioned block will have any influence over another element in the page is if that second element is a child of the first, and it is also positioned. The positioning model dictates that an element is positioned according to its containing block; in most cases the containing block is the root html element. However, when a positioned parent exists between the element in question and the root element, the child is positioned according to that parent instead.

More on containing blocks is available in the CSS spec on the "10 Visual formatting model details" page (www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details).

Relative Positioning

Relative positioning, on the other hand, will not remove an element from the document flow. Based on the element's starting position, a relative position will offset it and then effectively leave a hole behind that other elements must negotiate, as if the element were still positioned there (FIGURES 9, 10, and 11).

Figure 9. An element within the regular document flow.

Figure 10. A relatively positioned element stays within the document flow; its originating position continues to affect other elements, whereas its new position is ignored by the document flow.

Figure 11. In contrast, an absolutely positioned element has no such influence on the document flow. The element's starting position is ignored by the document flow, as is its new position.

Relative positioning is mostly useful for offsetting elements; an element with a starting position inside a traditional grid may be easily moved outside the grid structure, and elements can be finely adjusted when other positioning options aren't possible. For example, Savarese employs relative positioning to move the dragon at the bottom of the design from a starting point below the white content area, to its final spot at the left of the footer area. Using absolute positioning to position elements near the bottom of a design is much more difficult than positioning them near the top, so this instance of relative positioning makes the adjustment easier.

Flexibility Within the Grid

An evolutionary design process like that used by Cedric Savarese can lead to a chaotic result if proper care isn't given to proportions. Studying positioning and ratios will help prevent problems, and employing a grid during the design process is an easy way to achieve a harmonious result.