Arghhh 800*600

How?

[phidentity]

I designed a site in a high resolution, looks great.

Went into 800*600 mode, and the text in my content are is like this:

hey
there
mate
how
are
you

And the right content bar covers it.

I tried fixing the layers to use % only, and then I go into the high res again, and it looks stupid...

How do I make it work in all resolutions?

Jon

[zoobie]

Design with a css container for 800x600 with it centered for higher resolutions. This way, there's never any bottom horiz scroll bar and it always looks good. }:^)

[phidentity]

How do I make it centered for higher res?

Cheers

Jon

[Purple Martin]

Design with a css container for 800x600 with it centered for higher resolutions. This way, there's never any bottom horiz scroll bar and it always looks good. }:^)

Better still, create a LIQUID design.

How do I make it centered for higher res?

Put the whole thing in a div with { position: absolute; width: 800px; left: 50%; margin-left: -400px; }

[zoobie]

I think in the near future, we'll see the 1200x971 as the standard.

[grahamstewart]

You don't have to keep changng res to test your design. Just resize the browser window. There are favelets available for IE and Opera that will resize the browser to specific sizes.

How wide is your content sidebar?
The easiest solution is often to use a fixed width for the side bar (say 200px) and then allow the rest of the content to be fluid.

[phidentity]

Thanks all - all great advice!

Jon

[Chicken Juggler]

I always optimize for 750 because my site has to look good on my bosses computer which is 800x600

[isitreal]

Design with a css container for 800x600 with it centered for higher resolutions. This way, there's never any bottom horiz scroll bar and it always looks good.

As noted, to avoid the bottom scroll bar using absolute sizing, you have to size it 750px or so since the right side scroll bar of the browser window takes up around 30-40px.

I used to check the screen dimensions of visitors and log them, it ran average around 50% at 800x600, developers and designers tend to run far higher resolutions than average and so should never be considered as representitive of the standard user.

There's also an interesting question of how many words per line the human brain works best with, over several thousand years we came up with around 15-20, that's why books generally have that, and it's also why newspaper columns exist. This is something I haven't seen discussed in these forums, but it's not trivial, readability is after all the point of writing something, and it's the main reason I never use liquid layouts.

Whether or not to use a liquid layout just depends on how much control you want of the pages, but liquid layouts run into lots of problems when the viewing area is very small or very large, since IE doesn't support minwidth etc that makes sizing things like nav bars relatively not a very good idea.

[zendak]

You don't have to keep changng res to test your design. Just resize the browser window. There are favelets available for IE and Opera that will resize the browser to specific sizes.

If you're using Mozilla and/or Firebird, you might want to check out Chris Pederick's Web Developer extension [chrispederick.myacen.com]. Lots of really useful features, including browser resizing to typical resolutions plus custom dimensions.

[ram_mac]

A favelet that resizes your browser to whatever size you want, just replace the asterisks with your preferred size.

just add it to your bookmarks list in the URL field

javascript:window.resizeTo(*,*)