«

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

<M wrote:

> 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

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

"<<M>>" <> wrote in
news:TJbld.96601$VA5.42500@clgrps13:

> 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.

--
Dave Patton
Canadian Coordinator, Degree Confluence Project
http://www.confluence.org/
My website: http://members.shaw.ca/davepatton/

In alt.html <<M>> said:

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

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


--
the facts and opinions expressed by brucies
l i t t l e v o i c e s
are not necessarily the same as those held by brucie.

"Dave Patton" <> wrote in message
news:Xns959FA44F88168mrzaphoddirectcaold@24.71.223 .159...
> "<<M>>" <> wrote in
> news:TJbld.96601$VA5.42500@clgrps13:
>
> > 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.

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

"brucie" <****@usenetshit.info> wrote in message
news:...
> 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

In article <0Odld.149309$df2.132560@edtnps89>, "<<M>>"
<> wrote:

> 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

--
<http://web0.greatbasin.net/~leo/>

"<<M>>" <> wrote in message
news:0Odld.149309$df2.132560@edtnps89...
> "Dave Patton" <> wrote in message
> news:Xns959FA44F88168mrzaphoddirectcaold@24.71.223 .159...
>> "<<M>>" <> wrote in
>> news:TJbld.96601$VA5.42500@clgrps13:
>>
>> > 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.
>
> 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.

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

"<<M>>" wrote 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

<<M>> wrote:

> 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?

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact