Fixed versus dynamic layouts
Sep 17th, 2007 by Karen
One thing that has come up with our site redesign at UH is that we switched from a fixed width layout to a dynamic scalable layout. What that means is that the new layout resizes depending on the size of the window it is open in. This has inherent pluses and minus. The plus is that the site design scales up for higher resolutions than its base resolution (1024×768). The minus is that it scales down for lower resolutions, you wouldn’t think that this a minus except that portions of the site go to pieces at lower resolutions and look terrible.
So how do we deal with this? Well, one solution is to go back to a fixed width design. I’m not a fan of this solution because it doesn’t scale-up and looking at statistics on screen resolutions a larger percentage of users have a higher screen solution than 1024 than those who have a lower screen resolution. Fixed width design also makes your site look crazed as more people are using higher screen resolution. We saw this with our old site which was sized for 800×600 and people complained about all the white space that wasn’t being used (because they were using computers with 1024×768 resolution).
Another potential solution might be to use the min-width CSS property to define a bottom limit for how small the site can shrink. The issue with this is this property (according to the literature) doesn’t behave consistently across browsers - curse you Microsoft.
The final option is to use a mix of fixed and relative measures to scale the site to different resolutions. We do some of this already on the site. The left navigation bar is a fixed pixel width to achieve a particular effect. in theory, we could do the same kind of thing with the right column in our tri-column layout and then use a combination of width and min-width on the center column to make the layout scale up to higher resolutions but not go to pieces a lower resolutions.
This is all in theory. I still need to look for some concert tri-column examples and test things out. But the idea of a hybrid model is definitely growing on me.
None of these solutions will help with mobile devices though so one thing we are going to have to do for our site in the near term is write a mobile stylesheet. It is sort of ironic that as I’m considering mobile stylesheets A List Apart has an article on making your site iPhone friendly. I like many of the things the author suggests and discusses but the suggestion of creating true multiple versions of the site gives me nightmare. By the same token, web designers have to find better ways to deal with mobile devices because of the distinct advantages these devices give their users. (Hey the iPhone knows what microformats are and will use them to allow the user to auto-dial a phone number!) I think the key part of creating this design will be figuring out what to highlight on the homepage and landing pages for mobile devices with less screen real estate.
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.
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 . . .
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).
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.
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