by Lori Hylan
How many times have you conducted a search on the Web and been rewarded with a data-rich, plain-vanilla page: one with margin-to-margin text, H1 headers, and a gray background? Or perhaps you've come across its near opposite, the information-poor, graphically overwhelming page: one with a huge graphic, distracting background, and little else.My personal first rule of Web design is have something to say. There are literally thousands of pages on the Web that contain whiz-bang graphics, cutting-edge animation, the latest HTML tags--and little else. Likewise, there are thousands of pages of scientific and technical data with no visual or organizational structure in sight--which brings us to my second rule: Data does not equal information (or just because you have it lying around doesn't mean it belongs on the Web).
Once you decide that you have something to say, it's time to think about how to display your information so that your messages are clear and easy to read. You don't want to make your reader jump through extra hoops--reading text on a computer monitor is difficult enough. To get some basic principles on how to display information, I highly recommend Edward R. Tufte's Envisioning Information (especially the chapter on Layering and Separation). It's available free at your local library or for $38.40 from Amazon.Com.
Background Color
This was the subject of last week's column, so I won't spend much time on it here except to say that 50% gray (the default background color for Netscape) with black text is not a particularly readable combination. Even if you don't want to fool with fancy colors, setting your background color to white with a <body bgcolor="#FFFFFF" text="#000000"> would improve readability quite a bit.Margins
Another browser default that should be overridden is the margin width. Currently, most browsers have no margins to speak of--the text either butts right up against the window frame or is only a pixel or two away from it. Setting text in <blockquote>s is perhaps the easiest way of putting a little space between your text and the edges of the window. <blockquote>s can be nested, so you could theoretically create a pencil-thin column of text if you wanted to. Another benefit is that the <blockquote> tag has been in the HTML specification since the beginning, so it should work with any browser.If you want to control your margins and line length (words per line) more rigidly, then tables are your best bet. Tables can be defined as either fixed width, or relative to the size of the browser window. The former are measured in pixels, the latter in percentages. For example, if you wanted to specify a text area 480 pixels wide with 20 pixels of white space between the text area and the left margin, your code would look like this:
<table width=500> <tr> <td width=20> </td> <td width=480>How many times have you conducted a search on the Web and been rewarded with a data-rich, plain-vanilla page: one with margin-to-margin text, H1 headers, and a gray background?</td> </td> </tr> </table>Note that when you widen your browser window, the text does not resize; likewise, if your window is narrower than the table size, the text will be cut off on the right.
Most relative-width tables are set so that the table cells (<td>s) add up to 100%. However, there is a shortcut to setting left and right margins with relative-width tables: If you want a 10% margin, set the table width to 90%; if you want a 20% margin, set the table width to 80%; and so on. The right margin will automatically be set for you, and if you add a blank cell of equal width on the left, the result will be similar to the effect achieved with <blockquote>--that is, the text will resize relative to the window size.
<table width="80%"> <tr> <td width="20%"> <td>How many times have you conducted a search on the Web and been rewarded with a data-rich, plain-vanilla page: one with margin-to-margin text, H1 headers, and a gray background?</td> </td> </tr> </table>Separation
Margins are the first and most basic part of managing white space. But there is also space between paragraphs, around images, in tables, etc. Varying amounts of white space make great separators, with little need for rules. So here's a rule about rules: Use them sparingly. I once saw a document with an <hr> after every paragraph; it wasn't pretty. Similarly, consider very seriously whether you need borders on a table. In most cases you don't; a well-spaced table will be readable without borders, and a poorly spaced table will only look worse with them.A quick review of some space-control tags in HTML:
<p>
Acts like a double space; as a general rule, this is too much space between paragraphs in a section, but it's expedient and understandable by every browser.<br>
<img vspace=1 src="/img/dot.gif" alt=""><br>
The "dot.gif" is a 1 x 1-pixel transparent GIF image. By using thehspaceandvspaceextensions to the <img> tag, you can control the space on either side of the tiny square to simulate tabs, leading, and various other spacings.<br>
These are great when you need browser compatibility *and* large areas of vertical white space. Unlike with <p> tags, inserting multiple <br> tags gives you an extra line for each tag.Finally, if you can work out a beautiful layout in Quark, Illustrator, or Photoshop but you're having trouble getting the spacing right in HTML--and you don't want to give up your agonized-over font choices--consider going the giant graphic (or several large graphics) route. While the page will take longer to load than if it were straight text, the perceived load time is relatively short if the graphic is all or mostly text. If this sounds contradictory or confusing, check out the Epicurious site to see what I mean.
One thing I wouldn't have done if I were working on the Epicurious site is interlace the images. The whole idea of "perceived load time" is that you don't notice that the page is taking a while to load because you are reading more slowly than it is loading. If the image is interlaced, you can't start reading until the whole image has loaded, and the benefit of using an image of text is lost.
Two more things to keep in mind if you decide to go the ultra-design graphic route: (1) For regular, 12- to 14-point paragraph type, you might not want to anti-alias the type. Anti-aliasing makes the edges less jaggy, yes, but it does so by blurring them--and at smaller sizes this can make the type difficult to read. (2) Depending on your audience, you'll probably also need to create a text-only version of your page. This is not difficult, and I've found that the text-only audience is extremely vocal and appreciative. If you make their day by offering them an option, they'll make yours with positive feedback.
