E-mail List Archives
Thread: Fixed width or fluid design
Number of posts in this thread: 3 (In chronological order)
From: Rick Hill
Date: Thu, Jun 16 2011 6:18PM
Subject: Fixed width or fluid design
No previous message | Next message →
Is there any inherent issue with using a fixed fixed width page layout versus a fluid layout design? What things would we watch for iof we opted to switch to a fioxe width model?
–––––––––––––––––––––––––––––––––––––––
Rick Hill, Web CMS Administrator
University Communications, UC Davis
(530) 752-9612
From: Karl Groves
Date: Fri, Jun 17 2011 4:33AM
Subject: Re: Fixed width or fluid design
← Previous message | Next message →
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
From: YOUNGV5
Date: Fri, Jun 17 2011 7:39AM
Subject: Re: Fixed width or fluid design
← Previous message | No next message
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 ADDRESS REMOVED =
From:
"Karl Groves" < = EMAIL ADDRESS REMOVED = >
To:
"'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Date:
06/17/2011 06:34 AM
Subject:
Re: [WebAIM] Fixed width or fluid design
Sent by:
= EMAIL ADDRESS 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