What is the best web site layout?

[delerious]

Hi,

I am designing a web site that will that showcase a bunch of vacation
pictures. It will have a banner and a navigation menu (consisting of 13
rectangular images that can be clicked). I am considering a few different
layouts:

- Banner on top, with the navigation menu immediately below it. The problem
with this layout is that the menu would be about 770 pixels wide, since there
are 13 items in it. Many users would have to maximize their browser window to
keep the horizontal scroll bar from appearing.

- Banner on top, with the navigation menu below it along the left side. The
problem with this layout is that there would be a column of empty space (about
120 pixels wide -- the width of the menu) down the page below the menu. This
may not be too attractive.

Those two layouts also have the problem of the user needing to scroll all the
way back up to the top of the page to get to the menu. Would it be better to
use CSS and position:fixed to simulate frames (with the banner on top and the
menu along the left side)? That way the navigation menu would always be
visible and there wouldn't appear to be too much wasted space under the menu.
But then the banner (which is about 90 pixels high) would take up some browser
real estate.

What do you think is the best layout?

Thanks for any input.

[rf]

<de*******@no.spam.com> wrote in message
news:3f***************@news.md.comcast.giganews.co m...

Hi,

I am designing a web site that will that showcase a bunch of vacation
pictures. It will have a banner and a navigation menu (consisting of 13
rectangular images that can be clicked). I am considering a few different
layouts:
Fine.
- Banner on top, with the navigation menu immediately below it. The problem with this layout is that the menu would be about 770 pixels wide, since there are 13 items in it. Many users would have to maximize their browser window to keep the horizontal scroll bar from appearing.
Er, why. Organise the menu so that when the canvas becomes too narrow the
menu flows onto two (or more) lines.
- Banner on top, with the navigation menu below it along the left side. The problem with this layout is that there would be a column of empty space (about 120 pixels wide -- the width of the menu) down the page below the menu. This may not be too attractive.
True. There are any number of sites out there that have that 120 (or
whatever) pixels of wasted space to the left of the content.

Those two layouts also have the problem of the user needing to scroll

all the way back up to the top of the page to get to the menu.
Most browsers have a key to do this. It is usually the Home key. Most users
know how to use this key.
Would it be better to
use CSS and position:fixed to simulate frames
This does not work with IE (the most popular^H^H^H^H^H used browser).
(with the banner on top and the
menu along the left side)? That way the navigation menu would always be
visible and there wouldn't appear to be too much wasted space under the menu. But then the banner (which is about 90 pixels high) would take up some browser real estate.

What do you think is the best layout?

Simple. No tricks.

Cheers
Richard.

[Nico Schuyt]

de*******@no.spam.com wrote:

I am considering a few different layouts: - Banner on top, with the navigation menu immediately below it. The
problem with this layout is that the menu would be about 770 pixels
wide, since there are 13 items in it. Many users would have to
maximize their browser window to keep the horizontal scroll bar from
appearing.
Not ideal indeed. Try smaller pictures.
- Banner on top, with the navigation menu below it along the left
side. The problem with this layout is that there would be a column
of empty space (about 120 pixels wide -- the width of the menu) down
the page below the menu. This may not be too attractive.
No problem IMO
Those two layouts also have the problem of the user needing to scroll
all the way back up to the top of the page to get to the menu.
Some people know how to use the Home and End keys :-)
Would
it be better to use CSS and position:fixed to simulate frames (with
the banner on top and the menu along the left side)?
Be aware of the fact that often javascript is applied. Consequence is that
there is no menu at all when js is disabeled:
http://www.mark.ac/help/sticky.html
That way the
navigation menu would always be visible and there wouldn't appear to
be too much wasted space under the menu.
Like you say *appear* :-)
But then the banner (which
is about 90 pixels high) would take up some browser real estate.
Not necessarely: http://www.nicoschuyt.nl/test/fixed_menu.htm
The banner scrolls out of sight.
What do you think is the best layout?

I myself prefer a basic design with menu left (in addition repeat the menu
at the bottom on large pages) and content right

Good luck,
Nico

[Stephen Poley]

On Mon, 03 Nov 2003 08:50:41 GMT, de*******@no.spam.com wrote:

It will have a banner and a navigation menu (consisting of 13
rectangular images that can be clicked).
Does it need to be that many? 7 or 8 probably makes for a more
reader-friendly layout.
I am considering a few different
layouts:

