Page Layout: Navigation Menus
The conventional placement for navigation margins is on the left side of the
window. Right-hand margins are unusual - and until recently I thought
there was no particular reason for choosing one over the other, apart
from convention. But now I believe there are several good reasons for
preferring right-margins.
The problems with left-side margins are:-
- If the user's window is narrower than the page width, the right side of
the page is clipped; the text needs to be moved back into view using
the scroll bar. However if it's the margin it's less of an annoyance.
- Non-graphical browsers (Lynx; HTML-to-speech; etc) will usually render
the margin contents first - which are often a substantial amount of
navigation stuff. The user will be forced to skip over a bunch of junk
before they reach the content.
- Search engines typically give greater weight to keywords in the earlier
part of the page; again, navigation margin contents appear first and
skew the results because they relate to other pages than the
present one. Also search engines often display the first part of the
page in response to user queries. Navigation menu contents are not much
help...
Also in favor of right-side margins is the fact that the vertical
scroll-bar is usually on the right, so it's more convenient for the
user - less mouse-travel - if the navigation menu is nearby.
In support of this, we note that
one survey
shows a greater click-through for ads placed to the
right side of the page.
Alternatively, if you still want your navigation margin on the left -
here's a neat trick that'll put it there - yet it'll follow the main content
in the page flow!
| |
Welcome to my page
Here is the body text of my document
...
|
|
|
<TABLE>
<TR VALIGN=TOP>
<TD bgcolor="#eeffff"> <!--empty cell--></TD>
<TD bgcolor="#ffeeff"ROWSPAN=2><!-- note the rowspan -->
<H1>Welcome to my page</H1>
Here is the body text of my document
...
</TD>
</TR>
<TR VALIGN=TOP>
<TD bgcolor="#ffffee">
<TABLE>
<TR><TD>menu1</TD></TR>
<TR><TD>menu2</TD></TR>
...
<TR><TD>menuN</TD></TR>
</TABLE></TD>
</TR>
</TABLE>
Page Layout: Tables
Page Layout, Margins, Indenting, and Columns
Page Layout: Style Sheets
|
