Part 2 - Page Layout and Design

While the process of designing a page layout is a unique creative act and may approached in a myriad of ways, it is safe to say that having a plan in mind before you start is, if nothing else, likely to save you time and wasted effort.

Such plans can materialize as rough thumbnail sketches on a restaurant placemat or a paper napkin, or in your favorite graphics program but, without a doubt, you are likely to come up with a better-looking page if you start with some sort of conceptual sketch.

In paper-based publishing, designers tend to focus on how to best communicate the message. This requires decisions of many columns the layout will comprise, the position of headlines, graphic elements, appropriate typefaces and so on.

Because of the many limitations of the HTML language and the tools that were being used to code it with, the majority of web pages that have appeared during the first few years of the Web’s existence were built by adding some headline and paragraph tags to text, throwing in a few graphics, and linking to one or more other pages. Voilà – Mr. Notepad user’s own home page.

Fortunately, with the features in HTML 2.0 and subsequent versions, more advanced layouts are now feasible.

Information on adding graphics appears in Modules 3 and 4, and the process of uploading files is covered in Module 10. Each of the techniques used is described in considerable detail in an applicable section of this manual. But if Just Doing It is your goal, starting from an existing “template” is the fast-track method.

Although HTML is still far more limited than, say, the PostScript page description language that paper-based designers often use to output their pages, the advent of tables, frames, client-side image maps, font and color controls and other features give this year’s web designer much greater design freedom than ever before.

Of course, with that freedom comes responsibility. At least for the foreseeable future, bandwidth and performance issues and browser compatibility considerations will continue to be a major issue when one is developing Web-page designs. All of these issues deserve your careful attention. Let us, for a moment, step back from this notion of what is-or-isn’t possible, given the limitations of the Web layout environment, and examine some principles of design from a traditional designer’s perspective.

Principles of Effective Design

The barriers between the so-called "desktop" and high-end electronic and/or traditional publishing have been blurred so badly that many believe that the term desktop publisher is effectively obsolete. Similarly, paper-based publishing has evolved into publishing online, in print, on video, and/or numerous other formats. Today, those of us using computer-based tools for publishing tasks are perhaps better termed "electronic publishers" or "digital designers."

As I mentioned earlier, I like to believe that a good design should exist without question, and the message it carries should be the voice that is heard.

Too often, modern designs scream "I was created on a computer." Here are a few DTP traps, all of which have counterparts in the world of online publishing.

• too many fonts
• the wrong message
• bad clip-art and/or poorly scanned images
• phony-looking drop shadows
• not enough white space
• ovals, rounded rectangles and other dubious design elements
• “eye assault” – low contrast or other hard-to-handle color combinations.
• the “effect du jour”

Those of you designing skateboard ads... all bets are off. The Grunge aesthetic of the alternative scene (think of beer ads or post-punk deconstructionism, if you prefer) is its own unique world, where rules are often turned upside-down to great effect. Even when lettering is deliberately meant to look damaged, or a page is designed to look as though it has been soiled or spilled upon, a good design should exist without question. If you put a 12-point typeface next to a 13-point one or squeeze the line spacing too tight, it looks like a mistake. Why? Because the reader is uncertain. "Did the designer mean to have those two columns not line up? Are those ascenders and descenders meant to be touching?"

Overlap two or three words so obviously that the headline looks like it is ready to burst off the page and no one will question it. "Edgy," at least on the web, is definitely in, although, of course, you have to tailor your designs for your target audience.

The Wrong Message

The best rule of thumb is to ask: "Does the page communicate the right message?" Typefaces, graphic elements, and/or other design components must all work together in support of the message you are presenting. A number of issues must be considered in order for this to happen, all of which boil down to one thing: who is the reader?

A page that would seem appropriate for a bank or other financial institution, obviously needs to convey a sense of reliability, professionalism and long-term stability. A design for an beer advertisement, however, reflects the lifestyles -- or at least the fantasies -- of the twentysomething generation that are the primary target audience.

How to Design an Effective Page

