Height & Width Tags

If you put HEIGHT and WIDTH tags into your HTML image source tags, the information tells the browser how much page space to devote to the graphic. Thus the browser starts to lay out your Web page even before the graphics files have begun to download. This does not speed up the  downloading of the graphics (nothing but a faster data connection can do that), but it does allow the user to see the basic page layout quickly. When you supply the HEIGHT and WIDTH of page graphics the browser will often fill out the text blocks first, then "pour" the graphics files into the spaces allotted. Thus the user can start to read your page while the graphics are downloading. All of the graphic references in this style manual include height and width tags. The HEIGHT and WIDTH tags are additions to the basic image source tag:

                       <IMG SRC="picture.gif" HEIGHT="30" WIDTH="475">

For best performance, make sure all of your image source tags include height and width information (even for small button graphics).

Note that the examples below only work well the first time you try them. After that your browser will probably cache the images locally, and subsequent loading will occur (very quickly) from your hard disk, not from the Web. Both example photographs are interlaced GIFs (300 x 409  pixels).

Example WITHOUT height and width tags

Example WITH height and width tags

Imagemaps offer a means to define multiple "live" link areas within a single graphic on a Web page. Thus you can make a banner graphic for the top of your page, and imbed multiple "button" areas within the graphic. The header and footer graphics used in this style guide are simple imagemaps.

Server-side Imagemaps vs Client-side Imagemaps
Until recently Web imagemaps had a reputation for being complex to implement and slow to execute, because the original procedure for creating imagemaps on Web pages required reference to a separate file on the host Web server every time a user clicked on an imagemap. This "server-side" imagemap technology was needlessly complex and very inefficient. Since early 1996 the major Web browsers have supported "client-side" imagemaps, where the information on what areas of a graphic are "live" links is incorporated within the HTML code for the Web page, where it belongs. Most Web page layout programs now incorporate easy graphic interfaces for setting up imagemaps, so we will not cover the HTML technical details here.  Simply view the HTML source of any page containing an imagemap to learn more about it.

Space-efficient Graphic Impact
Imagemaps have become a standard feature of most professionally-designed Web sites because they offer an effective combination of visual appeal and, when used properly, space-efficient functionality. Imagemaps are particularly effective when incorporated into moderately-sized "splash" graphics at the top of home pages, or into the "signature" graphics or logos that define your pages. For example, Apple Computer uses an imagemap at the top of their education page that offers 12 different link choices within a distinctive graphic that instantly marks the page as part of Apple's Web site:

Graphic Flexibility
Imagemaps are the only means to incorporate multiple links into a graphic illustration, such as this anatomic example:

Imagemaps are also the ultimate means to overcome the vertical, list-oriented, graphically inflexible norms of conventional Web pages built with standard HTML tags. With imagemaps you can simply abandon HTML page layout, and build links into large graphics, just as you might in CD-ROM authoring programs. However, such designs are only suitable for audiences with high bandwidth access to the Web or the local intranet.

The "safe area" for Web page graphics is determined by two factors: the minimum screen size in common use today (640 by 480 pixels), and by the width of paper used to print Web pages.

Monitor Size
Most monitors used in academia and business are 13 to 15 inches (33 to 38 cm) in size, and these smaller monitors are often set to display a 640 x 480 pixel screen. Web page graphics that exceed the width dimension of these small monitors look amateurish, and will inconvenience many of  your readers because they will have to scroll both horizontally and vertically to see your full page layout. It's bad enough to have to scroll in one (vertical) direction; having to scroll in two directions is intolerable.

Printing Considerations
Even on small monitors it is possible to display graphics that are too wide to print well on common letter size, legal size, or A4 paper widths. However, in many Web pages printing is a secondary concern. Just be aware that your readers will lose the right 2 centimeters of your layout if they print wide pages. Pages with lots of text should always be designed to print properly, as the majority of readers will print those pages, and if the page is too wide they will lose several words from each line of text along the right margin of the page.

The following table and screen examples give the graphic safe area dimensions for printing layouts, and for page layouts designed to use the maximum width of a 640 by 480 pixel screen. The dimensions are good for current versions (3.x) of both Internet Explorer and Netscape Navigator, and for both MacOS and Windows95 operating systems.

                Graphic "safe area" dimensions for layouts designed to print well:

                        Maximum width = 535 pixels

                        Maximum height = 295 pixels

                Graphic "safe area" dimensions for layouts designed to maximize screen usage:

                        Maximum width = 595 pixels

                        Maximum height = 295 pixels

The following graphics are screen dumps from 640 x 480 screens showing the two major Web browsers on both platforms, in their default settings (button bar, location bar, etc.). The dimension data given in each example screen are identical. However, by viewing each example you can see that the "Start" bar and window title banners significantly compromise the safe vertical dimension on small Windows95 screens.

                    Netscape Navigator - Windows95 safe area example

                    Internet Explorer - Windows95 safe area example

