Re: TECH: Website Navigation Question

On 23.3.2007 Mark J. Reed wrote:
 >
 > An "em" is a unit of width equal to the height of the
font - so called
 > because historically M's were square.
 >

Right. I'll take this chance to point out that it is
generally a good idea to specify the dimensions of 'boxes'
on a web page in ems or percentages (i.e. of the size of the
screen or the containing block), since not everyone looks at
webpage with the body text size set to 12pt: many who are --
um -- 'differently sighted' use larger, sometimes much
larger, sizes, and then preferably larger screens too, and
if dimensions are set to absolute measures (px pt cm mm in
etc.) the display will get garbled for those viewers.

This of course presupposes that the page style doesn't
prescribe any absolute font size for its body text, but lets
the viewer decide that for themself. Accordingly
increased/decreased font sizes (like in headers and notes)
should be defined in decimals of em or percentages, like

:   h1 ( font-size: 1.5em; }
:   h2 { font-size: 130%; }

which will be calculated relative to the body text size.

It is also a good idea to enclose the main text area in a
<div class="main-text"> with a corresponding style
definition

:   div.main-text {
:       max-width: 33em;
:       margin: 15px auto;
:       }

This will make each line of body text no wider than
approximately 66 characters wide, which is convenient for
reading for most people. I actually prefer somewhat shorter
lines (about 55 characters or 33em) for onscreen reading,
but I have a peripheral vision problem. The margin
specification will leave some space above and below the type
space, which probably *should not* increase with increasing
body text size, so an absolute value is appropriate here,
and center the text body between the left and right edges of
its containing block. You may wish to specify a small
absolute side margin instead, which is OK.

If you need you can still make some elements -- notably
tables -- contained in the <div class="main-text"> wider by
setting their width or to a percentage greater than 100%,
like <table style="width: 110%;">.

If you have a main text area and a sidebar area on your page
their width should also be defined in values relative to the
browser window, like

:   div.sidebar { float: right; width: 25%; }
:   div.main-body { width: 75%; }

It is a good idea to have the page-internal sidebar on the
right, since the browser's sidebar is usually on the left,
and it's convenient to have the text body between the
browser's sidebar and the page's sidebar. In my new page
design I have put the site TOC etc. at the bottom of each
page, with an internal link to it in small type at the top
of each page, above the margin of the main text division.

Just my two pieces of small chainge!
--
/BP 8^)>
--
Benct Philip Jonsson -- melroch at melroch dot se

    "Maybe" is a strange word.  When mum or dad says it
    it means "yes", but when my big brothers say it it
    means "no"!

                            (Philip Jonsson jr, age 7)

Replies