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.
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: | |||
| Client | Site | Pages | Interactivity |
| age | depth | text | controls |
| education | interlinks | background | navigation |
| nerd factor | intralinks | graphics | cues |
| needs | response | video | feedback |
| resources | sound | input | |
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?
To start the abstract design (design)process of Web site design
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.
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. |
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.
Web sites are designed to entertain, inform, communicate, and persuade. These cardinal functions largely determine the site's structure and its graphic images.
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:
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.
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/).
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/).
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/).
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.
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.
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,
<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>
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.
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. |
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.
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,
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.
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.
Now that you have been shown different ways to look at the design of a Web site and its graphics:
| 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. |
