Maximum safe width for web pages?

[Jeff Thies]

Just use % widths on your tables instead of px. Surely that's not that

hard?

Many commercial sites use a graphical header. That will lock the minimum
width of whatever table you insert.

Personally, my designs will work at any resolution, and I don't use tables.

But I'm not paid to be a designer (I'm paid to work with designers). You
have to work with the reality that the design of a site is as important as
the content of the site for most clients.

The typical surfer visits large mainstream sites everyday that are fixed
width multiple column sites. That's the reality. And it works pretty well
because most people can increase the width of their browser window to
accomadate the 700 or so pixels of width. Years ago you saw this
standardized on 600 pixels for the VGA monitors of the time.

So, if you can, design for any resolution. If you can't, then a 750 pixel
or so width is going to fit right in with all those other fixed width sites.

Someday all this will change again when we have real multi column support.
Frankly, float: left columns will always be limited in their versatility
until there is float left that goes to the left margin without a clear.

Jeff

 

[Whitecrest]

You
have to work with the reality that the design of a site is as important as
the content of the site for most clients.

No matter if one considers this a good thing or a bad thing, it is a
reality thing you have to deal with.

The typical surfer visits large mainstream sites everyday that are fixed
width multiple column sites. That's the reality. And it works pretty well
because most people can increase the width of their browser window to
accomadate the 700 or so pixels of width. Years ago you saw this
standardized on 600 pixels for the VGA monitors of the time.

So, if you can, design for any resolution. If you can't, then a 750 pixel
or so width is going to fit right in with all those other fixed width sites.

Good advice.

 

[Toby A Inkster]

Many commercial sites use a graphical header. That will lock the minimum
width of whatever table you insert.

It needn't if you use it as a background image.

 

[Lauri Raittila]

Many commercial sites use a graphical header. That will lock the minimum
width of whatever table you insert.

That's why it is important not to wrap whole page in a table.

But I'm not paid to be a designer (I'm paid to work with designers). You
have to work with the reality that the design of a site is as important as
the content of the site for most clients.

But, most oftent it is just because someone is clueless.

The typical surfer visits large mainstream sites everyday that are fixed
width multiple column sites. That's the reality. And it works pretty well
because most people can increase the width of their browser window to
accomadate the 700 or so pixels of width. Years ago you saw this
standardized on 600 pixels for the VGA monitors of the time.

People don't want to do that.

So, if you can, design for any resolution. If you can't, then a 750 pixel
or so width is going to fit right in with all those other fixed width sites.

But this is hardly absolute. It makes no sence to force whole site to be
750px wide, if only thing that wide in page is header image, or worse, ad
banner.

 

[Marc Nadeau]

SBR a schtroumphé:

I'm not. I'm assuming they will have at LEAST resolution of
800x600. Judging by the statistics of my web site visitors, no
one is browsing my page with a lower resolution, so it's not
an assumption.

I have all kind of information about visitors (browser, os,
referrer, etc...) in my stats but never seen anything about
screen resolution or viewport size.

Which server and which statistical package do you use?

Just surprised and curious.

 

[Mabden]

SBR a schtroumphé:


I have all kind of information about visitors (browser, os,
referrer, etc...) in my stats but never seen anything about
screen resolution or viewport size.

Which server and which statistical package do you use?

Just surprised and curious.

Just so you guys know, some of us lurkers are finding value in this thread.
I have a "photo album" site and it was set to display 3 thumbnails across
which only works at 1024 or above. I have since added a small link to set
the thumbnails to 1-4 columns across so all the 640ers can view it better.
Vive la difference!

<shameless plug>
http://sharks.sitenook.com/index.asp?Cols=2
</shameless plug>

It just occurred to me that I should detect the screen width and change the
number of columns based on that.
Can anyone tell me how to detect the total screen width, when the user has
multiple monitors? MY little JavaScript function I just tried only gave me
the size of the current monitor.
Does anyone have more than 3 monitors?

 

[Lauri Raittila]

Just so you guys know, some of us lurkers are finding value in this thread.
I have a "photo album" site and it was set to display 3 thumbnails across
which only works at 1024 or above. I have since added a small link to set
the thumbnails to 1-4 columns across so all the 640ers can view it better.
Vive la difference!

<shameless plug>
http://sharks.sitenook.com/index.asp?Cols=2
</shameless plug>

Does not fit my window, unless I do something.
http://www.student.oulu.fi/~atlas/kuvat/Pikkujoulut/2003/index.html
This one does. It will also fill your window, whatever the size.

BTW, you really should disable that left side menu that is useless, at
least with these texts. It might be usefull if 57Chevy would be picture
of 57 chevy, but...

It just occurred to me that I should detect the screen width and change the
number of columns based on that.

