Different screen resolutions

[Guest]

The few sites I've designed have been "optimized" for an 800 * 600 display.
Some of them have a graphic banner at the top, usually 800 px wide. How do
the experienced ones here handle the layout for people who may view the site
at 1024 or greater? i.e. do you centre the graphic and accept white space on
either side, put in a table with a coloured cell background that "reveals"
itself at higher rez, design multiple sites for different rez, avoid the
problem by not using size-specific graphics. . .

Opinions and ideas?

M

 

[David Dorward]

The few sites I've designed have been "optimized" for an 800 * 600
display.
http://www.allmyfaqs.com/faq.pl?AnySizeDesign

Some of them have a graphic banner at the top, usually 800 px
wide. How do the experienced ones here handle the layout for people who
may view the site at 1024 or greater?

I tend to use two background images, one on a child element of the other.
The parent element has a horizontally tiling image that lines up with a
non-repeating left or right aligned background image on the child. The
transition is fairly smooth, it would probably be better if I were more
expert with graphics utilities.

put in a table

http://www.allmyfaqs.com/faq.pl?Tableless_layouts

 

[Dave Patton]

The few sites I've designed have been "optimized" for an 800 * 600
display. Some of them have a graphic banner at the top, usually 800 px
wide.

In other words, even for your 'target audience', running their
desktops at 800x600, you intend to force horizontal scrollbars
on them? The browser viewport in a maximized browser, on a system
with a desktop of 800x600, will almost never be 800 pixels wide.

How do the experienced ones here handle the layout

Fluid design.

 

[brucie]

The few sites I've designed have been "optimized" for an 800 * 600 display.

http://allmyfaqs.com/faq.pl?AnySizeDesign

 

[Guest]

In other words, even for your 'target audience', running their
desktops at 800x600, you intend to force horizontal scrollbars
on them? The browser viewport in a maximized browser, on a system
with a desktop of 800x600, will almost never be 800 pixels wide.

Gosh thanks for that info. Not relevant to my question but I get what
you're saying. I should have been more explicit -- my banner is optimized
for an 800 px screen, not actually that wide.

Fluid design.

Every ng has to have its share of useless goofs and I guess you're one of
them for this ng.
I'm looking for experienced guidance and I get "fluid design" from you.
I think I can safely strike you from my list of helpful resources here.


M

 

[Guest]

In alt.html <<M>> said:
http://allmyfaqs.com/faq.pl?AnySizeDesign

Thanks for the info. It'll take me sometime to work through the material.

My problem is that when I render my page layout with CSS, not everyone sees
it correctly in their browsers. From my -- admittedly limited -- research on
CSS text formatting appears consistent across browsers, but there are
differences in how layout elements are rendered between different browsers
and even between different browser versions. Otherwise, I'd love to use CSS
totally. (You can refer to my earlier post in this ng for a specific example
of a page I tried with CSS. My IE6 and Firefox on Win98SE render it
perfectly. Others using IE6 on XP see it jumbled as do some Mac user friends
of mine.)

Even then CSS doesn't solve the banner graphic issue as I understand it. At
a different resolution the banner won't change size to match so that leaves
me with the same problem. Do I "float" the graphic so that it re-positions
at higher rez, or do I fix it absolutely? And when the screen resizes, what
do I do with the extra "real estate" across the screen?

Right now I essentially use variations of David's solution above but was
wondering if anyone had a different take on the matter. I've seen the odd
sight that has a link for different resolutions where graphics are resized
accordingly but that's an ungainly solution to me.

M

 

[Leonard Blaisdell]

Every ng has to have its share of useless goofs and I guess you're one of
them for this ng.

Oh, Hell no!

I'm looking for experienced guidance and I get "fluid design" from you.

The experienced posters in this newsgroup just keep pushing it. Can't
fathom why.

I think I can safely strike you from my list of helpful resources here.

Now you'll get the goofs.

leo

 

[C A Upsdell]

Gosh thanks for that info. Not relevant to my question but I get what
you're saying. I should have been more explicit -- my banner is optimized
for an 800 px screen, not actually that wide.


Every ng has to have its share of useless goofs and I guess you're one of
them for this ng.
I'm looking for experienced guidance and I get "fluid design" from you.
I think I can safely strike you from my list of helpful resources here.

Fluid design was excellent advice. Ignore it at your peril.

 

[Lois]

in part:
: Even then CSS doesn't solve the banner graphic issue as I
understand it. At
: a different resolution the banner won't change size to match so
that leaves
: me with the same problem. Do I "float" the graphic so that it
re-positions
: at higher rez, or do I fix it absolutely? And when the screen
resizes, what
: do I do with the extra "real estate" across the screen?

Maybe the banner can be fluid too to a degree. A URL to the page
would help.

I have a sort of fluid header at www.wordsweave.com. The main image
is left-aligned, and a secondary one fills the rest of the space,
whatever that is. Would something like that work for you?

Lois

 

[Toby Inkster]

How do the experienced ones here handle the layout for people who may
view the site at 1024 or greater?

By creating websites that are canvas-size-agnostic.

http://hardcandy.org/
Looks fine at 544x372 (WebTV size) and looks fine at 1600x1200 and even
higher.

It's really not hard. An HTML page is fluid "by default" -- the only
things that can stop it being fluid are design decisions made by the
author -- in particular when setting widths.