- Banner on top, with the navigation menu immediately below it. The problem
with this layout is that the menu would be about 770 pixels wide, since there
are 13 items in it. Many users would have to maximize their browser window to
keep the horizontal scroll bar from appearing.
Why not just allow the menu to wrap at the appropriate width? See e.g.
http://www.xs4all.nl/~sbpoley/webmat...ssbuttons.html for a
reader-friendly way of doing it.

....Those two layouts also have the problem of the user needing to scroll all the
way back up to the top of the page to get to the menu.
Pressing the "home" key isn't terribly arduous.

Would it be better to
use CSS and position:fixed to simulate frames (with the banner on top and the
menu along the left side)? That way the navigation menu would always be
visible and there wouldn't appear to be too much wasted space under the menu.
But then the banner (which is about 90 pixels high) would take up some browser
real estate.
Not my preference.
What do you think is the best layout?

Either of your first two, if implemented sensibly.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[rf]

"Nico Schuyt" <ns*****@hotmail.com> wrote in message
news:3f***********************@news.wanadoo.nl...

de*******@no.spam.com wrote:

I am considering a few different layouts: But then the banner (which
is about 90 pixels high) would take up some browser real estate.

Not necessarely: http://www.nicoschuyt.nl/test/fixed_menu.htm
The banner scrolls out of sight.

I forgot about the standard simulate frames with divs. Nice demo of it Nico.

However I think you should reconsider the use of % for the width of that
navbar div. This width is not really a percentage of the canvas, it is a
sort of fixed number of characters (assuming no overriding images) so it is
more logical to use ems. This way we avoid wasted space with a wide canvas
and wrapping links, or worse (as happens with your example) links that are
truncated at the right border with a narrow canvas.

Cheers
Richard.

[Nico Schuyt]

rf wrote:

"Nico Schuyt" wrote

Not necessarely: http://www.nicoschuyt.nl/test/fixed_menu.htm
The banner scrolls out of sight.

I forgot about the standard simulate frames with divs.
Nice demo of it Nico.

Thank you Richard :-)
However I think you should reconsider the use of % for the width of
that navbar div. This width is not really a percentage of the canvas,
it is a sort of fixed number of characters (assuming no overriding
images) so it is more logical to use ems.

You're right. It's just a scratch I have to work it out further.
But I started with a content box with right margin of 21ex and a menu with
float left and a width of 20ex: http://www.nicoschuyt.nl/test/fixed_test.htm
OK in IE and Opera but a wide gap in Mozilla 1.4 (changing it to em didn't
solve it)

Regards,
Nico

[Barry Pearson]

Nico Schuyt wrote:
[snip]

Not necessarely: http://www.nicoschuyt.nl/test/fixed_menu.htm
The banner scrolls out of sight.

What do you think is the best layout?

I myself prefer a basic design with menu left (in addition repeat the
menu at the bottom on large pages) and content right

I like the basic simplicity of the above page. However, it only appears to
work on W2000 with IE6 & Opera 7.2, of the browsers I have.

With Mozilla Firebird 0.7 and Netscape 7.1, when the viewport has been reduced
to about 690, the text on the right disappears, and so does its scroll bar. It
is as though you forgot to put any text in. (Is it anything to do with the
"overflows" in the "body"? Just a wild guess).

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Nico Schuyt]

Barry Pearson wrote:

Nico Schuyt wrote:

Not necessarely: http://www.nicoschuyt.nl/test/fixed_menu.htm
The banner scrolls out of sight.

I like the basic simplicity of the above page. However, it only
appears to work on W2000 with IE6 & Opera 7.2, of the browsers I have.
With Mozilla Firebird 0.7 and Netscape 7.1, when the viewport has
been reduced to about 690, the text on the right disappears, and so
does its scroll bar.

I noticed. It's just a quick and dirty outline. Someday I'll work it out :-)
Nico

[kchayka]

rf wrote:

"Nico Schuyt" <ns*****@hotmail.com> wrote in message
news:3f***********************@news.wanadoo.nl...

http://www.nicoschuyt.nl/test/fixed_menu.htm

I forgot about the standard simulate frames with divs. Nice demo of it Nico.

