Comments on: Fixing your width: what’s the optimal size for a site? http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/ Tips and Commentary on Web Accessibility, Usability, and Search Marketing best practices. Fri, 21 Nov 2008 12:52:23 +0000 http://wordpress.org/?v=abc By: Joe Dolson http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-705 Joe Dolson Fri, 22 Sep 2006 16:51:14 +0000 http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-705 Thanks, Tedd - I'm aware of the problem. I'm using an image replacement technique where the dimensions of the banner area are expresed in <code>ems</code> - so at small zooms, it disappears. Haven't worked out a good solution, yet. Your comment about handling real estate are right on - using the space available means being flexible, since we have no way of controlling what space that will be. It's not just about allowing a site to expand to fill larger screens, but making certain it's still usable in smaller ones! Thanks, Tedd - I’m aware of the problem. I’m using an image replacement technique where the dimensions of the banner area are expresed in ems - so at small zooms, it disappears.

Haven’t worked out a good solution, yet.

Your comment about handling real estate are right on - using the space available means being flexible, since we have no way of controlling what space that will be. It’s not just about allowing a site to expand to fill larger screens, but making certain it’s still usable in smaller ones!

]]> By: tedd http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-704 tedd Fri, 22 Sep 2006 16:44:03 +0000 http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-704 For years now I've done fixed width sites -- like so many billboards, just boring testaments of days gone by before Ladybird's beautification mandate, which predate most of you. But now, I think the concept of "the medium is the message" is starting to influence web design and user expectations. I think we collectively are viewing the browser window differently now -- it's not the printed page, as ecommerce is not "brick and mortar". The differences are becoming more apparent, acceptable, and even expected. What we are faced with now, is how to be best handle real estate. The browser window is not fixed, and our charge is to best use what we are given and to do so to the widest audience possible. As such, I no longer do "fixed width" but rather different fluid and em based sites with emphases on accessibility. Granted I still have to live with clients who have not seen the light, but that comes with the territory. My charge is to best see to their needs and not to their misconceptions. tedd http://sperling.com PS: On small zooms, your logo banner disappears (Mac OS-X 10.4.7 Safari 2.0.4) For years now I’ve done fixed width sites — like so many billboards, just boring testaments of days gone by before Ladybird’s beautification mandate, which predate most of you.

But now, I think the concept of “the medium is the message” is starting to influence web design and user expectations.

I think we collectively are viewing the browser window differently now — it’s not the printed page, as ecommerce is not “brick and mortar”. The differences are becoming more apparent, acceptable, and even expected.

What we are faced with now, is how to be best handle real estate. The browser window is not fixed, and our charge is to best use what we are given and to do so to the widest audience possible.

As such, I no longer do “fixed width” but rather different fluid and em based sites with emphases on accessibility. Granted I still have to live with clients who have not seen the light, but that comes with the territory. My charge is to best see to their needs and not to their misconceptions.

tedd
http://sperling.com

PS: On small zooms, your logo banner disappears (Mac OS-X 10.4.7 Safari 2.0.4)

]]> By: Joe Dolson http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-703 Joe Dolson Fri, 22 Sep 2006 14:57:01 +0000 http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-703 I can see your argument, and I'm willing to buy it about half the time... Fixed width weblogs fall down in fixed-width when he font-size is increased - resulting in too-short lines. However, it could be argued that too-short lines are less of a problem then too-long lines. I go back and forth - what I prefer, in that case, is more of a zoom layout - expanding with the text, giving control of proportions to the designer. I can see your argument, and I’m willing to buy it about half the time…

Fixed width weblogs fall down in fixed-width when he font-size is increased - resulting in too-short lines. However, it could be argued that too-short lines are less of a problem then too-long lines.

