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]

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.

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]

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]

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/webmatters/cssbuttons.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.

 

[rf]

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]

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.


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

 

[Nico Schuyt]

Nico Schuyt wrote:

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]

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.

 

[delerious]

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.

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.

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]

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

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

 

[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]

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]

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


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]

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?

 

[Nico Schuyt]

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]

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

 

[kchayka]

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.

 

[Mark Parnell]

Sometime around Wed, 05 Nov 2003 02:43:38 GMT, (e-mail address removed) 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/