If you want your page to remain fluid, think carefully before making
design decisions -- especially ones regarding widths. When you're about to
set a width, think:

- Do I need to specify a width at all? Can I leave out the width
entirely and let the user's browser calculate the best width?

- If I do need to specify a width, can I specify it in percentage
terms instead of an absolute width?

- If I can't specify a width in percentage terms, can I at least
specify the width in em units instead of pixels, so to help the
page adjust to user font-size changes?

 

[Matthew Superstar Swass]

If you want a banner to span the screen at any screen res, one great method is
to design it so it can be split up into sections with spacers that increase
their width as the browser size does.

For instance if the banner was originally one single image layout like...

[photo][logo][photo]

and that worked on 800x600, you would then split the image and insert spacers
with the width set at 100% on them.

[photo][spacer][logo][spacer][photo]

This clearly will not work with just any banner design though, but if you start
from scratch you can design something that works.

Here's code for it that will work. Just change the TD width where necessary to
your images width. Also IMG height of the spacers...

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%><TR><TD WIDTH=8><IMG
SRC=image1.gif></TD><TD><IMG SRC=spacer.gif HEIGHT=8 WIDTH=100%></TD><TD
WIDTH=8><IMG SRC=image2.gif></TD><TD><IMG SRC=spacer.gif HEIGHT=8
WIDTH=100%></TD><TD WIDTH=8><IMG SRC=image3.gif></TD></TR></TABLE>

If you find that the specers are creating way too much space, you could do
something like...

[photo][logo][photo][spacer][photo?]

 

[brucie]

In alt.html Matthew Superstar Swass said:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%><TR><TD WIDTH=8><IMG
SRC=image1.gif></TD><TD><IMG SRC=spacer.gif HEIGHT=8 WIDTH=100%>

what a pile of shit.

 

[Sybren Stuvel]

My problem is that when I render my page layout with CSS, not
everyone sees it correctly in their browsers.

Make sure you acknowledge the difference between "not correct" and
"just a bit different".

From my -- admittedly limited -- research on CSS text formatting
appears consistent across browsers, but there are differences in how
layout elements are rendered between different browsers and even
between different browser versions.

That shouldn't be a problem. That's only an issue if you want your
page to look to-the-pixel exactly the same as your design. That is
something impossible - if you want that, design for paper and not for
the web.

Sybren

 

[Karl Core]

Here's code for it that will work. Just change the TD width where
necessary to
your images width. Also IMG height of the spacers...

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%><TR><TD
WIDTH=8><IMG

Please refrain from ever giving HTML advice again.

-Karl

 

[Guest]

Make sure you acknowledge the difference between "not correct" and
"just a bit different".

No this was grossly scrambled.. The text and the banner all wound up jammed
together at the top of the page. It's bizarre because it looked fine on my
version of IE6 on Win98. (Looked fine in my Firefox too). Another reported
it looked fine on her system too. However, my friend's IE6 / XP combo
scrambled it. Bad enough to worry about different browsers, different
version numbers of the same browser but now we gotta worry about the OS
too?! (BTW, several mbrs here reported it looked fine on their various
versions of Opera, Mozilla, etc but others reported it looking scrambled on
their IE6 as well.)

One of the other members here pointed me off to several articles in an
effort to be genuinely helpful. One such article described the incredible
convolutions one Webmaster went through to ensure his 100% CSS site was
compatible with the most popular browsers out there. It involved
Javascript-sniffing, multiple CSS sheets, tweaks, etc. It did nothing to
sell me on the virtues of using CSS for layout. CSS is supposed to be easy
and seems to be anything but.

M

 

[Guest]

in part:
I have a sort of fluid header at www.wordsweave.com. The main image
is left-aligned, and a secondary one fills the rest of the space,
whatever that is. Would something like that work for you?

That seems to be the common answer and the one I had thought of myself. I
will probably go with something like that. Thanks.

M

 

[Guest]

It's really not hard. An HTML page is fluid "by default" -- the only
things that can stop it being fluid are design decisions made by the
author -- in particular when setting widths.

Understand you. My question was more to do with aesthetics. Right now, I've
left my banner left-aligned. At higher rez, that opens up wasted real estate
to the right that I want to "fill" with something that still pleases the
eyes. My banner is a photo, not suitable for tiling.

M

 

[Guest]

If you want a banner to span the screen at any screen res, one great method is
to design it so it can be split up into sections with spacers that increase
their width as the browser size does.

Thanks. That's a good idea. It won't work in this particular case, but I'll
keep it for future ref.

M

 

[Michael Winter]

[snip]

It involved Javascript-sniffing, multiple CSS sheets, tweaks, etc.

Which article was that? I'm intrigued. By the way, browser detection by
virtually any means is flawed. Too many vendors make determined attempts
to spoof themselves for it to be reliable.

[snip]

CSS is supposed to be easy and seems to be anything but.

CSS *is* easy. It's browser bugs that make things difficult. In my
experience, IE causes the most problems, but older versions of probably
every browser make a contribution.

Mike

 

[Guest]

To Dave Patton (& his fans)

You may think that simply putting down the phrase "fluid design" makes you
seem Buddha-like where a few vague words are meant to imply vast wisdom. It
doesn't. You'll simply come off as a git of limited knowledge trying to fake
it. (I checked out your page. . .)

Something more specific like an example website, some sample code, pointers
to a helpful article etc. would be useful. See the rest of this thread for
examples.

FWIW


M