When designing new Web sites you can sometimes do sketching on screen dumps like the ones above. Just copy one of the screens above, erase the dimension data in the "live area" of the browser window, and sketch in your Web graphics. That way you can be sure that your graphics will fit within the safe area of the browser window, and you can also see how the browser's interface graphics might effect the overall look of your page graphics. This is more realistic than designing Web graphics on a plain background.

There is no single design grid system that is appropriate for all Web pages. The first consideration in a Web design project is to establish the basic layout grid for your pages. With this graphic "backbone" you establish how the major blocks of type and illustrations will regularly occur in your pages, and set the placement and style guidelines for major screen titles, subtitles, and navigation links or buttons. To start, gather representative examples of your text, along with some graphics, scans, or other illustration material, and experiment with various arrangements of the elements on the page. In larger projects it isn't possible to predict how every particular combination of text and graphics will interact on the screen, but examine your Web layout "sketches" against both your most complex and least complex pages.

The goal is to quickly establish a consistent, logical screen layout, one that allows you to quickly "plug in" text and graphics for each new page without having to stop and re-think your basic design approach for every new page. Without a firm underlying design grid, your project's page layout will be driven by the problems of the moment, and the overall design of your Web system will look patchy and visually confusing.

Analyzing Page Grids
When designing a basic page grid, incorporate an image map menu at the top and bottom of every page incorporating paging buttons. A "scan column" along the left of the page does two jobs: it provides space for local links to related material, and also gives visual relief by narrowing the right text column to about 60 - 70 characters per line. This diagram shows the major repeating components of a page:

Here shows the "invisible" table (BORDER="0") that underlies the column structure of the page, and the critical page dimensions:

Choose 535 pixels as the maximum dimension for the page layout because that is the widest table that will print on standard letter size or A4 paper (although, given variations in Web broswers, fonts, and laserprinters, some slight cropping may occur.).

Design Grids for HTML Pages
A Web page can be almost any length, but you've only got about 30 square inches at the top of your Web pages to capture the average reader, because that is all they will see as your page loads. If all you offer is a big, slow-to-load graphic, many casual readers will leave before they ever see the rest of your Web site.  Below is a page background graphic that shows the safe areas for 640 by 480 pixels screens, and also shows approximate page boundaries for printing Web pages. Note that the boundaries are only approximate, as font sizes vary considerably across different computing platforms and operating systems.

             Page with grid background

This page shows the same background graphic placed on the page, where you can copy it for your own use. Follow the procedures for your particular browser in copying images. Users of the Windows version of Netscape should click on the graphic with the right mouse button to get a menu of options for copying and saving the graphic. Mac users of Netscape 2.0 or later should click and hold down the mouse button until the pop-up menu appears.

Consistency and predictability are essential attributes of any well-designed information system, aiding users in identifying the origin and relationships of World Wide Web pages, providing consistent and predictable access to interface and page elements, and a consistent graphic design scheme. The design grids that underlie most well-designed paper publications are no less necessary in designing electronic documents and on-line publications, where the spatial relationships between on-screen elements is constantly shifting in response to user input and system activity.

The best measure of home page efficiency How many links are there in the top four inches of your menu page designs? The average computer display sold today is only about 14 to 16 inches in diagonal measurement, and shows a "desktop" of about 640 by 480 pixels. That should tell you that the top four inches of your Web home page is the most crucial area in your site  because that's the only area you can be sure most users will see when they hit your home page. Many sites surrender to the giddy thrills of large home page graphics, forgetting that the a Web page is not just a visual experience  it has to function efficiently to retain its appeal to the user. A complex home page graphic that takes forever to download, doesn't fit on the average reader's screen, and offers little or no functionality will repel most Web users.

Remember that Web pages must be downloaded to the user, and that the page only gradually builds its graphic impact. The best measure of the efficiency of a page design is the number of options available within the top four inches of your page. A big, bold graphic may tease the casual Web surfer, but if it takes the average reader a full minute to download the top of your page, and there are no links to be seen until the user scrolls down the page (causing even longer delays), then you may have lost a big part of your audience before you even get to offer them any links to the rest of your site.

Think in Screens of Information, Not Pages
Always base your page header design on what the average reader with the average display monitor will see within the first screen of information. The most effective Web page headers incorporate a combination of graphics and interactive links, most often in the form of an imagemap.