Never occurred to you to let it flow? Never occurred that screen width
has absolute nothing to do with browser window client area, exept that it
is rare that latter is bigger.

Can anyone tell me how to detect the total screen width, when the user has
multiple monitors? MY little JavaScript function I just tried only gave me
the size of the current monitor.

Why would you need total screen width?

Does anyone have more than 3 monitors?

He never uses one browser window in more than 3 monitors, I bet.
IIRC, brucie send once URL to a picture with 5 monitors.

 

[Mabden]

Does not fit my window, unless I do something.
http://www.student.oulu.fi/~atlas/kuvat/Pikkujoulut/2003/index.html
This one does. It will also fill your window, whatever the size.

BTW, you really should disable that left side menu that is useless, at
least with these texts. It might be usefull if 57Chevy would be picture
of 57 chevy, but...

There is a link for "short menu" that eliminates the full menu, Mr Obvious.
BTW, the site is of "Sharks Statues" that were put up around San Jose (home
of the Sharks Hockey team) a little while ago. All the major cities have had
them - New York had Bulls, Florida had Dolphins, Berlin had Bears, Kentucky
had Horses. Get out once in a while - it's called ART.

Never occurred to you to let it flow? Never occurred that screen width
has absolute nothing to do with browser window client area, exept that it
is rare that latter is bigger.

That occurred to me also, as did dynamically changing the thumbnails. But it
didn't look good when the thumbnails were of different sizes, so I started
forcing the columns. Also, randomly changing the image sizes was really
distorting the picture and also looked ugly. It is only coincidence that the
thumbnails are now all the same size (as I went through and cropped and
sized them all), I expect that to change on other pages.

BTW, this page is written in a semi-generic way. I can drop images into a
directory and they are automatically added to the list. If there is no
thumbnail, it resizes the large image down - which causes distortions and
ugly wrapping. So my choices were made on what looks good today, but will
still work on other images in the future.

For this site I chose 3 across as a nice look on a 1024 screen. The
discussion here made me decide to change that so the people with small
screens can choose 1 or 2 columns to view the thumbnails without scrolling.

Why would you need total screen width?

In order to add more columns, of course. Did you even read the question? I
now have 1-4 columns, which helps the people with smaller, or slightly
larger screens to view the page without having to scroll sideways. If you
stretch the page across two monitors that are 1024 you have room for at
least 6 columns. If you have three monitors (you know, for the total
immersion simulation games) you could really stretch it out. So no matter
what number I pick 1-5, 1-7, 1-20, etc. it would be wrong for somebody. If I
could detect total screen width, I could calculate a "best fit" number of
columns and a "max fit" number.

Why not try to think for a moment, before posting these inane questions?

He never uses one browser window in more than 3 monitors, I bet.
IIRC, brucie send once URL to a picture with 5 monitors.

Well, that's not for ME or YOU to decide, is it? If one wants to display my
lovely sharks in full panorama, why should I stop them?

Now that I have answered all your impertinent questions, do you have
anything helpful to say? Or do you just like to hear yourself talk?

 

[Whitecrest]

But, most oftent it is just because someone is clueless.

Most often in this forum, it is the developer that is clueless when it
comes to marketing a product. A developer may know how to make everyone
see something, but that may not be what the client is looking for.

But this is hardly absolute. It makes no sence to force whole site to be
750px wide, if only thing that wide in page is header image, or worse, ad
banner.

When it works for 95% of the people visiting, and it looks the way you
want it to. Why settle for a less appealing look just to get the other
5% when that same less appealing look may cost you more than you gain.

Sorry, but as much as some of you want to ignore it, companies spend
millions to learn how to present their product on TV, in print, and on
the web. You are just unwilling to accept they might be right
sometimes.

 

[Lauri Raittila]

Does not fit my window, unless I do something.
http://www.student.oulu.fi/~atlas/kuvat/Pikkujoulut/2003/index.html
This one does. It will also fill your window, whatever the size.

BTW, you really should disable that left side menu that is useless, at
least with these texts. It might be usefull if 57Chevy would be picture
of 57 chevy, but...

There is a link for "short menu" that eliminates the full menu, Mr Obvious.[/QUOTE]

I know. But it is not on by default. Should have said, disable menu by
default.

BTW, the site is of "Sharks Statues" that were put up around San Jose (home
of the Sharks Hockey team) a little while ago. All the major cities have had
them - New York had Bulls, Florida had Dolphins, Berlin had Bears, Kentucky
had Horses. Get out once in a while - it's called ART.

What I meaned, is that you can't tell from name what image is behind
link. Names are names of artwork, they don't really describe them. If
there was actual image on 57Chevy, I would leaven the site immidiately,
OTOH, I liked those sharks.

