A simple question

Tony_photoplus · 06-21-2007

Just a simple question, but will I get loads of different answers. We shall see.
What is the best size for a website 800 x 600 - 768 x 1024 or some other size?

Tony_photoplus

**tamlin** · 06-21-2007

The "best" size for a website is to make it (as far as is possible) size-independent.

chuggs · 06-21-2007

Isn't this best done by using percentages for a layout instead of fixed pixel dimensions? If I recall correctly, doing this ensure that the site will look as similar as possible from one machine to the next, regardless of individual settings. I mean, I know you can't do this for images (or at least I don't think you can) but you would for your table widths, would you?

**tamlin** · 06-21-2007

Quote:

Originally Posted by chuggs

Isn't this best done by using percentages for a layout instead of fixed pixel dimensions? If I recall correctly, doing this ensure that the site will look as similar as possible from one machine to the next, regardless of individual settings. I mean, I know you can't do this for images (or at least I don't think you can) but you would for your table widths, would you?

Yes - that's what I was getting at. I'm sure one of our resident web gurus will be able to explain the concept more fully (Mike - where are you?)

Tony_photoplus · 06-21-2007

Quote:

I'm sure one of our resident web gurus will be able to explain the concept more fully (Mike - where are you?

Yes please I am lost. Look forward to seeing how and what etc.

disco-s2 · 06-21-2007

The best way to do it is to make it a percentage so that different browsers on different pc's dont view it at one set size otherwise it looks out of proportion and could look right on some and not others.
Cheers
Disco

*notjustgraphics* · 06-21-2007

Actually, elastic website layouts are starting to dissappear... somewhat!

However, if you base your layout on percentages, you can control the width of your divisions in proportion to the overall window size, and it will adapt as the user sizes or resizes their viewing window...

This obviously can cause your site to present some very broken and chaotic layouts when the site is viewed through a non-standard window or a window that is too small (less than 800x600).

For instance, if you create a div thats 25% wide to hold your text, it's great if it's 25% of 1024px ( 256px) but what if the window is 640px (25% = 160px) or smaller... obviously, the same amount of text won't fit in a smaller space, unless of course the text changes size as well...

This can be achieved by using the 'em' unit instead of 'px' for text and margins... heres a great write-up on the matter: Sizes In Webdesign: Em Vs. Px

Using css, it is possible to achieve a fairly liquid design that expands and contracts AND resizes fonts with the size of the window, however, special care has to be taken with images, and the effectiveness of background images becomes limited. Remember all but the most basic layouts will have a breaking point.

Here is a good general description in simple terms for those who care: Liquid Design - A Step Forward To Make Your Website Accessible - Accessible Web Design

As for creating a site based on a liquid layout, here are some good starting points:

Liquid Designs
What is Liquid Design? [Design Practice]

here's a gem:

Create a simple liquid layout - .net magazine

If you encounter any specific questions, i'll be happy to help where I can.

Mike.

Jolt · 06-22-2007

I'm not a fan of liquid designs unless the site warrants it. Most often code for 770px max width. It's far more elegant and usable than things that move based on how wide the window is.

Tony_photoplus · 06-22-2007

Thanks for the information, shall have to do some reading. Funny though since setting my comp to 1024x768 there are many sights I have to use my webzoom to fill the screen. So if you get it wrong most have zooms anyway. But, I am hoping to re-design my web site this year. Too busy with this house at the moment though.

*notjustgraphics* · 06-22-2007

I agree with Jolt...

Unless you're trying to deliver a maximum amount of text-based inforation, it's generally better to maintain control of the site design.

Because a large percentage (near 30%) of users still use 800x600 dislay resolution (generally older machines or less frequent computer users) it's a good idea to code to a max width of 770 (actually i prefer 769px).

BioRUST was this way until just recently when M0g made the decision to exand to a 1024 screen width (In which case you would design to 993px wide).

In my opinion, static with, dynamic length websites work best from a design point-of-view... if design and presentation is less important the content delivery, a liquid design will give users with a larger screen res access to more information 'above the fold' so to speak.

Consider your market too... in BioRUST's case, a service intended for Design oriented individuals, the percentage of users at 800x600 is likely to be very very low, which was considered before moving to 1024x768.

I almost bought a monitor and video card yesterday that would allow a screen width of 3072px....

lol, imagine a 800px website on that

Mike.

Tony_photoplus · 06-22-2007

Just to add to the question what would be the maximum length? I know how long is a piece of string I suppose....
Does a long long page hold the attention of the reader, or does a little interaction by clicking onto another page break the monotony? Like the string it has depend on the reader, Derrr wad ee zay mate?

*notjustgraphics* · 06-22-2007

Thats a good question Tony... and of course theres no set answer...

Generally, your content will dictate that to you somewhat...

Take BioRUST for instance... in the forums, there could be dozens or more repsonses to a thread, and the vbulletin software is configure to auto-paginate (next page) them when the page gets too long... this is configured by the site-owner.

Generally, the length should comfortably fit the content... a multi-page article might cause the reader to lose interest, but a page that scrolls on forever with dozens of articles could cause the same effect...

If you use left or right navigation, it can help to define a reasonable bottom extent for your site...

I know this isn't much help...

Sorry,

Mike.

Tony_photoplus · 06-23-2007

Thanks Mike, what you say makes sense.

Tony_photoplus

Jolt · 06-24-2007

Max length is never a concern for me. But page "fold" is. If you factor in that on an 800x600 screen the max width is 770px, and the max height is around 450px before scrolling is needed. I just try and remember anything that needs to be immediately seen on a page should be in the top 450px of that page.

Tony_photoplus · 06-25-2007

Thanks for the Jolt, I have made a note.