Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: ergophobe
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?
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.
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.
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.
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!).
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).
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:
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...
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]
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.