That occurred to me also, as did dynamically changing the thumbnails. But it
didn't look good when the thumbnails were of different sizes, so I started
forcing the columns.

Do you get that effect on my website? See, it was solved. How does that
differ? One problem is that it is impossible to get whole page centered
in Mozilla. (not that it is done for Opera or IE in my page either.)

Also, randomly changing the image sizes was really
distorting the picture and also looked ugly.

Yes, that is not an option. But you can change space around the image
whiout problems.

It is only coincidence that the
thumbnails are now all the same size (as I went through and cropped and
sized them all), I expect that to change on other pages.

Have a look, not all thumbnails are same size on my page. I have limit
for height, and another for width. In fact, practically all images that
are not cropped by default settings have different size thumbnails.

BTW, this page is written in a semi-generic way. I can drop images into a
directory and they are automatically added to the list. If there is no
thumbnail, it resizes the large image down -

Same in my gallery. I can also drop in directories, and they are also
automatically added to site.

which causes distortions and ugly wrapping.

Well, not on my gallery. At least I haven't been able to spot that, using
IE5.5, 6, Mozilla 1+, Opera 5+, KHTML.

Unfortunately this does not work on old, non CSS enabled browsers. It is
possible using table layout in them too trough.

In order to add more columns, of course. Did you even read the question? I
now have 1-4 columns, which helps the people with smaller, or slightly
larger screens to view the page without having to scroll sideways. If you
stretch the page across two monitors that are 1024 you have room for at
least 6 columns.

As I have on my 1280*1024 monitor already. My monitors are 50cm away from
one another, and other is 19", other 15". I wouldn't like to use them
both for displaying web page.

If you have three monitors (you know, for the total
immersion simulation games) you could really stretch it out. So no matter
what number I pick 1-5, 1-7, 1-20, etc. it would be wrong for somebody. If I
could detect total screen width, I could calculate a "best fit" number of
columns and a "max fit" number.

Well, you don't need total screen width, you need total area of client
browser. Why don't you try my page on big window?

Of course, you can already make it possible to have 20 columns, if your
code is sencible, that is possible already. The problem is to know if
they fit clients browser. There is no problem, if images will be laid out
to entire canvas automatically.

Why not try to think for a moment, before posting these inane questions?

Exactly. You managed to miss all my points.

Well, that's not for ME or YOU to decide, is it? If one wants to display my
lovely sharks in full panorama, why should I stop them?

Well, that can be done automatically, whiout using any JS, as my example.
Supposing client has made his browser big enaugh. You can't and shouldn't
even try to change clients window.

Now that I have answered all your impertinent questions, do you have
anything helpful to say? Or do you just like to hear yourself talk?

Actually, if there was way to detect resolution (dpi) and window size, it
would enable your script to deside optimal size for thumbnails and big
images. For latter, ability to detect bandwith would be useful too. AFAIK
thise aren't possible.

 

[Mark Parnell]

So no matter
what number I pick 1-5, 1-7, 1-20, etc. it would be wrong for somebody.

Did you not read Lauri's post? Don't set a number of columns at all.
Just float all the images and let them flow automatically. Then they
will automatically adjust to the right number of columns to fit your
visitor's available browser canvas.

 

[Mabden]

Did you not read Lauri's post? Don't set a number of columns at all.
Just float all the images and let them flow automatically. Then they
will automatically adjust to the right number of columns to fit your
visitor's available browser canvas.

My answer was:

"That occurred to me also, as did dynamically changing the thumbnails. But
it
didn't look good when the thumbnails were of different sizes, so I started
forcing the columns. Also, randomly changing the image sizes was really
distorting the picture and also looked ugly. It is only coincidence that the
thumbnails are now all the same size (as I went through and cropped and
sized them all), I expect that to change on other pages.

BTW, this page is written in a semi-generic way. I can drop images into a
directory and they are automatically added to the list. If there is no
thumbnail, it resizes the large image down - which causes distortions and
ugly wrapping. So my choices were made on what looks good today, but will
still work on other images in the future.

For this site I chose 3 across as a nice look on a 1024 screen. The
discussion here made me decide to change that so the people with small
screens can choose 1 or 2 columns to view the thumbnails without scrolling.
"

 

[Beauregard T. Shagnasty]

Quoth the raven named Mabden:

My answer was:

For this site I chose 3 across as a nice look on a 1024 screen. The
discussion here made me decide to change that so the people with
small screens can choose 1 or 2 columns to view the thumbnails
without scrolling.

As has been said, don't set any particular number. Why make the
visitor work to see a nice layout? Do something like this, which
doesn't care how narrow or wide your browser is:

http://www.fingerlakesbmw.org/visual/flrally2003.php

 

[Wÿrm]

