E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: BD
Date: Wed, Aug 20 2008 8:50AM
Subject: best approach for accessible / fluid layout
No previous message | Next message →

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

From: Keith Parks
Date: Thu, Aug 21 2008 1:40PM
Subject: Re: best approach for accessible / fluid layout
← Previous message | No next message

A few reactions:

On Aug 20, 2008, at 7:44 AM, Brid Deely wrote:

> 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?

IMHO, Yes, the maxwidth of the center column leads to uncomfortably-
long lines at 1600.

> Should we use ems for the centre column?

I'd have to see it. In theory it would help with the readability
issue, but in practical use, if someone has a "cinema" type display,
and is stretching their browser window out to the 1600+ pixel range,
and then blowing up the font size so much that the center column
spec'd in EMs would fill the possible space alloted, well, there are
other potentially more serious issues occurring at that point that
I'm not sure you need to worry about at what point the center column
stops expanding.

> Even though option 2 is not fluid beyond 1024x768 is it better in
> view of
> the improved readability?

To me, yes, the fixed width is the better choice, particularly if you
are focussing on the "up to 200%" font size adjustment. It reacts
fairly well to font-size changes, yet holds up better in regular font
size ranges but in a wide browser windows.

My 2¢,

Keith

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

A riddle wrapped in a mystery inside an enigma, served with a side of
slaw.