I would be _very_ wary of using scrolling divs, though. They are really
hard to navigate for keyboard users. Page up/down and arrow keys, which
I use to scroll, are useless on this page so much of it is inaccessible
without a mouse/click. I hear scroll wheels don't work so well with
these, either.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.

[delerious]

On Mon, 03 Nov 2003 10:20:04 GMT, "rf" <ma**********@the.time> wrote:

- Banner on top, with the navigation menu immediately below it. The

problem

with this layout is that the menu would be about 770 pixels wide, since

there

are 13 items in it. Many users would have to maximize their browser

window to

keep the horizontal scroll bar from appearing.

Er, why. Organise the menu so that when the canvas becomes too narrow the
menu flows onto two (or more) lines.

Hmm, for my menu I'm using one of those free Javascript menus that display
drop-down lists when you mouseover the items. The one I'm using doesn't split
into multiple lines if the browser window isn't wide enough.

> Those two layouts also have the problem of the user needing to scrollall the

way back up to the top of the page to get to the menu.

Most browsers have a key to do this. It is usually the Home key. Most users
know how to use this key.

You learn something new everyday. :-) I really did not know that. I imagine
that the opposite is true -- that most users do not know about the Home key.

Would it be better to
use CSS and position:fixed to simulate frames

This does not work with IE (the most popular^H^H^H^H^H used browser).

There are supposedly workarounds for IE, such as this one:
http://devnull.tagsoup.com/fixed/

[rf]

<de*******@no.spam.com> wrote in message
news:3f****************@news.md.comcast.giganews.c om...

On Mon, 03 Nov 2003 10:20:04 GMT, "rf" <ma**********@the.time> wrote:

- Banner on top, with the navigation menu immediately below it. Theproblem

with this layout is that the menu would be about 770 pixels wide, since

there

are 13 items in it. Many users would have to maximize their browser

window to

keep the horizontal scroll bar from appearing.

Er, why. Organise the menu so that when the canvas becomes too narrow the
menu flows onto two (or more) lines.

Hmm, for my menu I'm using one of those free Javascript menus that display
drop-down lists when you mouseover the items. The one I'm using doesn't

split into multiple lines if the browser window isn't wide enough.
I hope you have an alternative navigation scheme in place for those 15% or
so out there that do not have javascript enabled :-)

Would it be better to

use CSS and position:fixed to simulate frames This does not work with IE (the most popular^H^H^H^H^H used browser).

There are supposedly workarounds for IE, such as this one:
http://devnull.tagsoup.com/fixed/
See Nico's subthread in this thread. Such things *are* possible but they are
not exactly simple and often break in some browsers. For example, Nico's
example breaks in Mozilla (and therefore I suppose Netscape). Do not use any
solution that relies on Javascript. It will break.

Cheers
Richard.

[Brett]

> - Banner on top, with the navigation menu below it along the left side.
The

problem with this layout is that there would be a column of empty space (about 120 pixels wide -- the width of the menu) down the page below the menu. This may not be too attractive.
hmm...why not have the banner on the top and the links below the banner on
the right? That way you can wrap the text around the links.
- Banner on top, with the navigation menu immediately below it. The problem with this layout is that the menu would be about 770 pixels wide, since there are 13 items in it. Many users would have to maximize their browser window to keep the horizontal scroll bar from appearing.
I personally don't prefer this layout because in most cases you are limited
to how many links you can list which can restrict you if you ever decide to
add more content later.
Those two layouts also have the problem of the user needing to scroll all the way back up to the top of the page to get to the menu.

Add a footer with some small text links

--
Brett
Provision Tech
http://www.provisiontech.net

[Nico Schuyt]

rf wrote:
http://www.nicoschuyt.nl/test/fixed_menu.htm

See Nico's subthread in this thread. Such things *are* possible but
they are not exactly simple and often break in some browsers. For
example, Nico's example breaks in Mozilla (and therefore I suppose
Netscape).

What version of Mozilla Richard?
Mozilla 1.4 displays correctly, in the zoom range from 50% to 200%
Nico

[Nico Schuyt]

kchayka wrote:

rf wrote:

"Nico Schuyt" wrote

http://www.nicoschuyt.nl/test/fixed_menu.htm

I forgot about the standard simulate frames with divs. Nice demo of
it Nico.