"That occurred to me also, as did dynamically changing the thumbnails. But
it
didn't look good when the thumbnails were of different sizes, so I started
forcing the columns. Also, randomly changing the image sizes was really
distorting the picture and also looked ugly. It is only coincidence that the
thumbnails are now all the same size (as I went through and cropped and
sized them all), I expect that to change on other pages.

Did you even look example url Lauri gave?
(http://www.student.oulu.fi/~atlas/kuvat/Pikkujoulut/2003/index.html)

Thumbnails there were not all SAME size.

Only CONTAINER for each thumbnail were same size, thumbnails inside each
container could be any size up to almost container size itself.

Because each container were same size, they happily line up to fit browser
canvas when you change window size. Open that url and try it yourself.
Maximize window, all line up happily on screen, make window smaller,
thumbnail containers arrange themselves again, happily without you
specifying anything, all just depending from your browser canvas size.

BTW, this page is written in a semi-generic way. I can drop images into a
directory and they are automatically added to the list. If there is no
thumbnail, it resizes the large image down - which causes distortions and
ugly wrapping. So my choices were made on what looks good today, but will
still work on other images in the future.

Why would not Lauri's example work future with different size thumbnails
when it was not limited by any thumbnail size? Only "Limiting" factor is
container size that contain those thumbnails.

 

[Brendan Taylor]

Sorry, but as much as some of you want to ignore it, companies spend
millions to learn how to present their product on TV, in print, and on the
web. You are just unwilling to accept they might be right sometimes.

I am a little skeptical that people will be turned off a product if its
website isn't laid out to the pixel.
I mean, if it were that important then you'd do up your websites in
Photoshop and use an image map for links.

 

[Whitecrest]

As has been said, don't set any particular number. Why make the
visitor work to see a nice layout? Do something like this, which
doesn't care how narrow or wide your browser is:
http://www.fingerlakesbmw.org/visual/flrally2003.php

Because, to me, it looks like crap when compared to this site.

http://www.premierphotographer.com/

YMMV

 

[Whitecrest]

I am a little skeptical that people will be turned off a product if its
website isn't laid out to the pixel.
I mean, if it were that important then you'd do up your websites in
Photoshop and use an image map for links.

I guess in Bizzaro-world that statement would be true. Here in the real
world we like to make web sites dynamically.

 

[Beauregard T. Shagnasty]

Quoth the raven named Whitecrest:

Because, to me, it looks like crap when compared to this site.

http://www.premierphotographer.com/

Weren't we discussing floating thumbnails? Your link is a hard 800px
page, with three thumbs per row. At less than 800, you must scroll,
and at 1024 there's all this extra space at the right.

Why do you think my page is crap and this premierphotographer is not?

YMMV

I 'spose so.

 

[Mabden]

I guess in Bizzaro-world that statement would be true. Here in the real
world we like to make web sites dynamically.

Image maps are bad for sight-impaired people.

 

[Mabden]

Did you even look example url Lauri gave?
(http://www.student.oulu.fi/~atlas/kuvat/Pikkujoulut/2003/index.html)

Thumbnails there were not all SAME size.

Only CONTAINER for each thumbnail were same size, thumbnails inside each
container could be any size up to almost container size itself.

Because each container were same size, they happily line up to fit browser
canvas when you change window size. Open that url and try it yourself.
Maximize window, all line up happily on screen, make window smaller,
thumbnail containers arrange themselves again, happily without you
specifying anything, all just depending from your browser canvas size.



Why would not Lauri's example work future with different size thumbnails
when it was not limited by any thumbnail size? Only "Limiting" factor is
container size that contain those thumbnails.

You are right, that site works well, and it crossed two monitors very well.

My initial design involved thumbnails of _various sizes_ that were NOT
resized by any container. So, you'd have a couple of 100x100 images next to
a 300x256 image next to a 200x50 image, etc. With uncontrolled wrapping,
when these images lined up there were lines that would have three images,
one image, whatever. It was very ugly. There were big "holes" and nasty
scrolling effects. I wanted something that would let the user drop any sized
thumbnails they want into a directory and have the page automagically make
them look nice. It was meant to be a script I could give to my girlfriend
and have her drop a bunch of images into a folder and have it look somewhat
decent. I expected to have no control over image size or thumbnail size, so
I tested it with many weird sizes and it looked like shit. So I ended up
forcing the number of columns. No I allow the user to select a different
number of columns, but all of the above still applies.

Plus, I hadn't been to this wonderfully helpful newsgroup to discover tips
and tricks from all you wonderful experts.

So, if you can point me to a good way to do the above goals WITHOUT resizing
the thumbnails, and allowing different sizes (extremely different sizes!)
that still looks good, then I will thank you. Otherwise, I'm kinda getting
tired of the whole "let it wrap, dude" argument. Sorry if that's rude.