Consistent Graphic Identity
One of the major purposes of careful graphic design is to provide a unique visual identity to your Web site. A consistent "signature" graphic and page layout allows the reader to immediately know what the main point of the document is, and what (if any) relationship the page may have to other pages. Graphics used within headers can also signal the relatedness of a series of Web pages. Unlike print documents, designers of Web systems can never be sure what (if any) other pages the reader has seen before linking to the current page. Sun Microsystem's many corporate Web sites all include a signature header graphic that is also an imagemap with basic navigation links included:

Even if you choose not to use graphics on your pages, the header area of a Web page should contain a prominent title at or very near the top of the page. Graphics placed above the title line should not be so large that they force the title and introductory text off the page on standard office-size monitors (640x480 pixels). In a related series of documents there may also be subtitles, section titles, or other text elements that convey the relationship of the currently visible document to others in the series. To be effective, these title elements must be carefully standardized across all of the pages in your site.

Page Footers
Page footers should always carry basic information about the origin and age of the page. Every Web page needs to bear this basic information, but this repetitive and prosaic information often does not deserve the prominence of being placed at the top of the page. Most Web pages are bigger than the average display screen, so that by the time most readers have scrolled to the bottom of the Web page the navigation links you might have provided at the top of the page are no longer visible. Well-designed page footers usually offer the user a set of links to other pages.

The pages in Sun Microsystem's site all cary a distrinctive footer graphic that gives a consistent visual and functional identity:

Visual Contrast and Page Design
Good typography depends on the visual contrast between one font and another, and the contrast between text blocks and the surrounding empty space. Nothing attracts the eye and brain of the viewer like strong contrast and distinctive patterns, and you only get those attributes by carefully designing them into your pages. If you make everything bold, then nothing stands out and you end up looking as if you are SHOUTING at your readers. If you cram every page with dense text, readers see a wall of gray and their brains will instinctively reject the lack of visual contrast. Just making things uniformly bigger doesn't help at all. Even boldface fonts become monotonous very quickly, because if everything is bold then nothing stands out "boldly."

Use the major HTML headings sparingly. One alternative to overly bold HTML headers is to use the physical style controls of HTML to make text bold or italic without increasing the font size. However, you should understand that there are some disadvantages to using physical styles to control the typography of your Web pages. The HTML heading tags (H1, H2, etc.) are designed to identify important titles and subtitles in your text, and are only incidentally meant to change the visual display of the titles. If you use the "FONT SIZE" tags in Netscape and use physical styles like "BOLD" then automatic indexing and text analysis programs will have a difficult time analyzing your web documents.

Visual Logic vs Structural Logic
The framers of the original HTML standards were physical scientists who wanted a standard means to share documents with minimal markups aimed at revealing the logical structure of the information. Since they had little interest in the exact visual form of the document, no precise typography and page formatting is possible in current implementations of HTML. In focusing solely on the structural logic of the HTML document, the framers of the Web ignored the need for the visual logic of sophisticated graphic design and typography.

The standards organization responsible for codifying the HTML language is responding the widespread complaints of graphic designers that the heading tags in Web documents often produce clunky, over-large titles and subtitles. Through style sheets and new font control tags future versions of HTML will soon allow you to specify what size font each header level will produce in each Web page. Thus you will be able to produce more sophisticated typography without giving up the substantial advantages of using the conventional HTML header tags.

Type and Legibility
We read primarily by recognizing the overall shape of words, not by parsing each letter and then assembling a recognizable word:

Avoid all-uppercase headlines  they are much harder to read, because words formed with capital letters are monotonous rectangles that offer few distinctive shapes to catch the reader's eye:

Legibility Depends on the Tops of Words
Your choice of uppercase or lowercase letters can have a dramatic effect on legibility. In general, use downstyle (capitalize only the first word, and any proper nouns) for your headlines and subheads. Downstyle headlines are more legible, because we primarily scan the tops of words as we read:

Notice how much harder it is to read the bottom half of the same sentence:
 

If you use initial capital letters in your headlines you disrupt the reader's scanning of the word forms:
 

Pattern and Page Design
When your content is mostly text, typography is the tool you use to "paint" patterns of organization on the page. The first thing your reader sees is not the title or other details of the page, but the overall pattern and contrast of the page. The reader's eye scans the page first as a purely graphic pattern, then begins to track and decode type and page elements. The regular, repeating patterns established through carefully organized pages of text and graphics help the reader to quickly establish the location and organization of your information, and increase the overall legibility of your pages.   Patchy, heterogeneous typography and text headers makes it difficult for the user to see major patterns quickly, and makes it almost impossible to for the user to quickly predict where information is likely to be in located in unfamiliar documents:

Settle on as few heading styles and subtitles as are necessary to organize your content, then use your chosen styles consistently. The fact that HTML provides six levels of headings doesn't mean that you should ever use six levels of headings in a single page.

