OnTopic??Resolution

[Michael Tonelli]

Maybe I could've picked a different, possibly more appropriate NG, but I'm
not sure.

I'm sure I'll get a decent answer from those in this NG though.

When creating a web site, taking into consideration different resolutions,
is it best and/or industry standard to use pct. for images or create
something like...

if (screen.height >= 768 && screen.width >= 1024) {
document.write( "<img src='http://your-web-site-address-here.com/image.gif'
width=850 height=11 border=0>");
}
else {
if (screen.height == 600 && screen.width == 800) {
document.write( "<img src='http://your-web-site-address-here.com/image.gif'
width=600 height=11 border=0>");
}
else {
document.write( "<img src='http://your-web-site-address-here.com/image.gif'
width=475 height=11 border=0>");

.... etc.

I know there are many more resolutions, so that's one of the reasons why I
ask.

The main page of the site is an image, well mostly an image. with just a few
links (horizontally) at the bottom. This should all fit into one page.

If not the appropriate NG, I'm sure someone will kindly let me know,

Thanks,
Michael

[Richard Cornford]

Re: OnTopic??Resolu tion

Michael Tonelli wrote:[color=blue]
> Maybe I could've picked a different, possibly more
> appropriate NG, but I'm not sure.[/color]

You have posted javascript code and a scripted approach so that at leas
is on topic. The eventual solution is unlikely to be scripted so it is
probably to be found elsewhere.
[color=blue]
> I'm sure I'll get a decent answer from those in this
> NG though.[/color]

There is no harm in being optimistic :)
[color=blue]
> When creating a web site, taking into consideration different
> resolutions, is it best and/or industry standard to use pct.[/color]

Is "pct" percentages, referring to CSS styling of the image width and
height? Or percentages in the width and height attributes of the IMG
tag?

'industry standard' is not necessarily a good benchmark if it mans what
is normally/commonly done in (non-personal) web sites, because
relatively few of the people responsible for the creation of web sites
have any skills beyond the operation of a limited range of web-related
software products.

'best', on the other hand, depends entirely on what you are trying to
do, and why.
[color=blue]
> for images or create something like...[/color]

No, don't do that at all. CSS and javascript are optional technologies
that may be independently available or unavailable on the client, and
subject to some user configuration/constraints even when available.
Making page content dependent on an optional technology is a sure path
to unreliable outcomes.
[color=blue]
> if (screen.height >= 768 && screen.width >= 1024) {[/color]

The - screen.height/width - property most often (when supported) reports
the total dimensions of the desktop in pixels. That parameter is
unrelated to the size of the browser window. At best it may represent a
constraint on the maximum size of the browser window. Though the maximum
size of the browser window is itself no more than a constraint on the
size of the view/client area of the browser window. The browser window
must also accommodate the size/dimensions of window chrome and
alternative panels, which may vary with every user.

If you must use a script to determine the size of something based on the
user's view of a web page you should at least base that decision on the
view/client area dimensions. The group's FAQ shows code for that task,
though better algorithms are possible.
[color=blue]
> document.write( "<img
> src='http://your-web-site-address-here.com/image.gif'
> width=850 height=11 border=0>"); }[/color]

In valid HTML 4.01 the IMG element has a required ALT attribute that is
missing form your code.
[color=blue]
> else {
> if (screen.height == 600 && screen.width == 800) {[/color]

The first set of comparisons are greater than or equal, these are only
equals, leaving a range of desktop sizes between 600/800 and 768/1024
defaulting to the smaller image defined below. That is not a logically
consistent thing to be doing.
[color=blue]
> document.write( "<img
> src='http://your-web-site-address-here.com/image.gif'[/color]

So is this the same "image.gif" as above? Making this an exercise in
image scaling. Browsers are generally appallingly bad at scaling images.
[color=blue]
> width=600 height=11 border=0>"); }
> else {
> document.write( "<img
> src='http://your-web-site-address-here.com/image.gif'
> width=475 height=11 border=0>");
>
> ... etc.
>
> I know there are many more resolutions, so that's
> one of the reasons why I ask.[/color]

Browser window dimensions are extremely variable,
non-maximised/fullscreen windows are actually unlikely to be the same
size for the same user over two consecutive visits to a web site, let
alone across many visitors.

The most viable response to that variability is what is know a "fluid
design" and is mostly achieved with CSS. The CSS is designed to
constrain the way that the page contents flow within the container of
the browser window, but the fact that the contents are allowed to flow
accommodates an enormous range of browser window sizes.

Fluid design doesn't work that well with images but that is directly
because browsers are so appalling at scaling images.
[color=blue]
> The main page of the site is an image,[/color]

That is quite unusual in itself, and warrants some additional
explanation.
[color=blue]
> well mostly an image. with just a few links (horizontally)
> at the bottom. This should all fit into one page.[/color]

Everything will fit onto one page whatever you do, but some of those
pages may have scroll bars.
[color=blue]
> If not the appropriate NG, I'm sure someone
> will kindly let me know,[/color]

Javascript is almost certainly the wrong technology, but without knowing
exactly what you are doing and why there can be no additional advice on
a direction to take.

Richard.