Keep it short. You only have a few seconds to catch a reader's eye. Color helps. A short list of your top attractions or newest products is better than a long list of everything under the sun.

As a rule of thumb, keep headlines to six words or less. Keep lists to 10 items or less.

Make it interesting. Involve the reader. A description of a product's benefits is always more effective than a list of its features. (Remember: explain, don’t just describe!) Make them think. Invite action and always avoid passive-tense phrases.

Include a great picture. In order to get quality pictures to illustrate web pages, the web designer needs to have access to some type of scanner, and a good-quality original. This means real reproduction-quality artwork or photographs, not flyers (they produce an unpleasant “moiré pattern” when scanned). See Modules 3 and 4 for more info on optimizing GIFs and JPEGs.

Don't fall prey to "clip-art syndrome," where amateur designers litter their pages with several small images. In design work, the secret is to be bold. Make the design stand out and take command of the reader's attention.

Focus Attention. When designing a logo or headline, pick the most important word and emphasize it. Make it bigger, bolder, or, if you will be printing in color, make it stand out. According to color psychologists, red stands out; blue recedes. Thus, blue makes a better background, red makes a better attention-grabber. Some combinations are effective, but have been corrupted by overuse or their negative connotations. Black text on a yellow background has great contrast, but reminds many people of those cheap quick-printed flyers on canary yellow paper.

Limit the use of exotic typefaces (or, in the case of Web pages, graphics that look like typefaces). If angled, warped, stretched, shadowed, or italicized text isn't essential to the message you are trying to convey, resist the urge. Never use an exotic typeface as body text. Don't use more than three or four typefaces in a single page.