Manipulating Text Blocks
Text on the computer screen is hard to read because of the low resolution of today's computer screens, but also because the layout of most Web pages violates one of the most basic rules in book and magazine typography: the lines of text in most Web pages are much too long to be easily read.  Magazine and book columns are narrow for physiologic reasons: at normal reading distances the eye's span of movement is only about 8 cm (3 inches) wide, so designers try to keep dense passages of text in columns no wider than reader's comfortable eye span. Wider lines of text require the readers to move their heads slightly, or strain their eye muscles to track over the long lines of text. Unfortunately most Web pages are almost twice as wide as the viewer's eye span, so extra effort is required to scan through those long lines of text. If you want to encourage your Web site users to actually read a document online (as opposed to printing it out for later reading), consider using the "BLOCKQUOTE" or "PRE" HTML tags to shorten the line length of text blocks to about half the normal width of the Web page.

Monitor Gamma Settings
In computer imaging and display screens "gamma" refers to the degree of contrast between the mid-level gray values of an image. The technical explanations of gamma are irrelevant here  the visual effect of changing gamma values is easy to see. If you have a copy of Adobe Photoshop, open an image with an average range of colors and contrasts and use the "Levels" control to change the gamma settings (see the Photoshop manual for details). Images will change noticeably with even minor changes in gamma settings. Gamma considerations are particularly important if you are displaying images with very long gray scales (like medical diagnostic images or fine black and white photography) or images with critical color values (like art history images or clinical medical photographs).

The default gamma settings for Macintosh (1.8 target gamma) and Windows monitors (2.2 target gamma) are quite different, and this can lead to unpleasant surprises when you first see your images displayed on "the other" platform. Mac users will see their images get much darker and more contrasty on Windows displays; Windows users will see their images as flat and washed out on Mac displays. Most Web designers opt for a middle-ground solution, lightening images slightly if they work on the Macintosh; darkening slightly and adding a little more contrast if they work in Microsoft Windows.

If you use Adobe Photoshop you can use the "Gamma" Control Panel that ships with Photoshop to experiment with your monitor gamma settings. To simulate the windows display on a Macintosh, set the target gamma to 2.2 and the gamma adjustment slider to "-43", then save those settings.

In the Windows version of Photoshop the gamma control only applies to images within Photoshop windows, not to the global display environment as it does on the Macintosh. The default gamma setting for the Windows version of Photoshop is 1.8 (same as the Mac). To see how your graphics may look once they are out of Photoshop and into your Windows Web browser, use the gamma control in Windows Photoshop to boost the Photoshop display gamma to 2.2 (to match the normal Windows operating system gamma).

Default text sizes
In general, screen type sizes in Windows (3.1, Win95, WinNT) appear about two sizes larger than the equivalent Macintosh versions. Thus a line of 12 point Times type on a Macintosh looks more like 14 points in Times New Roman on a windows machine. If you don't have ready access to a machine with "the other" operating system, use the "FONT SIZE" HTML tag at the top of your page to globally change the type size for a quick preview:

•           Mac users should try <FONT SIZE="+2">
•           Windows users should try <FONT SIZE="-2">

Browser variations
Every Web browser interprets HTML tags a little differently. Tables, forms, graphic positioning and alignment tags will all work a bit differently in each brand or version of Web browser. Normally these subtleties might pass unnoticed, but in very precise or complex Web page layouts they can lead to some nasty surprises. At this writing the two main Web browsers are Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0 (2.0 on Macs). Both now support HTML 3.0, the original 1995 "Netscape extensions" to HTML, plus Javascript, Java, and share a (mostly) compatible plug-in architecture. But never trust the implementation of any of these advanced features until you have seen your Web pages displayed and working reliably in each brand of browser.

Graphics offset variations
Beware of trying to get a graphic imbedded on your page to line up precisely with a page background image. Offset variations make it a losing cause. The offset is the built-in margin that Web browsers automatically create between the edge of the browser window and the graphics you place on your page:

If the browser offset was fixed and consistent across browser brands and various hardware platforms the problem would be manageable, but unfortunately every browser seems to give a slightly different dimensions to the vertical and horizontal offsets. Thus even if you have perfectly lined up your foreground and background images in your particular brand and version of Web browser, you cannot count on the images lining up on someone else's screen. Even within one company the offset is inconsistent; the different platform versions of Netscape all give slightly different offsets.

Fortunately Microsoft recognized the problem and has added support for two new HTML tags to Microsoft Explorer 3.0. The "LEFTMARGIN" and "TOPMARGIN" tags allow direct control over margin offsets, and Netscape has committed to support these tags in the 4.0 version of Netscape Navigator.

For those of you interested in pursing a career in web page design, check out the HTML Writer's Guild.  You can join the Guild for $40 or try it out with a free trial membership.