Re: accessibility of fixed, liquid, and elastic design

> I was wondering what your guys' thoughts and opinions were.
>
> Any help, thoughts, or resources that you could point me in the
> directions would be greatly appreciated.

My take is that designing accessible web sites sometimes requires a 
paradigm shift. It can be a big hurdle (I'm speaking from experience 
here) that can be agony for some classically trained graphic design 
people to accept. All too often, web designers, especially ones from 
graphic or print backgrounds, focus on how to control a web site to 
display exactly the same from one browser to another. They get caught 
up in developing a fixed pixel-perfect design for Internet Explorer and 
Netscape/Mozilla, running on a desktop machine. There are so many 
variables related to screen resolution, user font size options, device 
or browser selection, etc., that you must come to accept that your 
design may look somewhat different in various circumstances. As the 
Internet grows, and more devices become web-enabled, designers need to 
take into account what happens when a user tries to access a site with 
an alternate device.

By its nature, the web forces designers to give up control over the 
very things designers are traditionally responsible for controlling, 
such as fixed page size, alignment, fonts, and colors. The experience 
is a shock until you get used to it. Becoming a good web designer 
requires a solid understanding of the web environment in order to 
anticipate and plan for these shifting variables.

The web is not print. Web design is a different animal. It is a 
flexible medium. The web simply does not have any one fixed 
height/width, or aspect ratio, or even resolution, that can be used as 
a constraint when designing. Now that we are able to build one site 
that can work everywhere, we need to rethink any aspect of old design 
habits and ways of designing that perpetuates rigidity, inflexibility, 
and now invalid assumptions about the nature of the medium. Fixed width 
designs are perhaps one of the more glaring signs that such habits are 
still present. Liquid design is a more accessible approach.

When web designers learn to stop trying to control the pixel-perfect 
display of their pages and accept that forces beyond their control will 
cause their design to display differently, sometimes radically 
different in certain situations, life becomes so much easier. Rather 
than focusing on how pages display in a particular browser, it is 
better to be concerned with how the information/content is structured 
and making sure it accessible to all user agents. Web designers need to 
learn to let go. Relax. The goal of a web site should not be to look 
identical on every screen that displays it.

Something to take into consideration is that liquid design helps 
support device independence. A key to accessibility is to design for 
device independence, so that pages work on any device which supports 
openly published standards. For Web content to be device independent, 
it should be possible for a user to obtain a functional presentation 
associated with its web page identifier via any access mechanism.

With the growth of PDAs, and even Web site content delivered to cell 
phones, having accessible content is becoming more important. The 
existence of standards such as HTML 4, XHTML and CSS makes this a 
possibility.

CSS 2 allows for a max-width setting but at the same time we must 
realize that some users think breaking a line at any length shorter 
than their browser window width is a waste of space. With paper a 
designer has to pick one fixed line length to inflict on everyone. On 
the web a designer has greater flexibility. One philosophy is if a 
designer is not going to use the web's inherent flexibility, why not 
use PDF instead of HTML?

With that said though, in CSS 2 you can specify max-widths in CSS for 
blocks of text...that way, the line length won't exceed whatever you 
specify...say in percent or ems (to support relative sizing). Example:

 #content { max-width: 400em; }

You can also add min-width, max-height, min-height. IE/win doesn't 
understand this, but there are javascript work arounds to get it to 
play nice. For more info visit: Minimum and maximum widths. [1]

As for desktop computer monitors running GUI browsers...in "Optimal 
Line Length" [2]  Bob Bailey, Ph.D., Chief Scientist for HFI, discusses 
the optimal line length when reading prose text from a monitor. He says:

"Users tend to read faster if the line lengths are longer (up to 10 
inches). If the line lengths are too short (2.5 inches or less) it may 
impede rapid reading. Finally, users tend to prefer lines that are 
moderately long (4 to 5 inches)."

With the browser stats that are cited at W3schools, it would be more 
relevant to see the widths of the browser windows for users of your own 
local site rather than the screen resolution of a global audience. I 
have a 1280 x 1024 monitor resolution but my browser window is 
typically 800 wide and about 950 tall. I do however feel that designing 
for 800 x 600 is not a bad thing but I will usually make my pages use 
up the full width of the browser window. I think that if someone out 
there has their browser set to 1280 x 1024, almost every site they see 
will have very long lines of text and that must be what the user is 
used to and/or prefers.

Let us not forget those users with low vision. If we make our pages 
fixed at say 800 wide and an individual with a large screen comes to 
our page and has the font size bumped way up, they will be stuck with 
only a couple of words per line all over to the left of their screen 
because we deemed they did not need to use the right half.

With all that said, I don't believe that accessible websites have to be 
dull and boring. Web sites can look visually attractive and still be 
accessible on a whole range of equipment, screen sizes, color 
perceptions etc. Presentation should enhance the content, making it 
more appealing, but more importantly, more usable and accessible. Web 
sites can be beautiful AND flexible. Embrace the flexibility.

Some References:

Liquid Design
http://www.d.umn.edu/goto/usability#liquid
http://www.d.umn.edu/goto/css#liquid

Line Length
http://www.d.umn.edu/goto/usability#linelength

Relative Sizing
http://www.d.umn.edu/goto/accessibility#relative

Font Sizing:
http://www.d.umn.edu/goto/type#size

All the Best,

Laura

[1] http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths
[2] http://www.humanfactors.com/downloads/nov02.asp#bobbailey
___________________________________________
Laura L. Carlson
Information Technology Systems and Services
University of Minnesota Duluth
Duluth, MN  55812-3009
http://www.d.umn.edu/goto/webdesign/

Received on Monday, 12 September 2005 12:59:00 UTC