All emphasis is no emphasis. Contrast is the key to a successful design. As a general rule, use a bold or extra-bold sans serif typeface (e.g., Arial, Helvetica, Swiss, Univers, etc.) for headlines, prices and phone numbers. Body text (the small lettering that comprises the "body" of your message) should be a serif face like Dutch, Palatino, Times, and so on. Never use all capitals in body text (it's OKAY FOR SHORT HEADLINES BUT QUICKLY BECOMES TIRING to read) and never, ever use all caps in a cursive script font.

White space helps. Don't crowd every inch of your page with text. Let the headlines breathe. Especially important -- leave plenty of white space around all sides of your page, unless it contains an image that bleeds off the page. As a rule of thumb, leave a white space zone equal to about 1/10th of the size of the design -- minimum. It often works well to surround this "white zone" with a dark border. Research show that people will look at a page with more white space longer. Really.

Contrast is good. If you are using boxes, whether black or white, follow the rule of thumb about borders in the last tip. Don't crowd text in a box that's too small. When legibility, comprehension and retention go up, your page’s message is more effective.

Check your spelling. Avoid spelling mistakes and/or grammatical errors. If you don't have perfect spelling and grammar skills, hire a proofreader. It's the best investment you can make. After all, it is your company's image that is at stake.

Common Grammatical Errors

While you are shaping up your page’s content, be sure to avoid the most common grammatical errors.

• Use “e.g.,” and “i.e.,” correctly. The former is correctly used in place of the words “for example;” the latter means “in other words.” In both cases, be sure to follow the second period with a comma.
• Proper use of punctuation. Single quotes are often used where double quotes should be. Always use double quotes, unless you are using quotes-within-quotes, as you might if you are quoting someone who is, in turn, quoting a third party. In general, always put periods, commas, question marks and exclamation points inside quotation marks. The only exception to this rule is if the word or phrase in quotes contains its own punctuation.
• Beware of source material containing typographer’s quotes “like these” instead of plain quotes "like these." While such smart quotes and smart apostrophes are very desirable on a printed page, they do not display correctly in all Web browsers. (We've deliberately left smart quotes in this section so you can see whether your browser supports them.) Other special characters, such as accented letters and special symbols, can cause problems. Even programs that purport to handle these special symbols automatically often create problems, as the ™ Test in the next section shows.
• For best results, use plain ASCII text. For existing documents, convert them using a program such as Add/Strip for the Macintosh, or your word processor’s search and replace function.
• Apostrophe-S denotes ownership. Another mistake many people make is to put apostrophes after pluralized words. (“We sell IBM’s” is wrong.) Note that the “s” in the “’70s” example above is not preceded by an apostrophe. Remember that if a word ending with an “s” requires an apostrophe it is correct to put the apostrophe after the “s” (e.g., Mr. Jones’ car). Also, “it’s” is a contraction of “it is” or “it has”— it’s not the plural of “it,” nor does it belong to it.
• Use hyphens and dashes correctly. A hyphen is correctly used to hyphenate. It is also commonly used in telephone numbers. Don’t hyphenate word-pairs in which the first word ends with “ly” (e.g., highly-toxic is wrong.)
• An “en dash” (so called because it is the width of the letter “n”) is slightly wider than a hyphen. An en dash is correctly used between two numbers, dates, or times.
• Wider still is the “em dash.” It is traditionally used for in-sentence emphasis. Unfortunately, en and em dashes suffer from the same compatibility problems as our ™ test exhibited. Don’t use them on the Web.
• It is better to use a bullet (a dot or box like the one at the beginning of this sentence) than a dash or an asterisk to illustrate a point. HTML has several standard LIST types, and Netscape Navigator 3.0 and later extends the possibilities further by allowing you to specify specific bullet types. If none of these are suitable, you can, of course, use small graphics as bullets instead. You’ll find a selection on the CD in the BULLETS directory.
• Italics are properly used to highlight publication or book names, editorial comments, foreign language quotations or occasional words of emphasis. You should also use italics when a product name is used in a headline (e.g., “Will the new version of GrammarMaster work?”).
• Don’t use two spaces after a period. One will do. Never use underlines, as these obviously look like links. Use italics or boldface type for emphasis instead.
• Capitalization. All caps is only appropriate for acronyms (e.g., SCSI, IBM, DOS). Do not use all caps for emphasis. Use italics instead. Do not capitalize words unless they are proper nouns (names, titles, business names, etc. — even when spelling out acronyms. Small Caps can be interesting, in moderation. The technique for creating small caps is detailed in the next module.
• And the number one grammatical error? Spelling mistakes. Even one typographical error in a document is one too many. Remember, your word processor’s spelling checker cannot tell if the word now is misspelled not. Let the computer check the spelling first, then read it over and look up any suspect words in a good paper dictionary. Be especially careful with names, which won’t be in the dictionary.

Remember, publishing – whether online or otherwise -- is all about communication. An error in your grammar or spelling will sabotage all the effort you put into design and layout. Correct grammar is of paramount importance.

These grammatical conventions are only the tip of the iceberg. There are dozens — hundreds! — of other common grammatical errors. Strunk & White’s Elements of Style, The Chicago Manual of Style and Fowler’s Modern English Usage are good books on the subject. (Canadians may prefer to refer to the Canadian Manual of Style instead.) These books provide rules that can help you avoid the most common journalistic gaffes. It is worth picking up one if you are interested in creating documents that work.

Different Browsers, Different Capabilities

Before we start to discuss specific page-building techniques, it is worth addressing the topic of browsers and their capabilities. If you are not familiar with exactly which browser version supports this-or-that feature, you aren’t alone. Netscape and Microsoft were by no means the only companies releasing browser betas at a furious pace since 1996, but they were among the most active. As I write this, both Netscape Navigator 6.0 ("final") and Internet Explorer 6.0 (beta) have just been released; the following descriptions therefore represent the latest features of these versions.

Netscape Navigator (hereafter referred to as Navigator) was, until 1999, the most popular web browser and is likely to remain popular for some time. The 6.0 release based on the Open-Source "Mozilla" codebase significantly enriches the feature sets of previous releases, both in terms of HTML and CSS (“Cascading Style Sheets”) extensions and in the many forms of media directly supported. Sadly, however, this version isn't particularly stable and has not been widely adopted as of early 2001. Netscape’s Navigator 4.7 release (code-named “Galileo”) is, at this writing, still the dominant version of the browser in use on the machines of most “Netscape users.” Thus, you should design your pages to work ideally with this version, and Microsoft’s 4.x and 5.x browsers.

In many cases, “state of the art” pages are enhanced with multimedia features, thanks to the support in these browsers for Macromedia Flash and/or ShockWave files, Cascading Style Sheets, VRML 2.0, audio and so on. In this section are summaries of the main authoring issues for different “generations” of browsers. The first-generation Netscape feature set (or lack thereof) is also applicable as a base standard to which you should make sure your web pages are still readable. Remember, not everyone is using the latest generation of computer, and many people are stuck with feature-limited browsers for whatever reason. DejaVu.org has a useful tool that can help you identify and resolve browser compatibility problems: it's a Browser Emulator that simulates a variety of older browsers, all the way back to NSCA Mosaic 1.0, the predecessor to Netscape. Perhaps the ultimate reference, though, is the Master Compatibility Chart at WebReview.com. Here's a summary of the most important feature differences between the major players.

Basic browsers: Netscape Navigator 1.x, Handheld "minibrowsers," etc.

• centering (not all browsers support the Netscape "" tag, though)
• tables (some versions)
• Meta tags (some versions)
• no support for frames
• no color fonts
• no animated GIFs
• no plug-ins
• no Progressive JPEG
• no Java or JavaScript

Netscape 2.0x and 2.0x Gold

• tables
• Meta tags
• frames
• font color and size
• plug-ins
• animated GIFs
• Progressive JPEGs
• client-side image maps
• Java and JavaScript
• additional extensions to HTML 2.0, as described at http://www.netscape.com/assist/net_sites/html_extensions.html

Navigator 3.0x

• all the above, plus
• table colors
• multimedia (features vary according to platform)
• Live3D (Windows and PowerMac)
• GIF support for more than 256 colors (not supported on Mac)
• additional HTML 3 and JavaScript extensions.

Navigator 4.x

• all the above, plus
• Macromedia ShockWave support
• Cascading Style Sheets
• VRML 2.0 enhanced Live3D (Windows and PowerMac)
• multimedia (features vary according to platform)
• additional HTML and JavaScript extensions.

Netscape 5.x/6.x

• all the above, plus
• Dynamic HTML support
• Improvements in support for Cascading Style Sheets
• XML support
• Customizable user interface.

Internet Explorer roughly follows the above pattern, except that versions 4 and 5 already offered most of the features delivered in Netscape 6. Its specific features are discussed on the next section.

As we can see, writing web pages that are compatible with all browsers gets increasingly tricky as we include more sophisticated content. Fortunately, the ever-evolving HTML language offers us many ways to do just that, as we shall see in later modules. I generally try to create pages that exploit features of the dominant standards and try not to build in critical features that eliminates access by these users - the Top Down system.

Remember - check your pages at different screen resolutions and with one or more previous-generation browsers to make sure the content still works.

Microsoft Internet Explorer, as noted earlier, roughly follows a parallel course to Netscape, with a few notable exceptions. Being a Microsoft product, it has supported Video for Windows (and QuickTime for Mac) since its early incarnations. Likewise, WAV audio support has been a standard feature. I’ll leave Internet Explorer (referred to as "IE" hereafter) 1.0 off this chart as there’s no reason anyone with Windows 95 should not upgrade to a more recent version, and all other platforms supported by IE has progressed beyond the 1.0 revision level.

Microsoft Internet Explorer

2.x

• marquees
• font FACE and SIZE tags
• table colors
• VRML (all 32-bit versions but 68K Mac)
• named colors
• additionally, the Mac version of IE 2.x supports Netscape plug-ins

3.0x

• all the above, plus
• ActiveMovie
• Frames (available in 2.1 for Mac)
• links in marquees
• VB Script
• Java and JavaScript
• Netscape plug-ins (available in 2.x for Mac)
• ActiveX controls
• GIF support for more than 256 colors
• Cascading Style Sheets (allowing such things as overlapping text!)
• PICS - parental control system (restricting access to “adult-oriented” pages)

additional support for HTML 3.2.

4.0x, 5.0x, 5.5 and 6.0

• all the above, plus
• DHTML, CSS, JavaScript enhancements. Java is no longer a standard part of the default installation.
• Security improvements
• Support for several new multimedia formats: Flash, Vector Markup Language, etc.

Windows CE 3 minibrowsers for PocketPC handhelds provide features similar to those listed in the "minibrowser" section, above.

One of IE’s most underused features from a web-authoring standpoint is called a Site Map.

Site maps give you a hierarchical view of the Web site so that you can see exactly how the site is laid out (and so you can go to the pages that you find most helpful and interesting). Site maps are not based on the HTML storage built into a site. Instead, the author provides the details about the site for the site map via an OBJECT tag. This way, the author can show the map of the site that he wants his user to see. If you don't take advantage of this new functionality, the user might not think that your site is as easy to navigate as a site that does employ maps.

Site maps are supported via the use of an .SMP file. The .SMP file is an ASCII file created by the Web author that contains the description of a site hierarchy and contains information about the site including:

The name of the document
The URL for the document
The index to the associated icon or a URL for the associated icon
The location of the hierarchy
The size of the file
The date the file was last modified
The way to display the file

The final format of the Microsoft .SMP file is subject to change, so I won't show it here.

At the moment, the best site-mapping tool I have seen is part of NetObjects Fusion (www.netobjects.com). Somewhat ironically, it does not fully support Internet Explorer. NetObjects Fusion is discussed further in module 9.

Page Breaks

If you provide documents on your Web site that users can print, you can control the placement of page breaks in your documents by using the page-break-before and page-break- after attributes. These attributes indicate when to break to a new page when printing the document and on what page (left or right) to resume printing. These attributes are useful when you want to print long documents into logical sections. For example, the following document defines a class "page" in a style sheet and uses it to set page breaks in the document.

<HTML>
<HEAD><TITLE>Print it Now!: Page Breaking</TITLE>
<STYLE>
    BR.page { page-break-after: always }
</STYLE>
</HEAD>
<BODY>
    content on page 1
<BR CLASS=page>
    content on page 2
</BODY>
</HTML>

This tip was provided by Microsoft Web Builder.

This Page Break function does not work in any non-Microsoft browser we've seen; however, Netscape and other browsers simply ignore tags they don't understand, so it doesn't hurt to add it to your pages if you want to help the majority of your visitors to format their pages for printing.

Mind Your Links

Would-be Webmasters, take note: I notice that there are quite a few broken links and malformed URLs at many Web sites I visit. Some of these problems have gone unnoticed because Netscape 1.x and many other first- and second-generation browsers tended to be quite tolerant of "broken" HTML. Netscape versions since 2.0, however, are much less tolerant than earlier versions when they encounter missing quotes and other HTML problems. A number of HTML editors, such as HoTMetaL Pro 3.0 and Hot Dog Pro 2.0, can check the syntax of your HTML code. If you have been building pages "by hand," consider running those pages through a syntax-checker to help you uncover and correct problems.

Example time!

A tag like <img src="src" alt="image" /> would have worked fine on earlier versions of Netscape, but note the missing the end-quote, which would cause Netscape 2.0 or newer to display the tag on-screen as shown above. Most embarrassing.

Provide Contact Information

Don't be too proud to ask your users for their comments. After you've had a few hundred comments about your site, it will become apparent which parts are popular and which parts need work.

Consider using a standard template, with header and/or footer information that appears on every page in your site. That way, people can easily contact you with suggestions or problem reports.

After a number of torrid affairs with buttons and menubars, I’m back to preferring a text line at the top or bottom of each page, not only for its speed and compatibility, but also for its sheer simplicity. Those buttons I see on so many pages pointing left, right and up - are they more informative than a few well-chosen words?

The Yesstories and WinterHarp pages provide an example of a standardized text bar on each page. These links are at the bottom of each page; you may prefer to place them at the top for easier access. The MP3 Zone.com songbook shows the interesting effect you get when combining a simple text menubar with a thin frame running along the top or bottom of the page. Unlike most frames, this one’s non-intrusive and actually serves a useful purpose. Frames are discussed further in modules 5 and 6.

Many designers would shudder at the gratuitous use of gaudy backgrounds, italics and center-tag laden text that adorns many of today's "Netscape enhanced" Web pages. While a plain-looking page is forgivable, a "fancied-up-but-ugly" page is more of a sin. Naturally, any notion of "good" design is very subjective, but here are some general recommendations.

Suggestions:

• Avoid centering everything, especially body text.
• Avoid gratuitous use of italics and headline tags for body text.
• Provide an option to optionally enable the Blink tag. The same probably goes for the Marquee tag that Internet Explorer users have to put up with on so many IE Enhanced pages.
• Establish a clear hierarchy of information. Avoid pages that have a lot of small text above a large graphic or headline. This looks unbalanced.
• Fix broken or out-of-date links in a timely fashion. On the web, Timeliness is next to Godliness.
• Go back and check your existing pages for HTML quote and end-tag problems, which can manifest as pages with missing information or improperly interpreted HTML.
• Anti-alias graphics (and any text that you want to be displayed in a specific font) unless you have a specific reason not to (and I’ll describe a few good reasons in the next two modules).
• Fix grammatical errors in text. (This, it could be argued, is the most important thing of all!)
• Be consistent with design elements.
• It is helpful to list an e-mail address. This is often put at the bottom of a web page, along with a note that says when the page was last updated.
• Focus more on info and less on the marketing angle. Information will keep them coming back to your site. Provide a summary of "What's New."
• Remember, not everyone uses Netscape or other "state-of-the-art" browsers. Test your pages on a variety of browsers and provide a plain-text or less fancy version for users who may have the "show graphics" feature turned off. Sometimes, it is best to provide an alternate "text-only" page; other times, you can make do with ALT="descriptive text" tags.
• Keep load times down, especially on introductory pages. Avoid loading your pages with graphics that take ages to load over a modem connection, or warn users in advance.

Avoid the "aren’t we clever" trap: Yes, it is possible to use JavaScript or Flash (etc.) to remove all the toolbar controls and menus from your user’s browser, but chances are, you are interfering with his or her ability to navigate. Don’t let cleverness overtake functionality. Attempt to optimize any user interface enhancements for reading. Never trap a person in a "dead end" page with no obvious means of escape.

If you, or the person doing the graphics for your site, are not grammatically and/or graphically inclined, may I also suggest that you have the pages examined and made over by a proofreader and a graphic artist.

Good luck!

A Place for your Pages

Here are some more topics that are worth thinking about, that we will also be covering later:

- Is there a limit to the number of megabytes your Internet Service Provider (ISP) will let you put on "your" web site? Do you have to pay extra?

- should you consider setting up your own web server (and/or e-mail server, etc.) and what are the pros and cons?

- Should you register your own domain name (e.g., "www.mysite.com"), or are you content to have your site be a subdirectory of your service provider's domain (e.g., http://www.serviceprovider.com/users/~yourname/yourpage.html)?

- are there any Internet services your ISP will not allow you to offer? (For example, Progressive Networks' RealAudio requires server software, which some ISPs are unwilling to install for at least two reasons: it is fairly expensive, and it can potentially be a huge drain on their available bandwidth.)

Exercise: contact your ISP and find out whether they are currently set up to support RealAudio, ShockWave, and/or VRML (Virtual Reality Modeling Language) files. All three of these categories (and many others) require special configuration on the server side, and not all ISPs support these features. The configuration details for VRML and RealAudio are discussed in modules 5 and 7, respectively.

There are, of course, many other "server side" functions that can add interactivity to your web pages. If you really want to have an "interactive" web site, with forms, guest books, access counters and so on, you either have to develop a close relationship with the technical support personnel at your ISP's office, or set up your own around-the-clock, high-speed Internet connection and establish your own Web server. These topics are covered in depth in Section nine, entitled Interactivity.

In the next section, however, we will put together a Web Toolkit.