Fixed width pages, and ems

accessibility concerns

[HelenDev]

I am about to embark on some new website templates and am wondering whether to go for fixed width or fluid.

Many of my colleagues prefer the look of fixed width, and it does seem to be easier to do (CSS only layout of course, no tables). With fluid layouts we have had in the past, users squash their windows to ridiculous sizes and then complain about elements overlapping.

In a previous thread [webmasterworld.com] (now closed) on this topic, Robin_reala said

when you resize the text the line length gets shorter which can cause comprehension problems. A simple fix is to size your size in em-widths so that the line length stays the same regardless of the font size.

I don't understand this though. I've tried to create an example of this but to no avail. Perhaps I don't understand ems too well. Can anyone post an example code snippet so I can see for myself what this means to a user?

Also, if anyone has any other thoughts on the topic of fixed width, before I get started, they would be very welcome.

Thanks.

[jessejump]

>>>>> when you resize the text

I think he means if a user resizes the _text_ font size.

Not resising the browser window.

[HelenDev]

Yeah, that's what I thought he meant as well, but I still don't know how to see this in action.

Can someone post some code so I can do a test and compare how the ems sized text compares with percentage sized text when the user resizes their text?

This is what I was trying to create but my ems sized text didn't seem to keep the same line length when resized (I don't understand how it can, in a fixed width box). Perhaps I'm being really dense but I just don't get it at the moment. Can anyone explain?

[Mindy]

What really needs to happen is browsers need to resize divs/columns/cells along with the text so everything remains readable and does not begin to overlap. Perhaps that's something for us all to start shouting about to the people who build browsers. That way, if everyone used ems and % for fonts and block level elements and kept the fixed widths to borders, padding and margins everything would look pretty even if you had to enlarge it by 300% or more.

[HelenDev]

Good point Mindy.

So is there any benefit accessibility-wise to styling text with ems rather than percentages?

[mattur]

I think the original poster was referring to sizing boxes in ems, sometimes called "elastic design", where changing the font size also changes the measurements of the layout.

[HelenDev]

Aaaaaahhhhhhh. Thanks Mattur, that makes more sense now :)

[HelenDev]

Have done some further reading on fixed v fluid/elastic layouts (thanks again for the sticky, iamlost) and I'm not yet convinced enough to abandon fixed just yet.

When your clients want a site which looks good (including at 800x600) and no horizontal scrolling or overlapping/floating issues, there just doesn't seem enough reasons not to go with fixed at the moment.

I fear that going fluid/elastic just risks upsetting the majority of users and causing a major headache for myself. I'm still not convinced that a fixed layout is particularly inaccessible as long as you don't fix font sizes, and have different stylesheets for other devices such as handhelds.

As Mindy pointed out it seems that the whole page ideally needs to be magnified for low vision users, rather than just resizing text. Is that something that the accessibility (magnification) tools within windows itself would do? I haven't tried them as I'm running Windows 2000 which I don't think includes this :(