Static, fluid, or someting in between?

For a long time, I have been dissatisfied with using statically dimensioned web pages. If their width is set so as not to scroll on a low resolution screen, they look kind of puny on a wide screen. Conversely if set reasonably wide, users of small screens end up having to scroll horizontally - a big No No in my book.

The alternative of fluid width posses the problem of lines of text becoming too long for comfortable reading when a viewed in a very wide window. Also with very narrow windows, page layout tends to break, and differently with each browser.

I had resigned myself to using fixed widths (usually 600px or 800px) as the lesser of the two evils until a came across this article by Mike Purvis. It seemed a concept worthy of testing, so I have used it in my most recent site rebuild: http://www.stetsongroup.com/.

I would appreciate some comments regarding the Jello Mold concept verses static or fluid pages. I’m not really seeking comments about the site design itself as both the templates and the site structure are still under development (especially the menus). I would prefer this thread concentrate on the merits of static vs fluid vs jello.

Thanks for any feedback.

Worked great in FF (had to remember to close the browser, change the resolution, then open the browser again to see it properly in the lower resolution). However, in Safari I just got the oversized page with no scrollbars at the lower resolution! Maybe something to do with Safari setting its resolution itself at installation or something, but it just didn’t seem to understand that it was supposed to see a smaller page!

Not having access to a Mac, I really don’t know how the Jello Mold functions under that OS. What happens under Safari if you keep a reasonably high resolution, but just change the window size? Under Windows, with IE, FF or Opera, it resizes as expected as you change the size of the browser window. The only exception appears to be in Opera when set to display "fit to width", when it appears to add a 300px margin on the right hand side.

What I like about the Jello Mold concept is the ability to have some degree of control over the maximum and minimum widths of the displayed content. This should mean I can be a little more adventurous with page layout without having to resort to the security provided by using static page sizes.

In FF, in any resolution, changing the browser size works as expected. Also in Safari at 1024 resolution.

The thing with Safari is at 800x600 the browser window is extended beyond the right edge of the screen. If you just move it over to the left, you can resize it and it works properly, with a vertical scrollbar as expected. It just looked like there were no scrollbars at all since the right edge of the page was off the edge of the screen.

Mmmm. I wonder how many users run Safari at 800x600? I might have to live with that, just as I do with some older Windows browsers....

Any comments on the merits or otherwise of using the Jello Mold vs fixed or fluid widths?

Other than the Safari issue (which is easily enough fixed by resizing the browser window to fit in the screen), I see no outward difference. It seems to Just Work, at least on the Mac.

the problem with liquid layouts it that I often find that even on my modest 19inch monitor, the text gets stretched so much as to make it hard to read. http://www.engadget.com/ is a great example of a bad liquid layout, the website feels cramped and ill defined to me. http://www.engadgetmobile.com/ is much better in my opinion.

Elastic layouts are interesting, but i have yet to seen a truly successful one as it is so hard to predict how it will look on different configurations. There are enough variables in web design to worry about!

http://www.engadget.com/ seems to have the worst of both worlds. On a very wide window lines of text do indeed get too long for comfortable reading. On the other hand, on windows narrower than 1000 px, it is necessary to scroll sideways to see the entire screen. While http://www.engadgetmobile.com/ looks better on a wide screen, it too can require horizontal scrolling as its minimum width is around 960 pixels. In this part of the world there are still a large number of users with with legacy systems where the monitors are set to 800x600 or 1024x768. On the other hand there are an increasing number of monitors with very high resolutions (1600+ pixels wide).

One only needs to look at the MODx site to see the the problems created by both fixed width and fully fluid design.

In these forums, the pages are fluid and always expand to fill the entire width of the window. Even with a resolution of 1280x800 on the laptop I’m using to type this message, I find it more comfortable to read the threads in a less than maximized window. In a 1600px wide window, the lines of text are extremely difficult to follow. On the other hand, at widths of 600px or less, the threads are very comfortable to read.

However the main MODx pages use a fixed wdith layout, and in windows between 800px and 1200px, it looks good. However on windows much larger, the amount of plain black real estate begins to overpower the the relatively small content area. However, on windows narrower than approx 780px, the dreaded horizontal scroll bar appears.

What I like about the Jello Mold approach is the fact the the designer can specify the minimum and maximum widths of the displayed page (assuming the viewer uses the designer’s css). Not only that, we can specify how wide the window needs to be before the page reaches its maximum width. At minimum with there is no outer margin. As the window expands, the outer margin expands slowly until the maximum page width is reached. At that point any further expansion of the window results in just the outer margins expanding.

For example, in stetsongroup.com the minimum width of the page is set to 600px and this is achieved in a 600px wide window. The maximum width is currently set at 900px and this is reached when the window reaches 1200px in width. Admittedly, on very wide windows, the 900px maximum is beginning to look a bit small, and in future designs I would most likely set the maximum width to around 1000 or 1200 px. I’m not sure that the time is yet right to increase the minimum width up to 800px, but I have found restricting the maximum width to about 150% of the minimum width keeps any readability issues at bay.