16 replies [Last post]
zonja
Offline
Enthusiast
Last seen: 10 years 39 weeks ago
Timezone: GMT+1
Joined: 2004-11-19
Posts: 80
Points: 8

Hi Everyone,

I work for a company that specialises in accessible design. All of our websites have to adhere to the WAI Accessibility Standards. Most of our websites will have to be level AA compliant.

I was wondering about the importance of flexible layout. So far we have built all of our sites with a flexible layout. One of the Priority 1 (Level A) guidelines states that:

3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values.

Yet I see so many fixed layouts used today that are centered and narrow enough to fit at 800 x 600 resoulution. Alot of them have the WAI AA compliancy logo to claim they are accessible. Are They?

The problem that i'm having with relative layouts are the limitations with horizontal navigation. I would find it easier if I could start building fixed centered layouts ( all of the CSS Zen Garden eg.s do this).
I am trying to convince my other employees to take this step but I need to know that this does not break any of the guidelines.

Is using fixed widths in the stylesheet breaking the WAI guidelines?
and does anyone have any articles or links that I may read up on to show my colleagues?

Kind Regards
Zonja

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 13 years 38 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Flexible v's Fixed layout?

Interesting topic that I think you may get a lot of different opinions on... I think a lot of it depends on your site and how the information is presented.

A lot of sites can get away with liquid layouts, but sites like mine (a very information heavy newsite) cannot. We need some control over how elements wrap around each other and there is not a lot of free space available.

One thing I noticed is you are talking about fixed layouts, but then relative units.

A site can still be accessable using a fixed layout containers, but consistently using relative units for fonts, etc.

here is a link for some more reading:
http://www.456bereastreet.com/archive/200312/the_great_fixed_vs_fluid_debate/

I might have a bit of a look into this and will let you know if I find any more good info.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 27 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Flexible v's Fixed layout?

w3c says: "3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2] For example, in CSS, use 'em' or percentage lengths rather than 'pt' or 'cm', which are absolute units. If absolute units are used, validate that the rendered content is usable."

Appendix A. -- Validation says: "Validate accessibility with automatic tools and human review. Automated methods are generally rapid and convenient but cannot identify all accessibility issues. Human review can help ensure clarity of language and ease of navigation."

...and goes on to say: "Invite people with disabilities to review documents. Expert and novice users with disabilities will provide valuable feedback about accessibility or usability problems and their severity."

So to my mind this suggests that the final vote should be down to human testing.

This is my two-pennies worth: If you view a fluid layout on a large, hi-res monitor, unless the designer was particularly well skilled, you'll end up with lines of text that stretch from one side of the screen to the other (or close to it). As any typographer will tell you, long measures are difficult for anybody to read, let alone those with sight or cognitive disabilities. For this reason (and others too) I now always work to page widths of 760px regardless of whether or not the WAI Accessibility Standards deem this to be acceptable.

[edit] x-posted with above.

Life's a b*tch and then you die!

Anonymous
Anonymous's picture
Guru

Flexible v's Fixed layout?

roytheboy wrote:
If you view a fluid layout on a large, hi-res monitor, unless the designer was particularly well skilled, you'll end up with lines of text that stretch from one side of the screen to the other (or close to it). As any typographer will tell you, long measures are difficult for anybody to read, let alone those with sight or cognitive disabilities. For this reason (and others too) I now always work to page widths of 760px regardless of whether or not the WAI Accessibility Standards deem this to be acceptable.
I'm in complete agreement. The longer the scan from the end of one line back to the beginning of the next the more likely the reader will lose his/her place. For longer lines leading can be increased so the eye has a wider track to follow back to the start of the next line but it is probably better to not allow your measure to extend beyond a certain point as roytheboy states. Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Flexible v's Fixed layout?

To my mind this argument resolves around does the designer or the user determine the length of the text line. If its the user, a liquid layout allows them to set a browser width which they are most comfortable with (and a font-size). If its the designer, or more correctly, the user probably can't be bothered, then a fixed width layout makes sense.

This argument seems to resolve around how lazy windows users (without any disabilities) are. Do they use their browsers maximised and can't/don't alter its width?

I suspect, if properly put together, both can be accessible. The design decision will then be about how your majority audience behaves.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 38 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Flexible v's Fixed layout?

