Ryan Cramer

March 1, 2009

A Dynamic Layout Design System

The architecture of dynamic content

What follows is just one approach to design that has worked well for the author. It should be considered a primer of the process so long as it helps with your design needs. It should not be considered a set of rules, as each designer may have a different approach.

The Designer

When designing an overall look and feel, be creative and don’t think too much about technicalities at first. You have to make your creative side happy with proportion, color, weight, line, type and texture before letting the engineer drive the design. Otherwise your architecture may be a tall inward looking box that communicates more about the system than it does about the design concept. The fact that you are designing for CMS-output need not affect the creativity in your design, though it should affect your approach.

The Engineer

It’s time for you to think like an engineer when you’ve settled on a creative concept. Before you’ve fleshed out all the proportions and details, you’ll want to go through your design and identify each major part as falling into one of the following blocks, each of which bear unique design considerations.

The sections below detail how to identify and design for each of these types of content blocks. Before we delve into them, it should be noted that layout width is typically not a major factor in designing for CMS output, whereas height is. All of the considerations mentioned below apply regardless of whether you are designing for a fixed, variable or fluid width layout.

Fixed position / fixed height blocks (FF)

In architectural terms, FF blocks typically comprise the foundation and structure of the design. They stay in the same spot (fixed position), and consume the same amount of space (fixed height), regardless of content.

Identification

In a CMS-powered design, FF blocks might include the logo and masthead, search box, primary navigation, breadcrumb navigation, branding imagery, and so on.

Details

Because FF blocks are not affected by the variables of dynamic content, they typically establish the site’s branding framework, grid and system of proportions. They also serve as the foundation for fixed position / variable height (FV) blocks. FF blocks are typically designed in the same way that they would be for non-dynamic content.

Fixed position / variable height blocks (FV)

FV blocks stay in the same spot relative to FF blocks, but can grow taller, depending on the content. In architectural terms, they are the load bearing walls of the structure.

Identification

Common examples of FV blocks include body copy, secondary navigation, and sidebar.

Details

Because the height of such blocks is variable, the design of FV blocks bears special consideration. Care should be taken to observe the effects that FV blocks have upon the design’s proportions and balance. Experiment with different sizes and design the blocks in a manner that maintains the best stylistic integrity regardless of height. What looks good in a 100-pixel height block may overwhelm the design at a height of 500-pixels. Because FV blocks have a fixed starting position, they are exceptionally important to the overall balance in the design. Given that, it may often be effective for FV blocks to be lighter in visual weight than their FF counterparts.

If the FV block is to maintain an opaque identity for it’s entire span, then it must do so with a solid background color, repeating background texture, or border. Because the blocks are fixed to a vertical position, they also have the opportunity to continue design elements from FF blocks above them. In order to remain height agnostic, such design elements must come to an acceptable vertical end, or transition to a repeating pattern.

While FV blocks may be of a variable maximum-height, it is perfectly acceptable to define a minimum height for them. This can provide an opportunity to retain the site’s design grid in FV blocks when shown at their minimum height.

Variable position / fixed height blocks (VF)

VF blocks are those that have an undetermined vertical position on the screen, but are fixed in size. The positioning of these are usually offset by FV blocks, and can change from page-to-page.

Identification

A site’s footer may be considered a VF block, since it’s vertical position is often affected by the variable length content above it. Other VF blocks might include site tools, branding imagery, social bookmarking links, and so on.

Details

VF blocks are unable to make assumptions about where they live in the design relative to any fixed position blocks (FF and FV). However, their nature allows them to be designed as objects that are fixed in size and thus visual weight. They can be reflective of the vertical proportion system defined by FF blocks, which gives them an important role. Because they won’t change in size, they can be visually weighted in a manner that relates back to the FF blocks. Effective use of VF blocks in this manner brings balance, order, and branding reinforcement to the unknowns of dynamic content.

Caution

While the nature of VF blocks brings opportunity, there is one point of peril that should also be mentioned. If the design has a strong visual grid, then VF blocks are often seen as the elements that break that grid, usually in an undesirable way. This is because dynamic content does not care about the vertical boundaries of your grid. The farther that VF blocks get from FF blocks, the less of a concern this is, as there will be little to visually connect them. But if this issue creates a visual disconnect in the design, you may want to design VF blocks in a transparent manner that relates more to the FV blocks than to the FF blocks.

Variable position / variable height blocks (VV)

VV blocks are those that have both an undetermined position and height within the design. The positioning of VV blocks is affected by the FV, and optionally VF, blocks above them.

Identification

VV blocks are usually supplementary information that lives below sub-navigation, sidebars or body copy. Common examples include related article lists, category lists, user comments, and so on. VV blocks are also the unused vertical spaces in a design that comprise any styled whitespace between the top and bottom of the page, regardless of whether it contains content.

Details

All of the same design considerations that apply to FV blocks also apply to VV blocks. But VV blocks have no structural connection to the FF (foundation) blocks, so your treatment of VV blocks is likely to benefit from more design independence than FV blocks.

Like VF blocks, VV blocks are unlikely to connect with the site’s grid system. As a result, you’ll want to avoid calling attention to them if your grid is in the foreground. The variable height of these blocks is a major consideration, so experimentation with various sizes and their effect on the larger design is key to understanding their scope. Defining a minimum height for these blocks is perfectly acceptable, but adherence to the site’s design grid is likely to be outside of your control.

Scrolling blocks (S)

This type of block is unique in that it may be any one of the above types, though is most often seen as an FF block. The block does not need to contain all of the content within its boundaries because it can be scrolled. This provides a simple–though not always ideal–solution for dynamic content. It is simple in that a block of predefined size may contain any amount of content. If the content exceeds the space available, a scrollbar is provided which makes the block a window to a larger area.

Weaknesses

The weakness behind this type of block is that it disregards the natural flow of a web page. In the hands of a skilled designer, this may be used towards the layout’s advantage. However, more often than not, this type of block is used as a crutch enabling a print designer to avoid thinking in dynamic content terms. Additional scrollbars add unsightly baggage and invite browser chrome into your design, which is rarely desirable. Despite that, there is an obvious and inherent value to these blocks … just make sure that you know how to design for dynamic content before you put these in your toolbox.

Identification

Details

From a development perspective, scrolling (S) blocks are most often created by using the CSS overflow property on a block-level element. Giving it a value of “auto” will ensure the scrollbars only appear when necessary. Scrollable blocks are also commonly seen as iframe elements. <textarea> form fields are also a form of scrollable block, though not necessarily applicable in this context.

Layout design conclusions

  • FF blocks establish the foundation, grid and proportions of your design, and aren’t usually ideal for dynamic content.

  • Dynamic content lives best within variable-height blocks (whether FV or VV). Design these blocks in a manner that accommodates and looks good with the content they contain, regardless of length. Establish minimum heights where appropriate. Test your design with varying lengths of content to see how it affects the design’s balance.

  • VF blocks are a good place to reiterate and reinforce design themes and proportions established by your FF blocks. Just don’t count on them snapping to the same grid boundaries as their position is vertically undetermined.

  • Use scrolling (S) blocks only when functionally beneficial, and not as duct-tape for a poorly engineered layout.

—Ryan Cramer

Continue to next part …