Sooner or later, every Web site creator discovers that designing for the Web is pretty different than designing something that's going to be printed out. Before you can unleash your inner graphic designer, there are a few conceptual hurdles to clear.
To understand the problem you're facing , it helps to consider the difference between an HTML page and a document you might create in a program like Microsoft Word. Word processing programs help you prepare your content so that you can print it out. In that environment, you know all the details about your output medium (things like the paper size , whether or not the printer supports color , what fonts are available, and so on). As a result, your word processor gives you absolute control over every detail.
HTML is a more freewheeling standard. When you create an HTML document, you have no idea who's going to look at it or what kind of monitor, screen settings, Web browser, and so on they'll be using to view it. The way your document appears could change dramatically, depending on whether the person viewing your page turns on large text, shrinks the browser window to microscopic proportions , or switches off pictures. And if people surf to your site using a trendy pocket- sized PC, they'll get a completely different view compared to those who have the latest widescreen computer monitor.
| UP TO SPEED |
A resolution of 800 x 600 means that the entire monitor shows a grid that's 800 pixels wide and 600 pixels high. A pixel is the smallest unit of measurement on a computer monitor, and is otherwise known as a "dot." In other words, a resolution of 800 x 600 gives programs 480,000 pixels to play with, while a mediocre 640 x 480 resolution offers only 307,200. Clearly, higher resolutions can fit in a lot more content.
It's important to realize screen resolution isn't directly tied to the size of your monitor. In other words, a 17" monitor can have a higher resolution (and show more information) than a 19" monitor. However, it makes sense for larger monitors to use higher resolutions. That's because on a small monitor, high resolutions look cramped. Monitors support a wide range of resolutions, and you can choose the best compromise between showing lots of content (a higher resolution) and making sure that content isn't too small (a lower resolution).
One of the most important considerations in print design is the physical size of the document. For example, you need to use much larger text on a poster than a business card. In the world of the Web, you don't have the luxury of worrying about size. Web surfers can shrink your window at will, changing it drastically (see Figure 5-1). You need to accept this reality, and make sure your Web page looks good regardless of who's viewing it or what kind of browser they're using.
In some rare cases, you might know how big a browser window your visitors will use. For example, if you're designing a private Web site for an internal company network, where computers are all configured the same way, you can depend on everyone having the same view. But in most cases, you'll need to aim for a design that satisfies a broad range of viewers .
The first step in your quest for design equilibrium is to determine the smallest window size you want to support. See the box "How Big Is Your Window?" below for some good tips on choosing the right size for your pages.
Once you know the window sizes you're aiming for, the next step is to resize your Web browser window to match these dimensions. That way, as you're creating your pages, you can preview each page in a browser and make sure it looks okay. Fortunately, many HTML editors have a feature that opens your page in a browser window set to a fixed size. For example, in FrontPage you can choose File Preview in Browser, which has options for common window sizes.
| DESIGN TIME |
How Big Is Your Window?
Here are three good guidelines that the Web's most successful sites follow:
For an example, surf over to read an article on the New York Times Web site (www.nytimes.com). If you adjust the size of your browser window so that it measures 640 x 480, you'll be able to see the full width of an article along with the links for moving from one page to the next. (Any narrower, and some text is cut off.) At 800 x 600, you see the outskirts of the page, which includes related links and advertising banners. At 1024 x 768, life doesn't change very muchyou just wind up with an extra margin of blank space on the right-hand side.
To achieve this kind of good-for-all-viewers result, you'll need to use the layout features described in Chapter 9. However, you can start following good design principles right away, by testing your pages at all these sizes.
Before you start tagging up your Web pages, there's one other concept you should understandthe difference between structuring a document (arranging it into sections like headings, paragraphs, and lists) and formatting a document (making the sections look different). Novice Web masters who don't understand this difference always end up formatting when they should be structuring, which leads to messy HTML that's difficult to edit.
In keeping with this distinction, HTML has two types of tags:
Logical tags (sometimes called idiomatic tags ) describe the type of content. For example, logical tags identify headings, paragraphs, quotations, code snippets, and emphasized text. However, logical tags don't determine the specific formatting details about how your content is displayed in the browser.
Physical tags (sometimes called typographic tags ) are all about formatting. Examples include tags that apply italics, boldface, underlining, and different fonts. Physical tags don't tell you anything about the content of the text within them.
These two types of tags represent two different ways of thinking about HTML. When you use logical tags, you define the structure of your document. For example, you use logical tags to organize the r sum document in Chapter 2 into separate sections, including a heading, several paragraphs, and a bulleted list.
| POWER USERS' CLINIC |
In this example, the self.resizeTo() command changes the size of the window while the page is loading. The first number in parentheses is the width, and the second number is the height. Replace these numbers with your own numbers to test different window sizes. Just remember to remove the <script> block when you're finished testing.
You could use the same devious trick in your finished page to resize a window without your visitors' permission. But don't. This tactic is guaranteed to drive visitors away from your site in record time.
When you use logical tags, it's up to the browser to decide what formatting to use. The perfect example of a logical tag is <address>, which is occasionally used to identify contact information (like a Web or postal address):
Most browsers format addresses in italics, just as though you used the <i> tag. But the important point is that a browser doesn't need to format address tagged-content in italics. Instead, you're using the <address> tag to identify the type of content.
On the other hand, when you use a physical tag, you specify the exact formatting you want to appearin other words, you're micromanaging your Web page. It's like telling the browser: "Listen up. Put this word in italics; and put that phrase in bold face." In fact, two of the most popular physical tags are the <b> and <i> tags (for bold and italics) that you learned about in Chapter 2.
Logical tags have ruled the roost ever since HTML was invented. The creators of HTML imagined a world where document writers didn't want the hassle of formatting, particularly because different types of browsers would present the same document in different ways, depending on the capabilities of the Web surfer's computer. Even better, logical tags let programs other than Web browsers analyze HTML documents. For example, someone could create an automated search program that scans Web pages, and extracts just the top-level headings to give you a barebones outline. Or browses Amazon to find book reviews. Or creates a junk-mail list by reading <address> tags. A comparable program that came across a Web page filled with nothing but physical tags wouldn't be nearly as interesting. For example, who cares how much text is in bold on eBay?
All of this discussion raises a good questionif Web page writers are supposed to describe the content and structure of their pages, what's left to make sure the page looks good? The HTML powers-that-be could create more tags just for formatting, but that would force page creators to do more work, make HTML more complicated, and choke the average Web page in a swamp of ugly details about fonts, colors, and alignment. Even worse , because the content and the formatting information would be glued together, it would be hard to change. Imagine a page in which you not only had to tag every paragraph, but you also had to indicate which font you wanted to use. What a headache . To avoid problems like these, HTML only has a few, idiosyncratic formatting tags like the aforementioned <i> and <b> tags. Web purists hate them.
The solution that HTML gurus finally hit on was to separate the formatting information from the document's content, and place these two pieces into separate files. Here's how it works. First of all, the HTML documents you create in this scenario continue to look more or less the samejust like the ones you learned how to create in Chapter 2. They keep the same tags for paragraphs, headings, and lists, but not much more. This is good news alreadyit means you don't need to change your approach or throw out the basic tags once you've mastered them.
Next, you create a separate document using a standard called CSS (Cascading Style Sheets). The style sheet defines how every type of element in your HTML document should be formatted. For example, it contains instructions like "make every heading bright red" and "give all paragraphs a 15-pixel margin."
Once you've perfected your Web site's look and feel, you link your Web page to the style sheet and the transformation takes place (see Figure 5-2).
There are many benefits to the style sheet system. First of all, you can reuse the same style sheet for many Web pages. Because getting your formatting right can be a long and tedious chore, this is a major timesaver. Even better, when you're ready for a new look, you don't need to mess with your HTML documentsinstead, just tweak the style sheet and every linked page gets an instant facelift.