WebAIM - Web Accessibility In Mind

E-mail List Archives

best approach for accessible / fluid layout

for

From: BD
Date: Aug 20, 2008 8:50AM

Hi,

I would really appreciate some suggestions/help on the following problem.

We are working with a web design company on a redesign of our web site and
specified the following for the design:

* The design should be optimised for 1024x768 and that it would be ok
to have horizontal scrolling for resolutions of 800x600 and below.
* The layout should be fluid from 1024x768 to 1600 x 1200.
* The centre column shouldn't be more than 80 characters wide as users
find it hard to read longer lines of text.
* To prevent the css from sizing the left, centre and right columns
beyond 1600 x 1200, each column could be set in CSS as percentages, followed
by max width in pixels. A minimum width property could be also set on each
column.

Additionally, we wanted users to be able to view a full line of text at the
default window size without horizontal scrolling when the text is resized to
200%. This is a WCAG 2.0 draft checkpoint; even though it is still in draft
we had wanted to "future-proof" the design to some extent.

Here are two different iterations that the design company worked on:

1)
http://www.clarecoco.ie/test/roads-and-transport.htm
This layout is fluid up to 1600x1200.
An additional section has been added on to the centre banner image (this is
the blue solid colour on the right side of the banner image).
In this option, although the layout is fluid (at least the centre column),
the lines of text become very long and therefore some users may have
difficulty reading them.


2) http://design.arekibo.com/clare_test/roads-and-transport.htm
This layout is fluid up to 1024 x 768 and fixed beyond 1024 x 768.
The centre text column stays at roughly 80 characters wide. Beyond 1024 x
768 and a background grey is introduced on the left and right.

I would really appreciate some suggestions as to how best to make this
design accessible. For example, is the centre column too wide in option 1 at
1600x1200? Should we use ems for the centre column?
Even though option 2 is not fluid beyond 1024x768 is it better in view of
the improved readability?
It is worth noting as well that although this mini home page contains a
large banner image, the inside content pages will only have small images if
any.

Many thanks,
B