I go back and forth - what I prefer, in that case, is more of a zoom layout - expanding with the text, giving control of proportions to the designer.

]]> By: Thud http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-701 Thud Fri, 22 Sep 2006 13:52:46 +0000 http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-701 Fixed-width sites are handy if you have a text-heavy site with simple navigation. Fluid-width sites fail when you don't have the content to support the use of screen real-estate. You end up with long scan lines and a lot of unbalanced white space. So weblogs are a great candidate for fixed-width (he says, even though his own is currently fluid). Fixed-width sites are handy if you have a text-heavy site with simple navigation. Fluid-width sites fail when you don’t have the content to support the use of screen real-estate. You end up with long scan lines and a lot of unbalanced white space. So weblogs are a great candidate for fixed-width (he says, even though his own is currently fluid).

]]> By: Joe Dolson http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-631 Joe Dolson Sun, 17 Sep 2006 14:00:11 +0000 http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-631 I've also used fixed-width, fixed-heights, etc. <code>em</code> based widths aren't something I've explored extensively (although I'm building one right now, as it happens), but I do like the way they maintain proportions. Still, assuming a considerate designer, the only reasons for fixed width seem to be designer-focused... I’ve also used fixed-width, fixed-heights, etc. em based widths aren’t something I’ve explored extensively (although I’m building one right now, as it happens), but I do like the way they maintain proportions.

Still, assuming a considerate designer, the only reasons for fixed width seem to be designer-focused…

]]> By: Mike Cherim http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-630 Mike Cherim Sun, 17 Sep 2006 13:29:00 +0000 http://www.joedolson.com/articles/2006/09/fixing-your-width-whats-the-optimal-size-for-a-site/#comment-630 I will use fixed width at times (and height on upper elements), especially if image control is important, and sometimes it is: The <a href="http://thompsoncenterassoc.org/" rel="nofollow">Thompson Center Association</a> site I built really requires it (760px width with a fixed height masthead). My favorite method is the way <a href="http://accessites.org" rel="nofollow">Accessites.org</a> is built in that it uses <code>EM</code>s for width which keeps proportion even better that of fixed-width sites in that the first couple of text enlargements don't have a big effect on the vertical size of elements due to text wrapping, etc. The thing to do is apply <code>max-width</code> as you noted. <code>Max-width</code> isn't supported by IE, so to make the whole thing work well in that browser you have to begin with a narrow enough <code>EM</code>-based width to allow the thing to grow (its two increase sizes) without expanding beyond the viewport width -- at least on 1024x768. Given this, to see it with a horizontal scrollbar the number of variables is increased: It must be IE, <em>and</em> 800x600 screen resolution or smaller, <em>and</em> the text must be enlarged. It's not a perfect method, but pretty close simply by limiting the possibilities that someone gets a horizontal scrollbar. If it wasn't for IE, <code>EM</code>s coupled with <code>max-width</code> would be just about perfect! Using Accessites as an example, it works and looks good from 640x480 right on up to whatever size in a <code>max-width</code>-supporting browser. Its keep the design really stable. Liquid really is best, but only <em>if</em> the developer develops the site knowing that design control will be left entirely to the user. This some might say is best, and I won't argue, but sometimes I do want some control. I can't help it. I will use fixed width at times (and height on upper elements), especially if image control is important, and sometimes it is: The Thompson Center Association site I built really requires it (760px width with a fixed height masthead).

My favorite method is the way Accessites.org is built in that it uses EMs for width which keeps proportion even better that of fixed-width sites in that the first couple of text enlargements don’t have a big effect on the vertical size of elements due to text wrapping, etc. The thing to do is apply max-width as you noted. Max-width isn’t supported by IE, so to make the whole thing work well in that browser you have to begin with a narrow enough EM-based width to allow the thing to grow (its two increase sizes) without expanding beyond the viewport width — at least on 1024x768. Given this, to see it with a horizontal scrollbar the number of variables is increased: It must be IE, and 800x600 screen resolution or smaller, and the text must be enlarged. It’s not a perfect method, but pretty close simply by limiting the possibilities that someone gets a horizontal scrollbar. If it wasn’t for IE, EMs coupled with max-width would be just about perfect! Using Accessites as an example, it works and looks good from 640x480 right on up to whatever size in a max-width-supporting browser. Its keep the design really stable.

Liquid really is best, but only if the developer develops the site knowing that design control will be left entirely to the user. This some might say is best, and I won’t argue, but sometimes I do want some control. I can’t help it.

]]>