|Fixed-width layouts vs Fluid layouts|
how does it affect accessiblity and usability
| 2:31 pm on Feb 17, 2006 (gmt 0)|
With visitors screen resolution moving away from the 800 x 600 (around 20% of visitors) and the clear winner - at the moment - being 1024 x 768 (around 60% of visitors) - do you still cater for the former?
Do you design more sites using fluid designs (which would cater for all the resolutions) or fixed width layout - and if you do the latter what's the minimum resolution you are catering for?
I admit that I find it easier to design fixed-width websites but I do use user relative size for the text which is - I beleive - a good compromise. I also still cater for 800 x 600 and find it quite strange that a lot of website not longer do. What are your thoughts on that?
Has any of you ever tried to compare the accessibility of fixed-width against fluid? What did you find out?
| 6:39 pm on Feb 17, 2006 (gmt 0)|
Usability can be compromised by fixed-width designs when viewed with a screen whose dimensions does not correspond to those fixed by the designer. As for accessibility issues, it is less of a problem: for example screen readers have no notion of width as they present the content aurally.
When testing a fixed width design, you need to look at the relationship between fixed and variable elements. For example a fixed-width 100 pixel sidebar enclosing resizeable text will break once the text is enlarged enough. You need to consider what happens with a small screen: can your main content appear within a smaller space without sideways scroll? In the old days, the idea for fixed-width sites was to design for an approx. 740 pixel width page, but the main content would be no wider than about 620 pixels for the 640x480 crowd. Now with 1024 pixel being the most common, your main content width should never exceed 720 to 780 pixels. The page remains useable (if impaired) on an 800x600 screen.
The technology comes to the rescue when dealing with very small screens such as cellphones: the small-screen rendering mode in Opera is an incredibly useful tool for testing how your fixed-width design can be squeezed into a much smaller space.
| 3:49 am on Feb 18, 2006 (gmt 0)|
This is definitely an interesting topic.
Luckily, like encyclo mentioned, screen readers are not the problem here. Instead, I think we are dealing with a combination of users with "tools" such as pointer wands and similar. We are also going to have to worry about old people, or just the average Joe who certainly do not want to scroll sideways too much OR have an entire paragraph on one line either :)
Typically, I also increase the font size marginally for each larger resolution.
| 5:55 am on Feb 18, 2006 (gmt 0)|
| 6:11 am on Feb 18, 2006 (gmt 0)|
The issue with the way fluid layouts are usually designed is that they are designed relative to the screen size, when they should be designed relative to the font size.
In other words, it'd be better (though somewhat trickier since it can be a chore to plan for variations in available fonts, screen resolutions etc) to set the width of the element containing the main content to something like 60em than it is to set its width to 80% of the width of the viewport.
The problem with relative-to-screen-size layouts [webmasterworld.com] is that lines may become unreasonably (or unreadably) long on large displays. It is true, of course, that the user should be able to resize the window and adjust the line length to his or her liking, but a well-planned relative-to-font-size layout avoids this issue altogether with, IMO, no significant drawbacks.*
*Provided, of course, that the designer/developer has taken care to select a measure appropriate to the likely range of fonts that might be present on client systems.
| 11:09 am on Feb 18, 2006 (gmt 0)|
Bedlam, that sounds like a neat approach. Over-long lines of text are one of the things I find most disturbing about floating width web pages. The user should not have to adjust to get what he/she wants since they probably won't. Your solution had much merit.
| 11:39 am on Feb 18, 2006 (gmt 0)|
There are a couple of main issues here that are being slightly confused.
Firstly, does your design "break" if the screen, dimensions or font size are increased. This is, of course, an issue whether or not we are talking about fixed-width or fluid, since anyone can use a browser-side style sheet and do anything they want with your precious site.
All types of design can (and do) break if funky things are done to them - the idea, imo, is to ensure that they "degrade gracefully" in the same way that one would treat designing for NN4.
Incidentally, this is an accessibility issue for those with poor vision who may well have browser-side stylesheets increasing font resolution.
Secondly, is fixed-width an appropriate answer to varying screen size, and in this case I would say that it can be. Above 1024 the main content fails a usability test on a fluid design as the line-length is too long (in fact, I would say that most of the fluid text-based sites with a top nav fail a usability test even at 800px).
So at 1024 a floated 800px gives a white border one each side for those who do not have a left window open. This is my preference to view these days rather than a site that appears "jammed into" the screen, but then that maybe a matter of personal habit.
For smaller resolutions (such as a print page, or a mobile) it should anyway be possible to apply an appropriate stylesheet (although I must admit that mobile design and usability is on my to-research list and I would be interested in discussing this more in a future thread!).
| 5:42 pm on Feb 18, 2006 (gmt 0)|
That is an excellent approach! I have played with completely "relative to font size" layouts in the past and been very happy with the result. The entire layout degrades nicely and no unexpected surprises or drawbacks. Whatever "glitches" such a layout may experience are in my experience lesser than anything a fixed layout might experience.
The only problem, however, with the relatively sized layout is graphics. Not resizing the graphics may look quite unproportional. Resizing them may, of course, look quite pixelated. While I can live with pixelation for images (hey, if you need the font size larger, chances are you need my images larger as well) the immediate drawback is inability to resize the background images.
Thus, so far, I have not actually employed a "sized relative to font size" type layout ... yet. But, it is still in the works. Once I am satisfied with it, and once a few glitches are worked out, I'll be sure to post it here (and in CSS).
| 6:20 pm on Feb 18, 2006 (gmt 0)|
|The only problem, however, with the relatively sized layout is graphics. |
The ultimate solution to the graphics problem is, IMO, svg [w3.org], but unless someone here has some serious pull in Redmond, that solution isn't going to arrive all that soon--maybe we'll have native svg support in IE 16.1...
In any case, in the very few sites I've actually built this way--I almost always build fixed-width sites with relatively-sized type--my practice has been to do the following:
- where possible use CSS to specify background images (such as those in headers) large enough that the text size needs to be increased about four times before the right and bottom edges become visible,
- provide click-enlarge links for in-content images,
- design with the usual fluid layout techniques (e.g. repeating background images) in mind,
- not design 'pixel-perfect' pages
For that matter, the same could be done using server-side techniques--especially if you're using a cms with graphics manipulation capabilities such as TYPO3...
| 11:41 am on Feb 19, 2006 (gmt 0)|
some very good pointers here.
I also came across some interesting stuff on the net about 'elastic designs' - which is what we are tlaking about here.
Some other quite interesting points were made about serving a different stylesheet depending on screen res - three cols layout becoming 2 cols + expanded footer was quite interesting - although I can't find the url anymore :-(
[edited by: DrDoc at 5:36 pm (utc) on Feb. 19, 2006]
[edit reason] tpyo [/edit]
| 5:55 pm on Feb 19, 2006 (gmt 0)|
A few years ago, this topic came to light and I decided to build a page that used relative sizing for everything, images too.
I used the png format for images which allowed me to scale up and down without too much loss in quality. Unfortunately sizing images relatively is an exact science and the support is non-existent unless of course you've sized everything evenly in your layout, then you can work with relative image sizing. ;)
In the last 6 months, I've been implementing the style switcher alternative while I get ready for the transition into more fluid designs. We've received nothing but positive comments from users which for one tells me it is working and two, the fixed font sizes are an issue for some. But, I typically fix at no less than 13px for main content, 14px and 15px in some instances depending on the font being used. And then line height adjustments to coincide with the font sizes (this is a must).
I work with a fixed palette 95% of the time. Why? Years ago I did my first design in Adobe ImageReady. One of the features in the program was the ability to output as CSS. I chose that and was instantly educated on the art of absolute positioning (CSS-P). From that point forward, I've worked mostly in fixed width/absolute positioned designs.
I prefer fixed over fluid, but I view the web from a minimum 17.0 screen set at 1024x768. I've also adjusted my system font size to be 125% of the default. My vision is not what it used to be and you'd be suprised at the difference that 125% setting makes. Everything becomes much more clearer.
Anyway, my two primary style sheets now cater to a 760px width and a 955px width. I make sure that important content falls within a specific area of the window. Less important stuff at the far right, the most important at the very left. I treat each page on a scale of one to ten...
1 ¦ 2 ¦ 3 ¦ 4 ¦ 5 ¦ 6 ¦ 7 ¦ 8 ¦ 9 ¦ 10
1 ¦ 2 and/or 3 being left navigation (in most instances). 3 ¦ 4 ¦ 5 ¦ 6 ¦ 7 and/or 8 being primary content and 9 ¦ 10 being "fluff" area. I typically will use the "fluff" area for visuals, ads, etc.