Simon Willison’s Weblog

I have to say that my preference is a liquid design.

A great many sites seem to be designed following the fixed nature of print (and certainly a lot of designers I have worked with think that way). Computers allow liquid designs - it's a great thing.

And it's not just a case of fitting more on a screen. What about small screens like those on mobile devices? If you've got a column with a 400 pixel width, prepare to see the horizontal scroll bar...

Ems agogo. That's what I say. My site, HTML Dog, is another example of the 'third option' approach Simon mentions. Take a look at this as well.

Patrick Griffiths - 9th November 2003 01:02 - #

HTMLDog (cool site btw) isn't quite what I would call a "full page zoom", as although everything is sized with ems it's still liquid in that it fills up the whole browser window. This leads to the readability problem of long line lengths, which is the reason I'm not as hot on liquid designs as I used to be. Rick Cecil's site sets the overall width of the content with ems which means the line lengths (in terms of word count) are pretty much the same no matter how big or small the text is.

As far as mobile devices go, I'm not convinced that the same design should be served up to 160px wide phones as is served to 800px wide desktop browsers. That's what I see the CSS media attribute being for - you should be able to serve the same content to mobile devices but with a stylesheet that takes in to account their smaller screen sizes. Unfortunately from what I've heard mobile device manufacturers are pretty slack when it comes to actually supporting the media="handheld" option.

Simon Willison - 9th November 2003 01:12 - #

I understand what you're saying about HTML Dog not being "full page zoom". The decision to go fluid is quite Nielsenist - to take advantage of a users screen 'real estate'. Maybe the advantages that Nielsen championed in the past are outdated, what with users becoming more used to scrolling and the increasing size of screens, but I'm still not completely convinced.

The advantages of ems within a liquid design is still a benefit similar to what you are saying though. For example, if the width of a navigation menu is set in ems (rather than the more common pixels) then it will be much better presented when the text size is increased (or even decreased).

As for the issue of accessibility, if a user is having problems seeing small text and chooses to increase the size, doesn't it make sense to increase the proportions of the whole page accordingly? I mean, problems of reading a certain size of text are going to correlate to problems of separating areas of content. And this is an issue for fluid and non-fluid designs alike.

Regarding the mobile device thing, it would be great to be able to serve different versions to different devices, but in my experience that just doesn't happen or can't happen - like you say, there aren't many reliable media type values.

Patrick Griffiths - 9th November 2003 01:29 - #

You should, if you haven't already seen it, check out smokinggun's scaling layout developed by the same guy (John Weir) who did IHT. Tried something similar with my site last year but was never happy with the results.

Craig - 9th November 2003 01:35 - #

Good choice of the term "full page zoom", because Opera called it the same thing 3 years ago when the browser introduced the (then) revolutionary feature in version 5. Except that you don't need the page author to do anything to the page - the browser zooms the whole page automatically. Yawn.

Kevin W - 9th November 2003 02:22 - #

Simon, what I really not understand: If your browser window is maximized and you use tabs - why don't you just resize the tabs?

Thomas Scholz - 9th November 2003 03:20 - #

I have a suggestion: max-width. (Credit to Michael Williams, who suggested it to me)

Yoz - 9th November 2003 03:43 - #

Thomas, I'm guessing that Simon is using Moz/Firebird, in which the tabs always take up the whole window, as opposed to Opera, in which the tabs can float w/in the window.

Come to think of it, that must be why I find Opera so much more comfortable to use when I'm at work...I do a lot of reading/research, and I often resize tabs w/in Opera. hmmmm.

(Something I've been thinking about lately, in re: tabs, is whether there'd ever be a chance of having a modification to the DOM so that you could do a JS window.open but with tab.open instead....)

Elaine - 9th November 2003 04:48 - #

I go for gooey designs. A gooey design is liquid up to a point, and then stops being so. (Aquarionics is an example, natch. It's liquid up to 1024 pixels wide (This will be ems soon), and after that it fixes itself to the left hand side with the aid of a max-width setting. I'd prefer, in fact, to design so that it was liquid and centred after the point where it looks silly, but I can't do that because of the lack of "Center this block" functionality in CSS (The various hacks you can use to force this don't work with gooey designs)

Aquarion - 9th November 2003 08:46 - #

On my site, I do everything ems/%ages, and have done for some time. Using a width of 90% and a max-width of 65em seems to work pretty well, and doesn't mess people around when they want to have a small browser window. Also, my favorite feature of the max-width/width combo is that horizontal scrollbars don't appear when text gets resized to extra-large.

Andrew Sidwell - 9th November 2003 10:18 - #

Yea, the problem is that without max-width the horizontal scrollbar appears if the 'zoomed' width gets wider than the window.

I. G. - 9th November 2003 10:32 - #

I try to do something similar to what you suggest by defining my layout in percentages and using liberal amounts of whitespace. I think that actually is a better use of browser real estate because it makes for a better reading experience. A page filled up with long lines of text and (horror) shouting graphics must be very interesting for me to return to it.

