Would you like ice with your page layout sir?

Kirk Potter — Mon, 21 Apr 2008 13:59:00 GMT

Designing an accessible website isn't about compromise but is more about embedding the accessibility requirements into your design process. One of the most important decisions you take is what layout technique you will use.

These days there are a lot to choose from including fixed-width (sometimes call ice), liquid, elastic, etc. - each with their own set of challenges and compromises. In the early days of the web designers didn't need to worry too much as nearly everyone had a screen resolution of 640x480 and widescreen was reserved for your visit to the local cinema.

Now we have PDAs, widescreen and more resolution combinations than you would care to know about. To help you understand the challenges and compromises we'll take a look at the main layout techniques below.

Mixing it up

Fixed width layouts are very common as typically they provide a great deal of predictability of how a design will be represented on a variety of screen resolutions but they don't always work that well on high resolution screens. The net result of this is sometimes a web page that is lost in the middle of the page. Once someone has decided to increase the text size line lengths can also become a problem and the resulting text wrapping can make reading uncomfortable.

Liquid layouts use percentage sizes rather than fixed ones and they are designed to scale to the browser window size. These layouts make the most efficient use of space but multi-column layouts become problematic at lower resolutions and on higher resolutions paragraphs of text can end up as single lines which can look a bit strange.

Elastic designs take the best bits from fixed width and liquid layouts by defining maximum and minimum widths to overcome the problems described above. This is a good compromise and if done properly results in a design that looks great on both smaller resolutions and high ones.

A good example of good elastic design is the website of the General Teaching Council for Scotland (http://www.gtcs.org.uk/) which has a maximum width of approximately 1150 pixels and a minimum width of 800 pixels.

WCAG

The final question to be answered is how all this affects the accessibility of your site. Under WCAG 1.0 there was always a raging debate as to whether a non-liquid layout (that includes both fixed width and elastic) were compliant or not. Rather than attempt to answer that it is worth applying this question against WCAG 2.0 which is currently in working draft status with the W3C.

Strange as it may sound WCAG 2.0 makes no reference to the size and behaviour of structural elements of page but does talk about text sizing under checkpoints 1.4.4 (Resize text) and 1.4.8 (Visual Presentation). The resize text checkpoint falls under Level AA and visual presentation under Level AAA.

Most fixed width layouts would fail checkpoint 1.4.4 due to the requirement that text should be capable of being resized by up to 200% without impairing the functionality of the page especially when multiple columns are used.

Liquid layout easily passes this checkpoint especially when columns are relatively sized based on the text size. Elastic layouts need to be carefully defined in terms of maximum and minimum widths to ensure that they comply with this checkpoint.

The visual presentation checkpoint has some overlap with the resize text checkpoint in terms of the 200% text resize requirement but also introduces some other requirements in terms of layout. There is a somewhat arbitrary requirement that "width is no more than 80 characters" which could cause problems with both liquid and elastic layouts - one way of achieving this is ensuring that blocks of text wrap at a certain width.

Search results matching tags 'Elastic Layout' and 'Fixed Layout'

Would you like ice with your page layout sir?

Mixing it up

WCAG