New Year’s Resolution

In a comment on Roger’s post about fixed and liquid layouts, Cameron wrote:

This issue seems to generate a heated debate every time it’s mentioned. I imagine one could pen an article with the headline “Fluid or fixed?” and nothing else, and yet dozens of comments would inevitably appear.

But rather than use that title, I couldn’t resist borrowing a pun from Andy, prompted by a post from Scrivs called What Resolution Will You Design for in 2007? (a classic example of the fallacy of many questions).

Now, firstly, we need to draw a distinction between monitor size and browser size. In other words, the difference between screen resolution and the viewport size:

There’s a real danger in thinking that “the numbers speak for themselves.” Numbers don’t speak for themselves; numbers need to be interpreted.

The numbers clearly show that monitor sizes and resolutions are getting bigger. The most common interpretation of that is more and more people have bigger displays. But an equally valid interpretation of the numbers is the range of displays is bigger than ever. It’s a subtle but important distinction. One interpretation focuses solely on the size of the highest numbers; the other interpretation focuses on the range of all the numbers.

The way I see it, the range is growing at both ends of the spectrum. Yes, desktop monitors are getting wider (though that doesn’t mean that viewports get any wider above a certain size) but handheld and gaming devices are likely to remain at the lower end of the scale. The Wii, for example, has a resolution of 640 x 480.

Mind you, the iPhone turns the whole question on its head with its scalable browsing. At MacWorld, Steve Jobs demonstrated this by visiting the New York Times, an unashamedly wide fixed-width website. On the Apple site, Wikipedia—a liquid layout— is shown fitting nicely on the display. The iPhone deals with both. Still, rather than letting my liquid layouts scale down to the iPhone’s width, I should probably start putting a min-width value on the body element.

Speaking of which…

A common argument against using liquid layouts is the issue of line lengths. On the face of it, this seems like a valid argument. Readability is supremely important and nobody likes over-long line lengths. But it’s not quite as simple as that when it comes to readability on screen compared to print, as Richard noted:

Surprisingly, I find short line lengths tiresome on screen; I don’t really subscribe to the empirical prescription of 7–10 words per line for comfortable reading. Most novels have 10–15 words per line and I think the upper region of that range is more appropriate for screen.

In any case, the idea that liquid layouts automatically means long line lengths on large screens is, I feel, a misconception. The problem is that a lot of the examples of liquid layouts aren’t very good and line lengths do expand without limit. But it doesn’t have to be that way.

In my opinion, the most important addition to Internet Explorer 7 is the max-width property. It means that we can now really start to look at creating fluid layouts within defined parameters, as demonstrated by Cameron in Andy’s book. In fact, I think we’re just scratching the surface of what’s possible in creating seamless adaptive layouts (and, more importantly, seamless adaptive page elements) using the dual power of max-width and min-width.

That still leaves Internet Explorer 6 and below. Should they get unbounded fluid layouts or should they get a fixed width fallback? The second is certainly an option using conditional comments, which is the Microsoft-approved way of dealing with rendering inconsistencies. I think that the lack of support for max-width certainly falls into that category. Call it transcending CSS if you will; I call it routing around damage on the designer’s network.

I want to hear what you have to say… if you’ve got something new to say. Let’s not just rehash the same old arguments that would inevitably appear had I simply asked “Fluid or fixed?”

Have you published a response to this? :

Comments

I still hear/see comments about "old monitors" with small resolutions… it still makes me want to thump people, too!

I wonder how much of this comes back to the paper-focussed obsession with "above the fold". If people weren’t so worried about vertical scrolling, probably the majority of resolution discussions I’ve heard would have been avoided.

I think you’re right on the mark about max-width/min-width. Fixed or fluid? Neither, thanks! :)

My approach from now will be fluid layouts using (or "telescoping" layouts as I like to call them) and deal with IE6 using Dean Edwards IE7 script as Eric pointed out a long time ago ("IE7 and IE7", Eric Meyer, 2005, blog post).

