An extended discussion of graphical navigation buttons, file sizes,
font sizes and legibility, alt tag display and interaction with different
ALT Tag Display
On Tuesday, May 23, I finally got to the point that I was able
to check some pages from a server that was actually connected
to the Internet. Besides finding some HTML errors that surprised
showed that my page size had been creeping upward and that my
home page was in the mid 20K range. While this was still rated
good, it was definitely moving away from the small fast pages
that I had hoped to create. Part of the growth was a lot of
temporary text on the home page but I'd also added several graphics
since I first checked the total size of the navigation buttons.
On the NT version of the site, two of the largest graphics were
the IIS and BackOffice logos. I experimented for a while trying to
find a way to reduce these further in size but gave up after I
concluded there were simply no changes left to make that would not
dramatically change the appearance of these graphics. Clearly the
navigation buttons were the only graphic elements that could be
changed significantly without altering the functionality of the
site. I didn't know for sure what size savings I would achieve by
discarding the bevels and drop shadows but guessed it would be
around 50% which would be about 3K. That's not a lot but the buttons
were the elements that I could change with only an esthetic effect.
In my first attempt to change the
buttons from the original home page,
I took the faces of the buttons and replaced the bevel and
drop shadow with a two pixel border. This was white on the top and
left and a medium gray on the bottom and right giving a limited
relief effect. When the buttons were put together though, the 2
pixel border was just too strong. The size reduction was a
dramatic 60-70% because in addition to reducing the actual button
size by about 50% I could reduce the actual number of colors used
from 16 to 4 because the shading in the bevel and drop shadow was
no longer an issue. In this first attempt, I forced the logo to
a smaller visual size that was consistent with the new elements
without actually creating a new graphic.
It may not be apparent that the buttons have been reduced as much
in size as they have because on the
original page the buttons actually
include 8 pixels of border that matches the background color to allow
for the drop shadow (plus 8 pixels for the bevel). Thus a 30 pixel
high button, 14 for the face and 16 for effects is reduced to 18
with only 4 pixels for the border.
ALT Tag Display
This dramatic size reduction had
an unexpected effect. Previously in Internet Explorer (4.01) the
all the ALT tags showed inside the button area when graphics were
turned off. In Netscape 4.5 on NT about half the ALT tags showed
while in Netscape 4.72 on Linux, all the ALT tags showed. At the new
smaller size no ALT tags showed in any of the browsers I was using
when graphics were turned off.
One of my goals had always been to keep the site useable with for
anyone browsing with graphics turned off or with a text based
browser. Thought each button had
an ALT tag that matched the button text, at this new smaller button size,
the only way this could be seen in any browser was to move the mouse
cursor over the button. This can be used but is not very usable.
While I'm willing to increase maintenance to accommodate browsers
without graphics, I'm not willing to double it by maintaining a
complete separate set of pages. This started a search for a button
size that would let the ALT tags display in the areas reserved for
graphics display in most or all browsers.
For the ALT tags to display fully, the graphics had to be 30 pixels
high in IE and about 26 pixels in Netscape. IE would display truncated
ALT text but by the time image size was down to 26 or less pixels it
was not easily readable. Netscape required the image width to be
long enough for all ALT text or none would display. This is at the
browsers default font sizes. Reducing the default font size in Netscape
very quickly made the ALT text visible. Reducing it in IE made it
I tried several increasingly larger font sizes with small, 2 to 3 pixel
borders for the button face around the text. By the time that the button
faces were getting back in the 30 pixel height range at about 22 points
(with Arial Black) the button width's had become huge. Even with the
large button size, any increase in the browser default font size caused
the ALT text not to display. Also in all attempts after the first, I
reduced the surrounding border to one pixel rather than two.
Interestingly, I learned that if no size is specified for a graphic,
Netscape will provide as much space as is needed to display the
ALT text with the default font size. It's not clear what IE is doing
when no size is provided. It appears that if IE has ever had the
graphics, it continues to use the original size. Clearing cache and
refreshing the pages does not seem to affect this. IE never dispalyed
the ALT text associated with the small previous
and next buttons on these pages. Since these
are accompanied by text links and a screen reader should read the alt
text, there do not appear to be any signifcant consequences to this
alt text not being displayed in IE. A curious user can always move the
mouse over the grahic to see what the ALT text says. There is no way
that I'd increase these arrow sizes to accommodate ALT text in IE.
Also since Netscape will display the ALT text if no size is specified,
given the tiny size of these graphics and the fact that they will be
cached after the first page view, it's hard to see that there could
be any practical negative performace impact to not providing a
Since I have subsequently changed the site design multiple times
since the changes discussed here were made, you need to know what the
final page looked like for the
rest of this discussion to make any sense. You can read about
these next changes on
the Dropping Graphical Navigation
Finally I stopped working with the graphics and went to directly
manipulating the image size with the HTML code. I set the button height
at 30 pixels since this was what IE required and then manipulated the
width in 10 pixel increments until I found the smallest size that
Netscape on NT would accept to display the ALT text. Netscape on Linux
used a smaller default font and if it fit on NT it easily fit on Linux.
With the button sizes now predetermined by the browser capabilities, I
looked for the largest font that would comfortably fit in the horizontal
space allowed by the new button sizes. This was 16 points which was
noticeably larger than the 14 points used in the original buttons.
The result was buttons that appeared to be much bigger than the original
but which in reality were exactly the same height as the original
and only 5 to 15 pixels wider than the original buttons. The net effect
is a simpler, cleaner less graphic page with more legible buttons.
Esthetically I think the buttons are a little too large, but there
is simply no way to achieve the functional goals that I want without
making them this large. The graphic file size reduction was
typically 30 - 40%.
Since some of the early site visitors missed what I was doing with the
lighter button face and blue button text to indicate the area of the
site that the page being displayed was from, I changed this also. I inverted
the colors, using red text on a white background which could not easily
be missed. Hopefully after two or three pages it should be obvious that
the buttons are changing in response to where in the site you are.
While I was changing the buttons, I decided that the default serif
type face that I was using for the "GeodSoft, LLC: Computer Consulting"
page heading was clearly out of place with the buttons and other
headings which were all sans serif. I made the this font face match
that use in the other heading and on the buttons.
Some of the other design goals I'd had for the site were not affected
by these changes. Specifically, while I want to control the relative
location of some page elements, I know that you cannot really
control what the user sees. I want all my pages to work well in
a variety of different browser size and shape windows. I want my
pages to be useable in a full screen browser on a 640 x 480 monitor
but to expand to fill a large browser window when it's available.
The new headings are just large enough to cause a horizontal scroll
bar to appear in a 640 x 480 browser window.
Because the content pane is coded as a separate table without a set
width, there is no need to use horizontal scroll bars to read the
page text. Actually the browser window can be reduced to around 550
Policy buttons visible to identify and use them. Since you're not
likely to revisit these pages after you've seen them, you can really
squeeze a browser window down to about 460 pixels and still have a
useable window. The pages are fully useable in a full screen
browser on an 1152 x 864 monitor, though the text lines are getting
somewhat long for easy reading.
As far as I know, I've done just about everything that is practical
to accommodate different browsing habits. If you read this and
think that I've missed something, I would appreciate hearing about
it at GeodSoft@rcn.com.
Top of Page -
Copyright © 2000 - 2014 by George Shaffer. This material may be
distributed only subject to the terms and conditions set forth in
These terms are subject to change. Distribution is subject to
the current terms, or at the choice of the distributor, those
in an earlier, digitally signed electronic copy of
http://GeodSoft.com/terms.htm (or cgi-bin/terms.pl) from the
time of the distribution. Distribution of substantively modified
versions of GeodSoft content is prohibited without the explicit written
permission of George Shaffer. Distribution of the work or derivatives
of the work, in whole or in part, for commercial purposes is prohibited
unless prior written permission is obtained from George Shaffer.
Distribution in accordance with these terms, for unrestricted and
uncompensated public access, non profit, or internal company use is