As you have probably discovered designing a Web page is mostly an effort in establishing balance between the capability of multimedia browsers and the ability to put graphics within the Web page. One analogy we've encountered is that home or menu pages function like the covers of books or magazines. They should draw the user into the material with a combination of text and interesting, subject-related graphics.
HTML can be used to create complex and highly informational web pages when it is used carefully. However, used inappropriately or inconsistently the typographic controls and in-line graphics of web pages often result in a confusing mish-mash of text and graphics, with no apparent order of importance or relevance. Including graphics on a web page requires the author to expend more effort in design considerations, in establishing the 'right' mixture of colors, text styles and images, and in finalizing the page layout.
The objective of this article is to discuss the problems and limitations with 'page layout' and to offer ideas for optimizing the look and effectiveness of your Web page, blending text and graphics to achieve a powerful page presentation. If you need more basic information, you can review the previous PWP Help Community tutorials which discuss:
So why bother with graphics?: Color graphics are one of the defining characteristics of online publishing, the difference between the basic text-based exchange of information common to the Internet of a decade ago and today's rapidly expanding World Wide Web. There are some potential performance drawbacks to stuffing your Web pages full of big, bright color images, however, with proper planning you can optimize your graphics for faster downloading and more accurate color reproduction on your reader's screens, as well as achieving an effective relationship with the text.
Graphicography: In the world of newspaper, magazine and book publishing, the term 'typography' is used when discussing the formatting of a page. Webster's Dictionary offers a definition of 'typography' as, "The arrangement, style and appearance of printed matter." We might like to stretch the point and call designing of the arrangement, style and appearance of a web page as "graphicography", or for the sake of readers who share our limited vocabulary, will refer to it simply as 'page layout'.
Limiting factors in graphic page design:
Browsers: Most Web browsers, like Internet Explorer and Netscape Navigator, "solve" the problems of too many picture colors by using the 'system palette' of the Macintosh or Windows operating systems. When running on a 256-color screen a Web browser has no way of optimizing your particular custom GIF colors. It just uses simple logic to force the range of graphic colors on the Web page to conform to one of the colors in the standard system palette. Unfortunately, the system palettes for the Mac and Windows are not the same, only 216 of the colors are identical in both system palettes. The problem shows up when two or more custom-colored GIFs (that could make 512 different colors altogether) need to be on the screen at the same time on a computer display that can only show 256 colors simultaneously, then the colors in your GIF images will look distorted. The result is often color banding, or harsh distortions of the original colors.
Monitors: The 'informational page' available to a visitor to your web site is the monitor's screen. The average monitor sold today is only about 15 inches in diagonal measurement, and most video cards show a 'desktop' of about 640 by 480 pixels. Of course 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.
Page Layout: The page author's choice of text and image style, format and size, as well as the number of images, can be major limiting factors to the effectiveness of a web page. Browsers present different text and graphics formats to the viewer in slightly different ways. For example, an image may have to be fully downloaded before being displayed or it may be displayed line-by-line or interlaced (gradually from blocky, unfocused basic to high resolution, focused image).
General Page Layout Considerations:
Offering consistent, predictable links and page elements and consistent graphic scheme is important to an effective web site. Design grids are quite beneficial in achieving those consistent web page layouts. A carefully organized design grid, consistently implemented, will aid visitors in quickly finding the information, as well as demonstrate that this is a thoughtfully organized collection of information.
Patrick J. Lynch (Yale University) and Sarah Horton (Dartmouth College, web masters of the Yale Center for Advanced Instructional Media web site, state, "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.
Visual contrast and page design: Effective 'page layout' depends on the visual contrast between text blocks, graphics and the surrounding empty space. Nothing attracts the eye and brain of the viewer like strong contrast and distinctive patterns, and you only get that effect by carefully designing them into your pages.
Consistent graphic identity: One major purpose of careful graphic design is to give your site its own visual identity. Consistency of graphic and text layout allows the reader to immediately identify the main point of the document, and the relationship that page has to other pages on the site.
Graphics used within headers can provide 'connection' between your web pages. The initial portion of a page should contain a prominent text or graphic logo. Graphics placed above the title line must not be allowed to force the title and introductory text off the bottom of the display, instead they should be sized to compliment the title. Effectiveness of these 'logo' headers is achieved by using them on all pages in your site. Similarly, well-designed page footers, perhaps in small graphic format, might carry basic information, about the origin and age of the page, as well as the usual set of links to other pages.
Text is an image, too: When your page presentation is mostly text, layout is used to develop "graphic" patterns on the page. Initially your visitors don't see the specifics of the title or other details of the page, but the overall pattern and contrast of the layout. Their eye first views the whole page as a purely visual pattern (graphic), then begins to identify and pick out page elements as text and graphic. Regular, repetitive patterns of text and graphics, carefully organized, help to quickly convey the location and organization of your information, and improve the overall legibility of the presentation. Patchy, erratic layout hampers a visitor's ability to identify content format quickly, and makes it almost impossible to quickly predict where information is likely to be located.
When a page is crammed with dense text, the eye perceives a wall of gray and the brain rejects the lack of visual contrast. Uniformly bigger text won't help. Consider the use of the physical style controls of HTML to make text bold or italic without increasing the font size. However, remember even boldface looses impact very rapidly if everything is bold, because then nothing stands out.
Our eyes have been trained to use the tops of words as a key to reading and identifying words. How you use uppercase and lowercase letters can have a dramatic effect on the readability and impact of your page. Words formed with all-uppercase are monotonous rectangles that offer few distinctive shapes to catch the reader's eye, much harder to read. Because we primarily scan the tops of words as we read, headlines are more legible when they use 'downstyle'. 'Downstyle' is a typographic term meaning you capitalize only the first word, and any proper nouns, thereby getting some letters which rise above the top or which drop below the bottom of the majority of letters.
Avoid use of all uppercase words, even in headlines and headers! Generally, use downstyle for your headlines and subheads. Also, use only the number of heading styles and subtitles necessary to organize your text content. Use your chosen styles consistently. Don't use six levels of headings in a single page just because HTML has six levels.
Minimizing the effects of monitor, video card and browser limitations: Of the limiting factors we presented earlier, the only one over which you have any direct control is the page layout; the type, size and style of text and images. This does not mean that you can't adjust your design to improve how your page is presented to the viewer, regardless of the type of modem, browser or video display which they might have! We strongly suggest that your page design always considers what the average reader, with the average display monitor and graphics card, will see within the first screen of information. By putting careful thought into the layout of your page, you can still achieve graphic impact, within the screen's display area, presenting careful layouts of text and links with relatively small, supportive graphics. Think in screens of information, not pages, basing your decisions and compromises on optimizing your graphics for various display monitors and modem transfer speeds.
It is better to gradually increase the graphics load of your pages, drawing users into your site with reasonable download times. As users become more engaged with your content, they will be more willing to endure longer delays, especially if you give them notes on the size of graphics, or warnings that particular pages are full of graphics and will take longer to download. We believe the overall point is clear: the more graphics space you use, the longer your reader will have to wait to see your page.
Bordered Backgrounds: A bordered background is one which has a small portion, usually on the left, which is different from the remainder of the background. The border may simply be a different or contrasting color, or it may contain a logo or design. Although the image is significantly smaller than the display screen, the browser would 'tile' (repeat) the image as many times as necessary to fill the display screen. It is essential that you make left-bordered backgrounds wide enough to avoid them tiling horizontally as well as vertically and repeating the border across the page. Measurements of about 1200x50 or so should work for most monitors, with the border taking up about 50-100 pixels (or whatever you need) of the width.
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 typography: the lines of text in most Web pages are much too long to be easily read. Unfortunately most Web pages are almost twice as wide as the viewer's eye span (about 3 inches), 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.
Tables: Without tables the actual layout of pages depends entirely on the width and height of the browser window. All of the issues of legibility, readability, and style previously discussed presume your ability to position words, images, and screen elements.
As stated on the Yale C/AIM web site, "Tables are currently the only HTML option for page layout. When the visitor resizes their window, the text reflows to fill the new space. Though some may consider this a 'feature,' it actually hinders the reader's experience with the content. To avoid this use tables to define the areas of your pages. Use table cells to create margins, put your text in table cells to limit the line length (ideally 10 to 12 words on a line), and use cells to position elements on the page."
The behaviour of a table depends largely on how its cells are defined. For the purposes of page layout you should define cell widths with absolute values. Additionally, the cell should contain a single-pixel GIF, or HTML defined 'blank space' (&160;), equal to the width of the cell to make sure that the table dimensions do not change when the browser window is resized.
We are not suggesting you enclose your entire page's text and images in colored and shaded borders. Instead, we are using tables to get around the limitations of HTML, and using them in ways in which they were not intended. They are invisible tables whose sole purpose is control over page elements. Be sure to set BORDER=0.
Gutters: In print the space between columns is referred to as a gutter. You can use tables to create gutters, either through 1) adding a cell that serves as the gutter, or 2) by using the cellpadding (space between cell contents and cell) or 3) cellspacing (space surrounding cell) attributes. NOTE: In our examples we set border=1 for table visibility, although when using a table for controlling layout it would be border=0.
Adding a cell that serves as the gutter:
| 1 |
 |
Table with cell gutter |
Using the cellpadding attribute:
| 2 |
Table with cellpadding = 8 |
Using the cellspacing attribute:
| 3 |
Table with cellspacing = 8 |
Use tables in creative ways to help achieve effects that you may want to incorporate into your web-publishing efforts. A tutorial on creating and using tables is included in PWP Help Special Features section. There are a number of design challenges for which tables provide the solution. Experiment with tables and their attributes, learning the capabilities and then apply your knowledge toward designing your 'perfect' page or site.