That leaves us with IE6 browsers with JavaScript turned off and other non-webstandard complying browsers. My hunch is that a fluid layout will look pretty decent in these cases anyway. In terms of Yahoo Graded Browser Support: these aren’t our A-grade browsers. One can not make a web site look exactly the same for all types of browsers, but then that’s the idea behind going fluid.

On monitor sizes and resolutions, regarding hardware it’s not just about people getting bigger/wider monitors, but also newer graphics cards/chips too. You could upgrade to a 20" monitor, but if you have a 4 year old PC with a standard graphics card (at the time), and you don’t know how to change the resolution, you might still be on 800 x 600 or less. You might also not maximise your browser so the viewable area becomes even less.

I think the answer is simple and just as you suggest Jeremy - use a fluid layout, then use conditional comments to feed the sorry old IE6 and older. My stats show increasing IE7 use already from an audience that is not technically minded.

My BIGGEST problem, and the reason I am still making wider fixed-wdith sites from time to time, comes down to images. Some sites need to be able to display a large image in a field of content. Sometimes, it can’t be a thumbnail that links to a larger version. I have yet to see a way (or come up with one myself) to deal with this. I realize that we could drop a side column as the window shrinks, but this isn’t optimal; just because something is on a page doesn’t mean that it’s in a useful spot. I know we encountered this on ALA too; hundreds of old articles to images from a different layout. I realize you aren’t saying this, but I need to get it out there for others: It’s just not always possible.

Help me find a decent way to deal with larger images and I will always design fluid and elastic.

(I love seeing comments on your site :D)

I struggle with going fluid, elastic, or fixed every time I try to design something. I’ve thought "well, it all depends on what you’re trying to accomplish" but somehow even that doesn’t quite sit well with me. Instead, I’m just thinking it’s okay to let go and go fluid, but keep the proportions comfortable for the reader. The reader should have control and be free to size their browser any way they want without the design getting in the way.

Yes, desktop monitors are getting wider (though that doesn’t mean that viewports get any wider above a certain size)…

I totally agree with the idea that although monitors are getting larger, we are actually moving in both directions; we are designing for small devices at the same time as for large screens.

Recently a client asked for a fluid layout so that they could take advantage of a 30" Apple Cinema display. The CEO of the company was convinced that the design had to work on large screens. He argued that this approach was "forward-thinking."

What we found out from people actually using the site (not just the CEO in his office enjoying the wide expanse of his display) was that most of them use small laptops, like a 13" MacBook. And on those laptops their viewport doesn’t usually take up the entire screen.

So the result was designing for a minimum size (small laptop) and then setting max-width values to make sure that things looked good in larger ones. It basically boiled down to a fixed sidebar and a fluid main content area.

What I learned is exactly what you said: the trend isn’t to design for bigger and bigger screens, it’s about working with a larger variety of screen sizes. I also learned that "designing for bigger screens" isn’t a cutting edge or forward-thinking design philosophy.

Ah, reminds me of a discussion we had back at SXSW a few years back. ;0)

I think I’d agree with you that the mobile equation and devices like the Wii and iPhone do change the debate quite a bit. And your comments on IE 7 are well taken. At different times I’ve been both for and against fluid layouts. The main con in my mind is that they can be much trickier to implement than fixed width layouts and when you’re dealing with clients on a fixed budget, well…I don’t think that’s changed.

As it was in the past — it depends — on lots of things; how much time you’ve got, the needs of the site, your audience. For mobile - are you delivering a seperate experience for a mobile context, etc.

What different now is that we’ve got a bit more options which makes adaptive layouts more attractive in my mind.

# Posted by Keith on Wednesday, January 10th, 2007 at 3:51pm

I have always said that regardless of the fact I have two monitors at very high resolutions I still view sites in a window equivalent of 800x600 width.

I think 800x600 is a good base size, with an option to stretch if the browser window allows. I think an upper and lower limit is required however to keep some control of the design.

# Posted by Rob on Wednesday, January 10th, 2007 at 4:04pm

My preferences as a reader are fixed width, centred, 770px (or thereabouts).

I have a 17inch screen and full width sites (like this one) leaving me leaning to the left slightly to feel lined up with the text.

I also have a hankering for simplicity when it comes to navigation choice, so after my preferred width of text 550px (or thereabouts) I don’t want masses of links or two separate columns of choices, I want it simple.

