Chapter 1

Making Effective Browser-Independent Graphics


CONTENTS

Reading this chapter, you must be interested in designing better Web pages and graphics. If you don't know much about the language used to create Web pages, it isn't the end of the world. As an artist or designer, you may even find it too restrictive to concern yourself with Hypertext Markup Language (HTML) when creating graphics. If you'd like to know more about this method of creating electronic publications, there is no better place to start than Laura Lemay's Teach Yourself Web Publishing with HTML in a Week or the other books in this Web Workshop series.

HTML isn't really a programming language. Instead, it's a way to structure the elements of a publication by using embedded tags. Its big brother, Standard Generalized Markup Language (SGML), is used to structure technical documents, primarily for the government and military. Probably the most frustrated HTML users are those accustomed to the power and flexibility of page composition programs such as PageMaker and QuarkXPress. HTML, however, isn't a page layout tool either.

NOTE
We're often asked how we, as Web authors, view the potential of the World Wide Web and the tools available for publishing information on it electronically. If you've been involved in computers long enough-say from the mid-1970s-you can extend the development of word processors to what one might call Web processors. Early word processors required the user to memorize dozens of embedded commands to perform formatting tasks. WordStar fans, can anyone remember how to copy a range of text from one part of a document to another? It was worse than an impromptu root canal.
Productivity tools, such as the editor in Netscape Gold or PageMill, or filters in Microsoft Word or PageMaker, are temporary, easy-to-use front ends for what is essentially still a structural tagging exercise. You might say that Net publishing is in a 1975 developmental stage. Programmers are still awaiting fully functioning Web processors.

This means that the content and structure of a Web page are much more important than its visual design. True, you can produce nice pages (see Figure 1.1) using the limited design controls available in the various versions of HTML and with the display characteristics of various browsers, but it's not like using a page composition tool.