Ben - 9th November 2003 10:39 - #

L.G.: The behaviour I describe will still work without support for max-width, it'll just be a slight usability hit. The behaviour you describe on non-max-width-supporting browsers would be only occur if you set the width to 65em. My behaviour on the same browsers is that the width will just be 90% of the browser window.

Andrew Sidwell - 9th November 2003 11:21 - #

I have been considering this problem for some time. I usually prefer liquid layouts over fixed-width (even though I have a huge monitor running at 1280 x 1024) because I hate to see valuable screen real estate wasted.

It seems to me that the best solution would be to offer the user a choice^*. How about using a stylesheet switcher to allow the user to select from a fluid or a fixed-width layout? Although it will mean extra effort from the designer, I think that such an arrangement should be standard practice in the future. CSS has given us this power, so we should use it.

^*Of course, The Matrix has recently highlighted the importance of choice.

Simon Jessey - 9th November 2003 13:55 - #

aquarion: if i understand correctly what you mean, have a look at my design -- gooey and centred in opera and mozilla by using max-width and margin:auto, but fixed-width in ie.

dvd - 9th November 2003 23:57 - #

Using the em unit is of course the right thing to do. I use only ems when I am working on an XHTML + CSS2 projects. Making a page 'zoom' like http://www.cednc.org/programs/engage/finance/ is not hard. However, one thing still bugs me: The bitmaps in the page do not (obviously) zoom. It would be really great if one could replace the bitmap logo with a vector logo, for example. I know that in Flash this is possible, but I would really like a format that is as widespread (and plugin-free) as PNG or GIF.

Jon - 10th November 2003 06:34 - #

I pointed out in a comment to an earlier post that I use Javascript to resize text and SVG images on my Weblog. This ensures that the text is readable for any size of browser window, and that said images fit in properly.

Rich - 10th November 2003 12:12 - #

Christening this technique full page zoom is not really a proper description, images and so forth aren't properly zoomed etc... I've been interested in this for a while, after seeing some CSS templates at BlueRobot I was inspired to come up with my own templates that used the em-sizing technique.

As a side note "Real" full page zooming in IE using javascript.

Ben Meadowcroft - 10th November 2003 13:06 - #

I tend to favor fixed-width pages. Call me a design nazi, but I prefer laying out the page for optimal legibility. However, this is why I provide tools for resizing the page width along with text size in my designs. Takes care of all needs.

AVERAGE JOE - 10th November 2003 16:14 - #

I also prefer fixed width, and I use a quite narrow browser window, so for fixed-width weblogs, I have to scroll to read right-hand sidebars, or the main content (the weblog posts) if there are left-hand sidebars.

What I find odd about liquid designs, is that it's almost always the main content that is liquid. The sidebars are usually fixed-width, which causes the main content to become either too narrow, or too wide.

Thanks for the "Narrow" bookmarklet!

Peter Lindberg - 11th November 2003 11:23 - #

Hi there, a long time I favoured liquid layouts because of their flexibility. But this flexibility is also a major drawback, line length increases until text isn't legible anymore. This was one of the main reasons I now prefer fixed layouts in most cases.

Related to your JavaScript experiment, I already made a similar thing a while ago, you can have a look here: http://blog.hessendscher.de/playgrounds/dynamische _textgroesse.htm . But I think this isn't ready for primetime yet :)

Stefan Walter - 11th November 2003 22:24 - #

Gotta love the tribune...has text resize, page by page integrated viewing by article, and a clippings save box. very cool. http://www.iht.com/frontpage.html

Craig - 12th November 2003 07:50 - #

You can zoom images as well by specifying dimensions in em's. This works in Mozilla Firebird at least.

Hemebond - 17th November 2003 04:33 - #

The one thing that makes me wish IE didn't suck:

style='zoom:.2'

details and demo here

Andyed - 18th November 2003 01:51 - #

After finding this topic here and checking out some of the examples from Simon and the other posters, I was inspired to re-implement the css for my site that I just finished the layout on (a fluid one, in case you were wondering). It seems like a lot of the examples given here are somewhat hybrids, and it's hard to say what the best real approach is. Aside from the logo image on my page, everything else scales completely. There were a lot of problems to overcome, but it should be pretty close to "unbreakable" at this point; it has been tested in Mozilla and IE.

http://www.elasticdog.com/

Aaron Schaefer - 18th November 2003 06:18 - #

Hey, that's a really nice example. I tried it out in Opera, IE/Windows and Safari and it scaled up and down just fine.

Simon Willison - 18th November 2003 15:55 - #

I might be wrong, but those comments looks like a stupid attempt of spam @__@

Mathieu 'P01' HENRI - 11th February 2004 12:50 - #

My personal preference is to have a liquid background with the main site fixed at a width of 728 pixels.

The Doctor - 28th December 2005 14:01 - #

gooey

pekkah - 5th April 2006 09:48 - #