Of course when I’m shopping it’s a different matter.

# Posted by Andrew on Wednesday, January 10th, 2007 at 5:43pm

Great piece. I think the distinction you make about browser size vs. monitor size is a really important one.

I’m on a 24 inch screen and personally, I’m never bothered by long line lengths. If I get to a page that has lines that are uncomfortable to read, I simply resize my browser window. Are we all assuming that the average user on today’s mammoth screens doesn’t do the same? Or is it just that we shouldn’t count on it?

You could also use conditional comments to apply expressions to IE6, eg.

width: expression(document.body.clientWidth < 1000? "995px" : document.body.clientWidth > 1200? "1200px" : "auto");

Seriously, who has the authority to say fixed vs fluid, 640x480, 1024x768, etc.

Each media demands different requirements, each platform has it’s own limitations, each website has a different focus and each designer has their own preference.

Ultimately, we’re all human. And by ‘design’ we’re all different and have our own preferences. Design with the understanding that it depends on your target market.

And since we’re on the subject, just design in ems and be done with all this debate. ;)

# Posted by ChadL on Thursday, January 11th, 2007 at 1:26am

I think you bring great points to the table when you mention:

  1. Screen size does not mean browser size.
  2. Screens are going both ways.

Personally, I think it would be very tough to create a layout that looks great at BOTH 640/480 and 1600/1200 using just a liquid layout, I think it would need to be more elastic or elastic/fluid with some JS to re-arrange some elements.

In regards to lower resolutions found on the WII, PSP, and mobile devices - are people REALLY browsing the internet on those devices, or are they just using them to achieve specific tasks? I am not making a claim one way or another - it would just be interesting to see how people are really using the web on those devices. Just as we dont know the browser size on a larger resolution monitor, do we know that people are really taking full advantage of sites on those different devices?

# Posted by Nate K on Thursday, January 11th, 2007 at 2:19am

I believe the familiar narrow text measures seen in newspapers and the like are driven by editorial flexibility (read as: nice range of ad sizes) than any concern for legibility.

Line-height is the all too often forgotten element when making a decision regarding text line length. This is a basic principle drilled into anyone who has studied typography. Longer line lengths (in ems) demand larger line-heights. CSS sadly doesn’t provide a way to create a relationship between the two in a fluid layout. Unless, of course, you bring a little JavaScript into the mix.

More ranting on this topic:
Flex CSS with JavaScript for better reading.
http://www.ollicle.com/2005/oct/12/javascriptflexcss.html

BTW: Thanks for the great book Jeremy!

# Posted by Ollie on Thursday, January 11th, 2007 at 12:22pm

Jeremy- I have to say, this is the best article I have read on this issue by far, kudos to you. I think the overview you provide is strong and succinct.

I agree, the real issue is line length in this debate, and I just haven’t seen enough quality research on the issue to take a serious stance on the issue. I am starting to think that a bit of Script to build a conditional number of columns may be the best solution to increase fluidity and keep readability.

Lets not forget the skill difficulty for the designer to make an effective fluid layout—especially if there are variable column numbers.

On another note, do you really think that there are lots of designers out there with Photoshop open and a design that is exactly 1024px wide, forgetting the browser viewport? Even the most simple testing would allow one to notice the error in that way of designing.

I find that I desperately want better math options for CSS, although I’m not (yet) (entirely) sure how to express what I want. All I know is that I’ve had bad experiences mixing beautiful header graphics, fluid layouts, and top navigation.

The range of screen sizes is bewildering to design for, too. At my last job, I used to regularly have to talk to a print designer with a huge Apple widescreen monitor and explain why there was so much whitespace in my web designs. At the other end, I have a little Windows device with a (relatively) dinky screen.

It seems unlikely that any one layout would make both of those readers/viewers happy.

On the other hand, it is nice to note that IE7 has min/max support. As that creeps across the browser landscape, I may head more in that direction.

Last random thought: I agree with Richard about line length. There’s a sweet spot between the recommended length and an end-to-end line. I hadn’t thought about it as being "novel-width," but that’s exactly it!