Comments on: Fixed versus dynamic layouts

By: Don McMorris

Don McMorris — Wed, 26 Sep 2007 13:19:31 +0000

I have a thing for “Quick-and-dirty” solutions. Then again, a lot of my stuff is more for myself and friends, and not really intended for the real world…

That being said, what about an image that’s 1024 pixels wide by 1 pixel high, and transparent (or at least the same as the BG color). This image would basically force a minimal resolution (anything smaller than 1024xX would see a horizontal scroll bar).

I have no idea how (well) this would work for portable or embedded devides, though (cell phones, PDAs, Ultra-Portable PCs, etc.).

Good luck anyway. See you in RSS!
–Don

By: Karen

Karen — Fri, 21 Sep 2007 13:49:40 +0000

Let’s just say fixed width went less to pieces. Meaning things didn’t overlap which happened with my original dynamic design initially. I still haven’t got it quite right though. IE is the bane of my existence. Being able to scale up font size wise is a plus but often this can make a design go to pieces as well if you have a space divided up a certain way. I like Oregon State’s approach because it allows people to scale up without throwing everything to pieces. As you said though this kind of work takes a lot of skill and experience, plus time to get right. And the more complex the design the more skill, experience and time is necessary.

By: Jonathan Rochkind

Jonathan Rochkind — Thu, 20 Sep 2007 14:19:14 +0000

Wait, your fixed width design _didn’t_ “go to pieces” at lower resolutions than it was designed for?

Or it just didn’t go into as many pieces as the dynamic one?

I think it is possible to make dynamic-sized stuff (some web pages call this ‘liquid layout’) that really _does_ work at both very small and very large resolutions. But it definitely can take a lot of work/time and skill, and many libraries have a shortage of at least one of those.

In addition to screen-size, I believe our layouts should also behave well with changes to _font size_ in the browser. This is pretty crucial if your user base includes significant people with some vision impairment (hello, elderly). If it width scales well, it _probably_ font scales well too, but there are some additional tricks (like expressing dimensions in ems instead of pixels wherever possible).

By: Jonathan Blackburn

Jonathan Blackburn — Tue, 18 Sep 2007 22:26:42 +0000

Oh, gosh, I hate this too.

There is really NO good solution.

Right now, we are using a boring “fits into a 800 x 600 window” design that is pretty limiting.

I think you’re best option is the one you discussed.

Of course, you could always go completely fixed width but then let the user choose the size by switching style sheets — expanding the width of the window w/ text -size — but this would probably just confuse those who want larger text but not a larger window.

OSU Libraries has had the text-size option on their site for a while, although they they use it in concert with a flexible design that has fixed right and left columns and a fluid center.

Apparently, they manage to do this AND use a table-less layout. (I am impressed!)

See: http://osulibrary.oregonstate.edu/

Darn it! They also stole my “float the box” idea for their Meebome widget! I was going to do that next week . . .

By: Kelley

Kelley — Tue, 18 Sep 2007 11:58:18 +0000

Over at Osceolalibrary.org we’re using a hybridized layout. We were using a rather ugly fixed width layout before the redesign but now the design can please the 1024×768 and up crowd as well as work for the 800×600-ers. We had to work a lot to get this to display right, since it had a tendency to break at the lower resolutions in the beginning. It was worth the work though.

On the min-width CSS properties it was a pain to get it to work with IE but we got around it by using conditional comments in the CSS to force both IE 6 and 7 (which both needed separate, specific width lines) to behave. There is a good article on getting Microsoft to work here: http://nerds.imsafer.com/articles/2006/09/28/css-for-ie6-ie7 if you’re at all interested. They’re hacks, but it’s better than using a whole second stylesheet just for IE.