YAML CSS Framework

Accessible CSS-based layouts without the head-banging

"Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users."
- YAML website

Which, being translated, means ...

YAML is rather similar to a content management system for (X)HTML design. Assuming that your design is reasonably orthodox, it provides a CSS-based skeleton which includes all the hacks necessary to get it to work stably across a wide range of browsers.

It is the assorted failures of browsers to manage to represent CSS-based layouts consistently, that leads to enormous head banging and time wasting as a design is realised in (X)HTML.

What the designer can then do is flesh out the skeleton, effectively, by hanging his or her own design off it. The hacks and kludges are already there, so there is no need to worry about them.

Because a layout based on YAML is highly standards based, the same layout will work across a wide range of media, simply by altering (or rather, including) the CSS to support each target device: for example:

  • On screen you can have a layout with horizontal and vertical navigation and a number of vertical columns
  • If you print the page, the navigation and background images all vanish, and the text, in one or more columns, fills the printable area
  • If you view the site on a PDA or mobile phone, the same material, including menus, will be presented in a single vertical column
  • If you are blind and use a text reader, everything will be properly semantic, and there will be hidden links to jump direct to the menu or the content

A key feature of YAML is its support of flexible layouts - that is, layouts in which the content area(s) expand or contract (within defined limits) to fill the available window area. This avoids the need to design around a particular screen size, which often leaves a design floating in the middle of a much larger screen area, or with parts cut off so that visitors have to scroll sideways to see the whole width.

Key Benefits

If you base your website design on YAML you start from a position where many of the legal/technical hoops you have to jump through to get funding for your site, and/or to make it comply with technical legal requirements, are largely solved before you begin, at very low, or no cost.

You also have a layout which complies with standards which support the reuse of existing material, and therefore tend to save large amounts of time and money spent on reformatting the same information each time it is used for different purposes.

How can it work?

Virtually all websites use a layout which consists of all or some of:

  • a header area
  • another horizontal area - often for navigation
  • one, two, or three vertical columns (which may themselves be subdivided)
  • a footer area

Some of these may be omitted or duplicated, but, nearly always, that is the underlying basis of the design.


There is a legal requirement that your site should be accessible - that is it should be usable by people with a wide range of disabilities as well as the rest of us.

While these issues are important legally, they are also important if you want to serve your users.

While not many visitors are blind, for example, it serves those that are if they can navigate and read the site using an auditory browser. If you use YAML your layout will build this in right from the beginning.

More commonly, many sites use very small fixed text sizes which are almost impossible for older users to read, particularly if they have high resolution screens. Sites designed to be highly legible at 800*600 can be difficult to read on a screen with resolution 1600*1200, or higher.

YAML encourages the use of relative text sizes, which are designed to be resized, and provides an interface which enable users to adjust the size of the text so that it is comfortable for them.

Adherence to standards

YAML makes it much simpler for your website design to be standards-compliant

Increasingly, content and presentation are kept separate, and then combined as necessary for a particular function using technologies such as xml, XHTML and CSS.

YAML provides skeletons for the most common web page designs which are in themselves securely standards-compliant, and provided with CSS style sheets, which are structured in a logical way so that multiple types of layout, and arrangements of columns can be implemented just by changing the style sheets.

The designer/realiser elaborates on the basic layouts, so as to arrive at an intended design, which, other things being equal, is itself standards-compliant.