I would be _very_ wary of using scrolling divs, though. They are
really hard to navigate for keyboard users. Page up/down and arrow
keys, which I use to scroll, are useless on this page so much of it
is inaccessible without a mouse/click. I hear scroll wheels don't
work so well with these, either.

In IE6 both keys and scroll mouse function correctly. In Opera 7.2 and
Mozilla 1.4 there are problems however.
Thanks for drawing my attention to that..
Nico

[rf]

"Nico Schuyt" <ns*****@hotmail.com> wrote in message
news:3f*********************@news.wanadoo.nl...

rf wrote:
http://www.nicoschuyt.nl/test/fixed_menu.htm

See Nico's subthread in this thread. Such things *are* possible but
they are not exactly simple and often break in some browsers. For
example, Nico's example breaks in Mozilla (and therefore I suppose
Netscape).

What version of Mozilla Richard?
Mozilla 1.4 displays correctly, in the zoom range from 50% to 200%
Nico

Hmmm. 1.4. Have you been playing with it? For a while there yesterday the
right div started half way across the canvas and went that way ---> causing
a horizontal scrollbar. Seems OK now though.

Cheers
Richard.

[kchayka]

Nico Schuyt wrote:

kchayka wrote:

rf wrote:

"Nico Schuyt" wrote http://www.nicoschuyt.nl/test/fixed_menu.htm I forgot about the standard simulate frames with divs. Nice demo of
it Nico.

I would be _very_ wary of using scrolling divs, though. They are
really hard to navigate for keyboard users. Page up/down and arrow
keys, which I use to scroll, are useless on this page so much of it
is inaccessible without a mouse/click. I hear scroll wheels don't
work so well with these, either.

In IE6 both keys and scroll mouse function correctly.

How did you manage that without first clicking on the corresponding div?
Page up/down and arrow keys don't work until the div has focus. I
haven't figured out how to get focus without first clicking on it.
Neither the tab nor F6 key moves between divs. What is your secret?

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.

[Nico Schuyt]

kchayka wrote:

Nico Schuyt wrote:

kchayka wrote:

"Nico Schuyt" wrote

> http://www.nicoschuyt.nl/test/fixed_menu.htm I would be _very_ wary of using scrolling divs, though. They are
really hard to navigate for keyboard users. Page up/down and arrow
keys, which I use to scroll, are useless on this page so much of it
is inaccessible without a mouse/click. I hear scroll wheels don't
work so well with these, either.

In IE6 both keys and scroll mouse function correctly.

How did you manage that without first clicking on the corresponding
div? Page up/down and arrow keys don't work until the div has focus.
I haven't figured out how to get focus without first clicking on it.

Neither have I :-)
What a pity: Thought I finally found a good alternative for a photoalbum
with frames (thumbnails left; enlarged picture on the right) :-(
But, on the other hand, even *you* seem to have a mouse. Is it likely people
don't?
Nico

[Lauri Raittila]

In article Nico Schuyt wrote:

How did you manage that without first clicking on the corresponding
div? Page up/down and arrow keys don't work until the div has focus.
I haven't figured out how to get focus without first clicking on it.
What a pity: Thought I finally found a good alternative for a photoalbum
with frames (thumbnails left; enlarged picture on the right) :-(

With Opera, I can get focus to scrolling div, but I am unable to scroll
it...
But, on the other hand, even *you* seem to have a mouse. Is it likely people
don't?

Yes. Or it may have worn out batteries. You know it takes 2 months before
remembering to buy new ones :-( I replaced my 'free' wireless mouse with
normal instead of getting new batteries though...)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[kchayka]

Nico Schuyt wrote:

kchayka wrote:

> "Nico Schuyt" wrote

>> http://www.nicoschuyt.nl/test/fixed_menu.htm

Page up/down and arrow keys don't work until the div has focus.
I haven't figured out how to get focus without first clicking on it.

Neither have I :-)
What a pity: Thought I finally found a good alternative for a photoalbum
with frames (thumbnails left; enlarged picture on the right) :-(
But, on the other hand, even *you* seem to have a mouse. Is it likely people
don't?

having != using... my car came with a trailer hitch, but I've never used
it. ;) That's not to say I _never_ use a mouse, though.

Regardless, it is rare to need a mouse just for scrolling. Frames are
actually far easier to navigate by keyboard than scrolling divs. There
are no doubt things you can do to make these things more usable, but how
intuitive will those methods be for the visitors that are expected to
use them?

When I find a page that is a big pain to navigate, I would just as soon
go elsewhere and avoid the frustrations. You'd have to have some really
super-duper content to make me stick around and figure out how to use
the site easily.

Some things to keep in mind next time you think about using these evil
things.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.

[delerious]

On Mon, 03 Nov 2003 23:53:02 GMT, "rf" <ma**********@the.time> wrote:

Hmm, for my menu I'm using one of those free Javascript menus that display
drop-down lists when you mouseover the items. The one I'm using doesn't

split

into multiple lines if the browser window isn't wide enough.

I hope you have an alternative navigation scheme in place for those 15% or
so out there that do not have javascript enabled :-)

