Contents Page Design Introduction Graphic design 100 Balanced pages Design grids for pages Graphic safe areas Page headers Typography I Typography II Typefaces Consistency Basic Tables Page length Cross platform issues Editorial style Frames Advanced tables		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. The imagemap banners at the top of the pages in the Yale C/AIM Web site are designed to deliver graphic impact to the page while offering the user six links within the top one and a half inches of the page: Graphic has been reduced from the original size.   www.med.yale.edu/caim/ 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: Graphic has been reduced from the original size.   www.sun.com 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: Graphic has been reduced from the original size.   www.sun.com References Sun Microsystems Yale Center for Advanced Instructional Media (C/AIM)