I have an interesting contrast for you:
http://www.gov.ns.ca/health/policywatch/ versus
http://www.gov.ns.ca/health/ . The former is a series of pages I design, the latter is the "official" gridded government template. Resize the pages and decide for yourself which makes the best use of screen real estate.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 39 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Flexible v's Fixed layout?

A few years back - when I did a OU web design course I seem to remember learning that the "optimum" print line had around 10-14 words in it. Can't remember the origin of this "rule" but I'm sure I remember learning it along with Fitts law and all the rest of that gumpf.

This would have an obvious effect on the width of the site design depending of course on how many columns are used at normal size text.

Of course if your user scales up their text size I imagine the inverse of this rule also holds true. *sigh*

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 27 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Flexible v's Fixed layout?

David - you are probably the most skilled person I know when it comes to fluid layouts, yet I still feel that your designs look aesthetically compromised when stretched to fill my 1280px display, let alone my 1600px display. That said, you do well to control the measures, but you are the exception, not the rule.

Because users can change the text size and font etc., there is no perfect answer but as things stand, I remain firmly of the opinion that a fixed layout is better for aesthetic and usability reasons than a fluid one, especially in the hands of the typical website designer.

Life's a b*tch and then you die!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Flexible v's Fixed layout?

David, you would get my vote, simply for using Verdana rather than 10pt arial. Smile

Have you (or anyone) ever considered using javascript to change from a three column layout to a two column layout at narrow screen widths?

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 38 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Flexible v's Fixed layout?

roytheboy wrote:
David - you are probably the most skilled person I know when it comes to fluid layouts, yet I still feel that your designs look aesthetically compromised when stretched to fill my 1280px display, let alone my 1600px display. That said, you do well to control the measures, but you are the exception, not the rule.

LOL - Roy you can make me feel good and micturate*-me off at the same time!

OK, then, check the site again with Fox/IE and see if it works better for you as you resize the page. I'd love to use a max-width in ems for IE as well but it has proved impossible so far to implement. Thanks for giving me the kick in the butt - I have intended to make these changes for a while but just needed the nudge. While I was at it I implemented Tony's float clearing technique as well.

DE

*beep that, Mr. naughty-word filter!

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

champ
Offline
Regular
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2005-06-09
Posts: 12
Points: 0

Flexible v's Fixed layout?

roytheboy wrote:
...I still feel that your designs look aesthetically compromised when stretched to fill my 1280px display, let alone my 1600px display.

How about "elastic":
http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/

DCElliott wrote:
I'd love to use a max-width in ems for IE as well but it has proved impossible so far to implement.

Have you tried this for IE & max-width?
http://www.svendtofte.com/code/max_width_in_ie/

I was going to implement the method above for my site, until I read the following:
http://www.gadgetopia.com/2004/08/16/ExpressionsInCSS.html
http://www.ozoneasylum.com/25115
http://www.webmasterworld.com/forum83/4711.htm

The three links above discuss how using the svendtofte.com "expression" method of getting IE to implement a form of max-width results in an ActiveX warning in IE/winXP SP2 setups. I confirmed this myself, but I noticed the error only occured within a desktop/localhost environment. Uploading it to an actual server didn't display any ActiveX warnings.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 27 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Flexible v's Fixed layout?

Being a designer as well as a coder, I still prefer a fixed width layout for aesthetic reasons. I'm sure there will be examples of site/page designs that look okay at varying widths but these are few and far between. AFAIK, the 'elastic' design concept is what DE is already doing, which is why I complimented his work (because it is better than a straightforward fluid layout), but it still does not solve the aesthetics problem.

As I said before, there is no perfect solution. Personally I offer a font scaling tool on my CMS that scales up the (fixed) page width to accommodate the font size as it grows, but this is still a compromise and it too has it's limitations. As long as different people use different browsers, monitors, connection speeds and fonts etc., so everything about web design will always be a compromise. How one deals with the many issues that demand a compromise is determined by one's technical skill-set, experience and eye-for-design, but every solution will always be a compromise - even Flash, which compromises speed, accessibility and search engine indexing in favour of pixel-perfect layouts.

It's good to discuss all the issues, but there will never be a perfect answer until we are all using the same browser, the same monitor and the same internet connection. Will pigs ever fly?

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 38 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Flexible v's Fixed layout?