Figure 1.1: Pages delivered on the Web can look very much like traditional pages (http://www.cweb.com/inventory/welcome.html).

If you haven't thumbed through this book yet, go ahead and page through to see the types of graphics I'll be discussing. Better yet, take some time to do some Web surfing, except this time visit your favorite sites with an eye for graphics. It's amazing how different images can look when you're looking specifically at the graphics.

The subject of design and Web graphics is more than simply making great graphics. Design includes how the client interacts with visual and textual elements, how they are presented on the screen, and how the browser interprets everything. So the entirety of Web design includes

A browser is a software program that navigates through the Web of networks and attached computers, reads HTML files, and interprets their tags to display text, graphics, and other resources. There is no standard browser. Some are very robust, and others are little more than digital teletypes, sending text from the file to your screen.

No other subject elicits more groans and whines than does the subject of browsers, specifically because what you see on your screen depends to a great degree on how your browser is able to interpret and display the HTML files and associated graphic, sound, and multimedia resources.

This book takes the approach that good design and graphics are browser independent. But wait, you ask, "How can I get my graphics exactly where I want them if I can't give the navigator a number carried out to twelve decimal places?" This question is especially common among the pocket-protector CAD crowd, or among right-brained creative Web designers, who say, "I want to rotate that image a smidgen and blend the text and graphics to achieve a greater sense of harmony."

The answer to this question is that it is much more important to get the right graphic, at the right place in your site, in the right form, with the best descriptive text, than it is to have ultimate control over design nuances.

Another reason for browser independence is that you may want to repackage a publication that was first done by traditional paper printing into a Web site, interactive multimedia title (see Figure 1.2), portable electronic document, or into any other media.

Figure 1.2 : A multimedia title interface. Is it possible to implement this design via the Web?.

The Web can be considered a publishing genre with its own set of evolving expectations. In fact, the way the Web developed-without any rules-allowed early Web sites to stretch traditional conceptions of publishing. Free form, no rules, and over-the-edge Web sites that amaze and amuse will always be around.

But if the Web is to develop into an economically viable entity, where information can be easily found and goods and services contracted, it will necessarily take on many of the characteristics of traditional publications.

NOTE
George Fisher, CEO of Eastman Kodak, comments on the Web's future to the American Association of Advertising Agencies. It is his estimate that Kodak has spent several millions of dollars maintaining their Web presence without making any money. Still, he acknowledges that as a company they have learned a lot. His view is that the Internet is a tool to interact with customers and get them to buy and understand your products. Fisher views it as a powerful medium, but one that has its limitations. In Kodak's business, high resolution images are the core of their business and digital images delivered over the Web simply can't compete with a high quality TV ad. He concludes that the real winners will be those who have integrated messages across different media.

The remainder of this chapter encourages you to think seriously about how a Web site functions and the planning necessary to pull one off.

Describing Your Design

Remember when Denzel Washington, in the movie Philadelphia, said, "Explain it to me like I was a five-year-old"? The same can be said about designing any product, especially a product as involved as a Web site. Consider the following Web site descriptions:

NOTE
Create a Web site that presents our company's products and their performance characteristics. The client can request additional product information and determine the address of the closest sales representative.
or
Create a Web site that allows the client to visit our virtual company to meet company managers and selected employees. The client can request a copy of our annual report and begin receiving the company newsletter.
or
Create a Web site that provides the client with an unstructured path through simulated life decisions, which include education, career, relationships, family, lifestyle, and unexpected crises for the purpose of psychotherapy role-playing.

Each of these descriptions elicit totally different images. Color, text, interface elements, resources, and interactivity would all be different for the three designs.

NOTE
Have you ever thought of the number of variables around which something can be described? The following are some of the variables that might be important in describing a Web site:
          ClientSite PagesInteractivity
          age depth textcontrols
          educationinterlinks backgroundnavigation
          nerd factorintralinks graphicscues
          needsresponse videofeedback
 resourcessound input

Write an Abstract First

Let's assume that someone is interested in starting a Web site and because you are considered the resident technonerd and graphics guru, you're asked to make a proposal. Where do you start?

Creating an Abstract

To start the abstract design (design)process of Web site design

  1. Gather information. Interview those who will ultimately evaluate your efforts. Secure product literature, annual reports, newsletters, and any post or e-mail addresses or personnel lists that might be of assistance.
  2. Begin by writing a simple statement of function, a description of what your Web will provide. Review the following statement:
    Statement
    Provide the means to create dynamic special interest groups.
  3. Expand thisabstract design (design) simple statement into an abstract including client-site-pages-interactivity variables, as shown in the following:
    Abstract
    A Web site aimed at 30- to 40-year-old middle-level executives with limited computer background who are interested in building professional networks with others of similar interests. Clients will have entry-level browsing capabilities and access to a few, if any, supporting helper applications.

The site will allow the client to enter their personal contact information into a database and answer a battery of questions. These questions add keywords for searching and associating. The site will maintain a listserve for communicating within the database.

From the abstract, do you start to get an idea of design, colors, fonts, and interactivity? The great thing about the abstract is that your idea isn't just bouncing around inside your head. It's out there, warts and all, where it can be evaluated and refined.

Put Yourself in the Role of a Novice User

By far the most difficult thing about design is to view what you do through the eyes of someone else, which is sort of a Gemini approach. Because you probably aren't a novice yourself, you'll have to figure out some way to introduce the naiveté of a first time user. Remember back when just about everything about computers was confusing? Assume that those who visit your site have the level of sophistication that matches the description of your client in the abstract.

TIP
Ever wonder why books look like they do? Can you imagine using a reference without page numbers, running headers and footers, or sections? Book design developed not so much because of the technology available, but because when people are looking for information they want to know where they are, where they've been, and how to get where they want to go. People have the same needs on the Web.

Knowing the Functions of Web Graphics

Graphics on the Web serve much the same function as they do in traditional publications, with a couple additions:

A graphic interface must be intuitive. Your client must easily determine how to navigate through the site and what elements are clickable. The design itself must be coherent. That is, it must make sense. One way to achieve this is by presenting a consistent look and feel to your pages. Different colors for the background on each page? I think not. Highly detailed background tiles? Don't even think about it. Control panels that move around from page to page, introductions in different sizes and different text fonts, and a variety of buttons and click boxes? Not! Finally, pages must have readability. See Figures 1.3 and 1.4 for examples of effective readability. Your text passages should have sufficient white space and include descriptive heads. Your writing must be appropriate for the desired audience.

Figure 1.3 : An example of linked text appearing inline in a paragraph from http://ksgwww.harvard.edu/. Use this feature to gain access to additional information, not as a navigation tool.

Figure 1.4 : Topics in a jump list make finding information relatively easy. Note that this page from http://skgwww.harvard.edu/ utilizes a nested link.

Web sites are designed to entertain, inform, communicate, and persuade. These cardinal functions largely determine the site's structure and its graphic images.

Entertain

A major use of the World Wide Web can be to entertain. Look at the following Web sites for a cross-section of entertainment venues:

Inform

Informing someone about products, services, or information relies heavily on graphic images because information can be, well, boring. But a site whose main function is to make information available to the client must allow substance to prevail over form. Poke into these sites to see examples of information-driven Web publications.

Figure 1.5 : My favorite entertainment site is upside down.

Figure 1.6 : http://www.mystic.org/hosts a great maritime museum with maps, photos, and drawings.

Communicate

Communication is a two-way street. Most Internet communications ask for either decisions or keyboard input. Cruise by any of the following sites for examples of communications:

Figure 1.7 : You might expect a document company to create effective Web documents as is this site from NSD, Inc. (http://www.nsd.com/).

Persuade

Persuading someone to purchase a product or take action is a great potential for Web publications. These sites make use of persuasive as opposed to informative images. Surf these sites for examples of persuasive graphics.

Figure 1.8 : I never can find the latest sale catalog. With Lands' End's Web site you'll never miss out on the best offers (http://www.landsend.com/).

Design First, Stylize Later

A Web publication is a design in itself. It's more than just a collection of HTML files and graphics connected by links-it's more like a place where people live. Some cities grow up without any long-range urban plan. You've been there. You can see your destination, but there's no way you can get there from where you are. There was no planning. No one asked the right questions. No one put themselves in the place of someone, stuck in traffic, wanting to get somewhere else.

WEB WORKSHOP
The most basic Web design activity is to bring a graphic onto a page inline, that is in the middle of text. This example brings the graphic wwart.gif from the images directory (which is inside the current HTML file's directory) and puts it on a white page between two passages of text

A Web designer is like a cyburban planner. You get a chance to lay out the major arteries like the connecting surface streets, zone for collections of like businesses, and protect homeowners and property values.

Design should invite a user to dig deeper into a site. The structural design in Figure 1.9 effectively shows the structure that lies behind the style.

Figure 1.9 : By looking at the design of this page you can see the site's underlying structure (http://www.intergraph.com/).

HTML as a Structural Tagging Language

A tag is a set of text characters used for giving instructions to a formatter. In order to be distinguished from the real text you want displayed on your Web page, each tag must be set off from the text by delimiters. HTML utilizes less than (<) and greater than (>) characters because those are not generally encountered. Most HTML tags require an opening tag (<TAG>) and a closing tag (</TAG>). The HTML parser separates the text between the tags and acts on it based on the function of the tag.

The reason structure is involved is that you are able to check the use of the tags against a rule set. For example, this would keep you from using a second-level heading <h2> without a preceding <H1> tag.

HTML Is Not a Page Layout Tool

The differences here are starting to blur and all I can say is. . .yeeeesss! Any number of Web authoring tools are available to streamline the process. However, there is a hidden problem as it gets easier to make Web pages look like you want them to look.

Although it is not the intent of this book to be your complete reference for full-fledged industrial strength HTML, it is important to visualize the structure of an HTML document. Just remember, what you start, you usually have to finish. That is, you will usually match an opening tag <OPEN> with its matched closing tag </OPEN>. The only difference lies in the slash.

Setting Up a Simple HTML Document

HTML code is simple ASCII text that you can produce in any word processor or text editor. In Windows, you can use Windows Write. On a Macintosh, you can use Simple Text. Just make sure that you save the file without formatting (plan, raw, or unformatted). Otherwise, you'll have lots of nasty control characters that the HTML parser won't recognize.

We like to format our HTML code so that it's easy to come back to it in a week or a month and tell what's going on. The indents aren't recognized by HTML but can help identify structure. Likewise, capitalization is for your benefit as HTML doesn't recognize case.

To write a simple HTML document,

  1. Create a working directory with an appropriate title such as "My HTML Projects."
  2. Open a text editor, word processor, or one of the HTML editors included on the CD-ROM.
  3. Create the following text file:
<HTML> <HEAD> <TITLE> Simple HTML Page </TITLE> </HEAD> <BODY> <H1>The Page Heading</H1> <UL> <LI>First Item <LI>Second Item <LI>Third Item <LI>Fourth Item </UL> <H1>Page Footer</H1> </BODY> </HTML>
  1. Save the text file as text-only, unformatted text, or ASCII text with the HTM extension (filename.htm).
  2. Open your browser and choose File | Open File. You should see a page shown in Figure 1.10.
    Figure 1.10: The page as displayed in a browser.

These tools can be grouped into three general categories:

A major theme throughout this book is the importance of structure in Web publications. As authoring tools evolve, it is a natural temptation to bypass the front-end design and get right at making pages. Hold on! The time you spend in planning a design that accomplishes the site's intended function is well spent. It makes what you do later more efficient.

Planning an Effective Design

Okay, I admit it. I'm a planning freak. I plan things that most people think are controlled by forces of the universe or laws of nature. But at least I understand this peculiarity and can apply techniques I learned in therapy to overcome the heartbreak of over-planning.

Letting sites have lives of their own-develop their own style and structure-is a little like letting children grow up without parental supervision. Some kids turn out great, most turn out okay, and some kids, as you might imagine, are disasters.

NOTE
Overplanning can take the life and spontaneity out of a project. A good example lies in adobe architecture of the Southwest. Adobe dwellings often start out modestly (sort of like your Web site) with a single room. As a family grows, rooms are added, stories are raised, and a door is punched in a wall. This results in a style that at best can be called unique: nonstandard, nonsymmetrical, nonlinear, and nonuniform. Contrast adobe architecture with the linearity of a New England saltbox where windows and doors are aligned and symmetrical. It's difficult, but not impossible to plan spontaneity and uniqueness.

Just Like Planning Your Vacation

I've tried to use an architectural metaphor to describe design in Web publications. It always has helped me, but maybe you could compare Web and vacation planning. Both have many of the same constraints. Make your own Web correlation.

How much time do you have? If you have one day, you can think about a mini-vacation at an out-of-town motel. Have four weeks? Now we're talking!

How much money do you have? If you have the bucks, you can go anywhere for a weekend. Go ahead, hire a Lear jet!

No money? How's the old family station wagon? Is it up for 3,000 miles? How's your driving? Can you crank out 1,000-mile days?

Imagine starting on a vacation not knowing how long you could be gone, how far you wanted to go, or whether you had the equipment to get there. It's not for me, but then I like to plan.

Planning an Initial Design

The planning stage of Web development should be content independent. This is tough because everyone's natural inclination is to get the snappy graphics up on the screen as soon as possible. If you start worrying about graphics and text from the onset, your site may be dead on arrival-it looks good but doesn't function. In order to plan an initial Web site design you should,

  1. Gather information about the host (the person, company, group), the client, the client's products or services, and the proposed Web provider.
  2. Gather information about the client. Profile the client. Get to know how they think. How do they like to get their information? What do they want to do with it once they get it?
  3. Gather Web resources. This includes utilities for writing HTML, creating and editing graphics, and capturing and editing sound and video, if applicable. The first place to look is on your Web Workshop CD-ROM included with this book.
  4. Spend some time on the Web getting ideas. Think of this as creative calisthenics for your mind. If you have compiled a swipe file, get it out.
  5. Use 3´5 cards, each representing a page. Pin them up in spatial relationships. You'll be shown strategies to do this in Chapter 2 "Designing an Effective Web Site."
  6. When you have a strong mental picture of what the site looks like structurally, create a simple working shell like the one started in Figure 1.10. You'll find a selection of HTML templates on your Web Workshop CD-ROM that can provide a starting point for your pages.

Would You Leave Without a Map?

I admit I've always liked maps so you won't be surprised that I like Web site maps. I even like maps of Web sites in the Web sites themselves. As a Web designer, you will need a mental map of your Web terrain. As a client, a map of the Web speeds your route to the information and reduces the winding around that is so typical of Web sites.

Enhancing Your Design with Great Graphics

To conclude, for graphics to really be effective in a Web publication, their use needs to be planned from the start. A graphic image should present information that text or numbers do not present well: spatial relationships, operations, colors, and visual recognition.

WEB WORKSHOP
By aligning a graphic either right or left you can cause text to flow up to and then around the image. Use HSPACE to buffer the graphic if text gets too close. Of course, all this changes if you resize the browser window.

In traditional publishing (like this book), figure and illustration placement is paramount because pages have finite dimensions. The discussion of a figure and the location of the figure must be on the same or facing page, or otherwise effectiveness is reduced. Web pages differ in that a figure is just a link away. However, the same considerations apply: thought is broken and the associated text is removed from the figure. In Chapter 8 "Creating a Map of Your Web Site," you'll learn techniques for minimizing the disturbances in information flow caused by jumping to a linked graphic.

Next Steps

Now that you have been shown different ways to look at the design of a Web site and its graphics:

Q&A

Q:Why has it taken so long to have great layout tools for Web pages? Why did I have to pound HTML code for so long?
A:The culprit is the lack of display language across hardware and software platforms. If one display language had surfaced as the default-like display PostScript, the standard adopted by NeXT Computer, front-end tools could have been made to uniformly address the screen across all computers. The only standard was ASCII text. It let anyone, on any computer, using any text software, write instructions that could later be interpreted and displayed. This problem hasn't changed; we've just found ways around it.
Q:There are all sorts of neat things I want to do on my Web pages, but my browser won't handle them. What should I do?
A:Design for the lowest capable browser you anticipate will be accessing your Web site. If you can't display tables, others can't either. What are you going to do for them? You can still deliver effective and attractive sites.
Q:I find it hard to put into words what I want a page to do. You say that it's important. How can I get better at this?
A:Start with word lists. Use 3´5 cards and jot down keywords that describe as many of the aspects or criteria for each page as possible. Then, pin them up on a wall and move them around, looking for similarities and linkages. You should be able to describe not only each page, but the functional structure of the entire site as well.
Q:I want my Web page to stand out. How can I do that?
A:A Web page is just like any publication-you have about 30 seconds to convince the reader that there is information of interest inside. Two elements contribute to this: visual appeal and visual clarity. Graphics play a large part in both these factors. That's why splash graphics are so important. It's also why the first page of your site needs to show exactly what can be found within and present an intuitive way to get there.