WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Fixed width or fluid design

for

From: YOUNGV5
Date: Jun 17, 2011 7:39AM

Cool Firefox extension. Ethan Marcotte recently wrote a book titled,
"Responsive Web Design" on this subject:

http://www.abookapart.com/products/responsive-web-design

Short, cheap, and informative.

Vincent Young
User Experience, Web Accessibility Specialist
Nationwide Corporate Marketing
Nationwide®
o | 614·677·5094
c | 614·607·3400
e | <EMAIL REMOVED>




From:
"Karl Groves" < <EMAIL REMOVED> >
To:
"'WebAIM Discussion List'" < <EMAIL REMOVED> >
Date:
06/17/2011 06:34 AM
Subject:
Re: [WebAIM] Fixed width or fluid design
Sent by:
<EMAIL REMOVED>



Rick,

Using fixed width has certain usability issues that go beyond
accessibility,
but here are the accessibility concerns:

Primarily a fixed-width design is also going to mean fixed-widths for all
of
the containers. In other words, in a fixed-width design (most people)
explicitly define widths for the container and also the portions in the
container. So if the containing DIV is set to, say 960px, then they'll
define something like 150-200px for the navigation. This can cause an
accessibility problem if a user has set their browser to use enlarged
fonts.
What can happen is that the text will enlarge as much as it can within the
container, but after a certain point bad things happen. Typically text
begins to overlap itself and containers may overlap each other. In the
former case it becomes unreadable and in the latter case things may also
become inoperable.

Whether this is actually an issue is often on a case-by-case basis. There
are lots of ways to do a page layout: tables (hopefully not) or CSS using
absolute positioning or CSS using floats, or other ways, and each of them
will react differently. The best way to know whether it is actually a
problem is to test it. Go to the page with a browser and hit CTRL+ and
see
what happens.

WCAG guidelines say you should be able to resize to 200%. I think that's a
bit excessive. You can use the 'No Squint' extension in Firefox to test at
various sizes and see how it looks at each. It will also tell you what %
you're viewing (and you'll see that 200% is huge).

Good luck

Karl