Well, in reply to champ, I am using an expression: construct to set a max width for IE but it has to be in px rather than ems which is used for the max-width in compliant browsers. If you use ems in IE, eventually the width exceeds the viewport and you pop a scroller even at wide viewport widths. I didn't want that. The em scaling is pretty smooth and keeps the line-lengths comfortably readable at almost any font-size x width combination. Clearly, there are always compromises that have to be made. The elastic layout represents the compromises I am most comfortable with. Roy was quite right to point out that problems started to appear with my completely liquid design at very wide screen widths. I have modified the site accordingly. The designed behavior in CSS-compliant browsers is smoothly scaled but for IE I had to force a max-width of 1000px.

The more packed you make a page's information, and the more text and graphics you have trying to co-exist, the more likely you are going to chose the compromise of a rigidly gridded system. (I sometimes wonder if Opera has got it right in the way it's rendering engine smoothly scales everything, text and graphics included).

Like so many things in design, it is not an either-or sort of thing. You have to sort out which of the virtues you want the most, or which of the vices are most important to minimize.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Flexible v's Fixed layout?

David,

Regardless of Roy, I think your designs always deserve a paean.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Flexible v's Fixed layout?

kk5st wrote:
David,

Regardless of Roy, I think your designs always deserve a paean.

cheers,

gary

For those like me, who need to look it up...

Paean: A song of thanksgiving or triumph; exultation.

Definitely not to be confused with peon.

Laughing out loud

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 38 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Flexible v's Fixed layout?

Well, I wasn't asking for folks to throw flowers, but I did want to show how it was possible to break out of the rigidly gridded mold to make a much more adaptable page. There are a number of things that have to be taken into account when doing so, especially when you have to use the corporate-mandated "look and feel" (I'm still in violation of the left menu color-scheme and layout of the main site but I have so far successfully argued that the current PolicyWatch layout should be left alone because it is a specialized resource.)

Anyhow, here are a few of the components:

  • Everything is wrapped in an #outer div that handles both sizing and centering. The 80em max-width for CSS-2 compliant browsers ensures that the content area never gets wider than a comfortable 45-50ems. Of course IE won't play nice so we have a compromise max-width through an expression: construct wrapped in a IE conditional comment in the <head> section.
  • The header graphic was split in two and the right hand side was absolutely positioned to slide in front of the left hand graphic. Behind both was a horizontally repeating filler graphic. (graphical headers are always a challenge for liquid/elastic designs)
  • The breadcrumbs are done as a span with <a> being styled with whitespace:no-wrap so that the individual items wrap as complete units. The search box is a table in the corporate design but is in a floated div in mine.
  • Below the breadcrumbs and search box is either a large horizontal color band or an alphabetical index depending on the page and below that is an #inner div that contains the two floated sidebars plus the content. The #inner div also has Tony's floatclearing class applied (Once again, thank you, Tony for getting rid of the extra kludge clearing div that was there previously) The two floats are 17% wide and the content has 19% margins so that these sections scale proportionately.
  • On the left there is a scroller div of "what's new" stuff that allows a fair bit of material to be included without extending the left sidebar disproportionately. Some folks may not like within page scrollers but, used sparingly, they do allow the embedding of content. What we do with the what's new section is add new stuff to the top and older stuff is pushed down but still available. When stuff gets too old, we take it off the bottom.
  • Finally there is a footer that is below the autocleared #inner div.
  • Someone had commented on the font choice. People should realize that Tahoma, Verdana, and Georgia were specifically designed for on-screen readability whereas Times, Times Roman, and Arial were not. In my font-family list I have verdana, lucida, geneva, helvetica, sans-serif which covers the MS core webfonts plus helvetica which should be on every Mac and *nix based system. Readers may find http://www.wilsonweb.com/wmt6/html-email-fonts.htm interesting.
  • Once last comment. If you look at the CSS, you will see it is divided into positional and presentational sections. This is my preferred way of doing my CSS now and I would recommend it to everyone. It means you can take the positional section and apply it anywhere with the HTML skeleton. It makes positional tweaking very easy to do because the properties you are looking for are easy to find.

So that's my approach.

DE

[/]

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Flexible v's Fixed layout?

Chris..S wrote:
kk5st wrote:
David,

Regardless of Roy, I think your designs always deserve a paean.

cheers,

gary

For those like me, who need to look it up...

Paean: A song of thanksgiving or triumph; exultation.

Definitely not to be confused with peon.

Laughing out loudClose, but no cigar. Consider the homophonic relationship with a synonym for micturate. Thus, the pun.Laughing out loud teehee, I love puns. <giggle>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.