If I could find a Javascript menu that worked off of images in the HTML, then
that would solve that problem. Does anyone know of a Javascript menu like
that?

[Mark Parnell]

Sometime around Wed, 05 Nov 2003 02:43:38 GMT, de*******@no.spam.com is
reported to have stated:

If I could find a Javascript menu that worked off of images in the HTML, then
that would solve that problem. Does anyone know of a Javascript menu like
that?

Even better:

http://devedge.netscape.com/

--
Mark Parnell
http://www.clarkecomputers.com.au

[rf]

<de*******@no.spam.com> wrote in message
news:3f**************@news.md.comcast.giganews.com ...

On Mon, 03 Nov 2003 23:53:02 GMT, "rf" <ma**********@the.time> wrote:

Hmm, for my menu I'm using one of those free Javascript menus that display drop-down lists when you mouseover the items. The one I'm using

doesn'tsplit

into multiple lines if the browser window isn't wide enough.
I hope you have an alternative navigation scheme in place for those 15% orso out there that do not have javascript enabled :-)

If I could find a Javascript menu that worked off of images in the HTML,

then that would solve that problem. Does anyone know of a Javascript menu like
that?

We had a thread about this very thing just recently. The poster had a
javascript menu where, without javascript, it was impossible to get to the
items that live in the dropdown panels. In the end the poster decided to do
what we had come up with as a suggestion: to have an intermediate page that
is linked to from the menu bar containing the same links as in the dropdown
panel. This is, funnily, exactly what is on that site Mark just posted :-)

Cheers
Richard.

[delerious]

On Wed, 05 Nov 2003 04:26:02 GMT, "rf" <ma**********@the.time> wrote:

We had a thread about this very thing just recently. The poster had a
javascript menu where, without javascript, it was impossible to get to the
items that live in the dropdown panels. In the end the poster decided to do
what we had come up with as a suggestion: to have an intermediate page that
is linked to from the menu bar containing the same links as in the dropdown
panel. This is, funnily, exactly what is on that site Mark just posted :-)

I may actually be able to design a navigation bar that has the Javascript
dropdowns and still works (that is to say that the top level images could be
clicked) with Javascript disabled. This article describes how to create a
navigation bar with DIV tags, CSS, and javascript:
http://brainjar.com/dhtml/menubar/

I'd just have to use IMGs in place of the DIVs. What do you think of this
solution? Would the CSS described in that article work across all browsers?
Thanks!

[Mark Parnell]

Sometime around Wed, 05 Nov 2003 13:34:11 GMT, de*******@no.spam.com is
reported to have stated:

This article describes how to create a
navigation bar with DIV tags, CSS, and javascript:
http://brainjar.com/dhtml/menubar/

I'd just have to use IMGs in place of the DIVs.

Why use images of text (which I can't resize to make them readable), when
you can use the real thing (and I _can_ resize it)? That would solve your
problem of the menu not wrapping, too.

--
Mark Parnell
http://www.clarkecomputers.com.au

[Alan J. Flavell]

On Wed, 5 Nov 2003 de*******@no.spam.com was observed to have posted
to comp.infosystems.www.authoring.html , of all places:

I'd just have to use IMGs in place of the DIVs.
If that's the answer, then there must have been something wrong with
the question. SCNR.
What do you think of this
solution? Would the CSS described in that article work across all browsers?

If it necessarily involves IMGs, then how could it "work" across all
browsers? (Hint: not all browsers display images).

OTOH if the IMGs' ALT text can do the job on browsers which need that
kind of thing, then why bother with the IMGs at all?