Graphics Changes

An extended discussion of graphical navigation buttons, file sizes, font sizes and legibility, alt tag display and interaction with different resolution monitors.

The Problem

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 me www.netmechanic.com 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.

First Attempt

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 un readable.

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 grahics size.

Final Results

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 Buttons page.

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 pixels wide and there is still enough of the Terms of Use and Privacy 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 - Site Map

Copyright © 2000 - 2014 by George Shaffer. This material may be distributed only subject to the terms and conditions set forth in http://GeodSoft.com/terms.htm (or http://GeodSoft.com/cgi-bin/terms.pl). 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 allowed.