Guidelines: Page MarginsThe margins on a page are the areas around the edges that generally do not contain text or images. Most hard copy (i.e., printed on paper) books have fixed margins for each edge that are followed consistently throughout the work. Margins have existed virtually since the beginning of books, and they are an important element in book usability. Usability refers to the efficiency, comfort, safety and satisfaction with which a wide range of people and under a variety of conditions can perform their tasks with a product (i.e., a good or a service). The purposes of margins are to make books, magazines and other printed or written material easier to read both by controlling column width and by providing a nice contrast between the text areas on the paper or other material on which the text is printed or written. Margins are also used by some readers to make notations. Margins are also important in web page design. They can make pages easier and more pleasant to read both by their very existence and because of the fact that they can reduce column width to a more readable level. Many people also consider pages with margins to be more aesthetically pleasing than pages without. However, web pages are frequently created without margins. One reason for this is that it is slightly easier than creating pages with margins; that is, the HTML (hypertext markup language) coding becomes slightly less complex. Another is that many web site developers do not understand the important role of margins. It is also common, and even worse from the standpoint of usability, to design web pages for which the column width exceeds the width of smaller computer display screens; that is, it exceeds 800 pixels (i.e., the tiny dots that are used to display and store images). This forces the user to engage in horizontal scrolling to read the text. Horizontal scrolling can be very annoying because it is necessary to scroll back and forth for each line, in contrast to vertical scrolling, for which it is necessary to only scroll downward occasionally. When confronted with a page that requires horizontal scrolling, many readers will try to read the first few lines and then give up unless it is an unusually interesting topic. More sophisticated users will sometimes copy the text from such a page to a text editor, where it will be easier to read.
When designing web pages, margins and column widths should generally be expressed as a percent of page width in order to maintain proportional margins on both the right and left hand sides and avoid horizontal scrolling. Thus, the appropriate HTML coding should be something like The main exception is when it is necessary to use an image that is of fixed width. But images can be prevented from making a text page require horizontal scrolling by keeping their size small. If a large image would be beneficial, the small image can serve as a link to a larger version on a separate page. Some web sites have introduced very narrow columns or even several parallel narrow columns claiming that it enhances usability because it is similar to the layout in newspapers and magazines. Unfortunately, very narrow columns can also be very annoying to read on computer screens. The analogy with print media is not a good one because very narrow columns can require a lot of vertical scrolling, whereas scrolling is not necessary with print media. Such columns are particularly annoying in the case of smaller display screens and/or for people who prefer larger font sizes (as do most people over the age of 40) because increasing the font size means that each row in a column contains very few words. It is also important to have margins at the top and bottom of each page. These should be designed so that they make the page attractive. In particular, it is important to have sufficient space at the top so that the page title does not appear to be crammed against the top of the screen when the page is opened. A smaller margin should be used at the bottom, as there will already be considerable blank space between the end of the text and data at the very bottom of each page such as the copyright notice. The margins at the sides of each page should be identical throughout a site in order to maintain site-wide consistency, as consistency is an important part of usability and thus an important characteristic of LINMO-compatible web sites. Likewise, consistency should be maintained throughout the site for the top margin and for the bottom margin. There are two main ways of creating margins: HTML tables and the margin attribute in HTML and CSS (cascading style sheets). Tables have the advantage that they are consistently supported by virtually all browsers. However, they are only useful for right and left margins, and they can be a little confusing to people not familiar with HTML. The HTML and CSS margin attributes can, at least theoretically, control all four margins, but they have the serious disadvantage that they are supported only partially or inconsistently by various web browsers. The Linux Information Project (LINFO) uses tables to create its margins. It consistently uses ten percent of page width for each of the right and left margins and the remaining 80 percent for the single column of text. This creates margins roughly comparable to those of many hard copy books, and it results in a pleasant appearance and a high degree of readability. A narrower column width could be used, but at the expense of requiring more vertical scrolling. One exception to the strict use of margins in LINMO-compatible web sites is the inclusion of the two links, on visible and one invisible, in the upper left hand corner of each page. This exception is made because of the great importance of those links to identifying the site and to its ease of navigation, and because of the fact that they are not visually intrusive if well planned. Detailed information is available on the page Guidelines: Hyperlinks. Created May 8, 2006. |