|
All the HTML books in the world won't make you a good Web designer, any more than a book will teach you how to water ski. You learn to be a good Web designer by going out and creating Web presentations (lots of them) and by exploring the Web with an eye for what works and what doesn't. Combine that with the knowledge you picked up from the earlier chapters of this book, and you should be in a good position for creating excellent presentations yourself.
Just as an exercise, in this chapter we'll work through two real-life presentations:
We'll explore both of these presentations, page by page and link by link, and examine the decisions that were made in each presentation regarding organization, design, HTML code, use of graphics, compatibility with multiple browsers, and other issues that you've learned about in this book. After you're done with this page, you should have some concrete ideas of what to put in your own presentations and the sorts of tips and tricks that work well.
Seeing these examples on paper and having them explained to you in this book only gives you half the story. The best way to understand how these examples are designed is to actually go look at and explore them to see how they look in different browsers. Fortunately, these two Web presentations are living, breathing, working Web presentations. You can get to them from the address http://www.lne.com/Web/Examples/.
| Note |
I expect that the representations will change even after this book goes to press, with new information being added and each presentation being fleshed out. So even if you're not interested in following along now, you might want to check these out anyhow. |
The first presentation we'll look at is a small personal set of pages for one Maggie Porturo from Boston.
The way personal home pages look varies greatly from person to person, as they should. If you're planning to write a set of personal Web pages or have already done something along these lines, don't assume that this is the structure you should use or the way your pages should look. Your personal presentation, unlike anything else you are likely to do on the Web, reflects you and the way you see the Web. Be creative!
| Note |
Any resemblance that Maggie Porturo might have to your own intrepid author is purely coincidental. Really. |
The home page for Maggie's set of personal pages is shown in Figure 21.1.
Figure 21.1 : Maggie's home page.
The first thing you might notice from this page is that it seems to be quite graphic-heavy with the initial picture, the icons, and the gradient rule lines. Actually, although there are lots of graphics on the page, each one is quite small (both in size and in number of colors). None of the icons or the lines is larger than 500 bytes. The largest thing on the page is the photo-graph at 9.2K, and that's still quite small as Web standards go. In short, although many of the images might seem frivolous, work has been done to make them as small as possible.
Secondly, there's that headline next to the picture. Aligning multiple lines next to text is obviously a Netscape extension, and the source does indeed contain Netscape tags:
<IMG SRC="me.gif" ALIGN=LEFT ALT="">
<H1>Maggie Porturo and her all-singing, all-dancing home
page </H1>
<BR CLEAR=ALL>
But the inclusion of Netscape tags doesn't necessarily mean that the document will work only in Netscape. Let's look at the page in Mosaic (see Figure 21.2).
Figure 21.2 : Maggie's page in Mosaic.
The heading isn't aligned next to the image, but it still obviously applies to the page, and the design still works-it's just different. By testing your pages in multiple browsers, you can arrange things so that your design will work in multiple browsers while still taking advantage of different features.
What about that rule line? Why didn't Maggie just use a normal rule instead of this fancy blue rule line? Some people like the effect of colored or fancy lines. Again, this is a small image (514 bytes), and because it's used multiple times, it only has to be retrieved once.
But what about how it looks in text-only browsers? Here's what the source looks like:
<IMG SRC="line.gif" ALT="
___________________________________________________"
>
This is what is known in the Web publishing world as a sneaky trick. We could have just used an HR and been done with it, but using the graphical line means that we have to indicate that the line exists in text-only browsers. Because we can't put HTML markup in ALT, we have to do something else. A row of underscores will work just fine.
On the next line of the home page, we have a message that these pages are under construction, with an appropriate icon (see Figure 21.3).
Figure 21.3 : An Under Construction warning.
Providing an Under Construction warning is a common practice in many Web pages today and is a good indicator to your readers that the contents might change and some rough edges might exist. If you do include an Under Construction warning, try to make sure the content you have is in good shape, and leave the content you don't have for later. In particular, follow these guidelines:
Moving on in Maggie's page, we have a list of icons (see Figure 21.4).
The icons form a link menu to the different pages on this site. One interesting note about the icons is that although they're different widths, the author has modified the graphics so they are all the same width, which makes the text next to them line up. You can do this by either scaling or, as with the mail icon, just leaving blank space around the main icon itself.
With the blue line and a simple copyright (the link on the name is a simple Mailto link), that's the end of the home page. Let's move on to each of the individual pages in turn.
The Me page contains personal information about Maggie (see Figure 21.5). At first glance, it includes her job, where she lives, and other related stuff.
Figure 21.5 : Maggie's Me page.
Each paragraph describes a different portion of Maggie's life, and some contain thumbnails of larger images. For example, the paragraph about Angus the cat has a small thumbnail GIF image, which is linked to a larger JPEG image. Maggie has helpfully described the image characteristics (its format and size) next to the thumbnail, so you know what to expect if you follow that link (see Figure 21.6).
Figure 21.6 : Angus as a link.
Note that the images are not crucial to the content of the page. In text-only browsers, most of them are just ignored, although the links to the larger JPEG images still work. (Remember, in text-only browsers you can still download images for viewing later; just because the images aren't there on the screen doesn't mean they're entirely inaccessible.)
Note also that images that don't have larger counterparts also don't have links. Why link to something that doesn't exist?
Finally, at the bottom of the page, we have a simple icon for returning to the home page (Figure 21.7). With both the icon and the text, it's pretty clear where we're going on this link.
Figure 21.7 : Back in Maggie's home page.
Moving on to the next item in the list, we have Maggie's Books page. Talking about one's hobbies is fine. You never know who might be reading your page; maybe they have the same hobbies and will welcome the information. On this page, as shown in Figure 21.8, Maggie explains who her favorite authors are and provides links to other sites that have book stuff.
Providing links is what the Web is all about. Without links to other sites, exploring the Web would be pretty boring. Everything would be an individual site without interconnections. So providing links to other places in your pages is a terrific idea. But don't go overboard; pages and pages of links can be useful to you for your hotlists, but they're pretty dull to other people. If your readers want an index, they will use an index. They're on your site for a reason: to find out about you. Your personal pages should be about you, and then point to sites that you or your readers find interesting.
One other point I'd like to make about this page is that it and the previous two pages (the Home page and the Me page) used a consistent design. All had those same blue lines and the same headers and footers. You also might have noticed that the header to the Me and Books pages used the same icon as was on the home page (see Figure 21.9). It's these kinds of small touches in design that bring a set of pages together as a collective whole and let your readers know that they are still on your site and are still talking to the same designer.
Figure 21.9 : The Books heading.
The mail page contains a simple form that allows the reader to send mail to Maggie. What makes this form different from a simple Mailto form or the built-in mailing capabilities of your browser is the selection menus that enable the reader to choose from several silly choices (see Figure 21.10).
Figure 21.10 : The Maggie Form.
My point in noting this is that although the selection menus are purely frivolous, they fit with the tone of the presentation. There is nothing in HTML or Web page design that says you have to be serious. The Web is a medium for communications, and communicating with humor is just as relevant as communicating information quickly and clearly. Again, depending on the goals of your presentation and who is going to be reading it, you can make decisions on its content. In this case, Maggie could have included a simple mail form, but it would have been a lot less interesting to play with. This form better shows her personality and her sense of humor.
One bullet left! The last page is a guestbook (see Figure 21.11), which might look familiar from Chapter 20, "Useful Forms and Scripts." It is, indeed, the same guestbook program, with the HTML code for the page slightly modified to fit with the design of the rest of the pages. This page shows how you can take code and examples from other parts of the Web and adapt them for use in your own pages.
That's it! You've explored the whole of Maggie's set of pages. Of course, her set is pretty small, but you can easily get an idea of her personality and interests from those pages.
How does a Web presentation for a company differ from that of an individual? To begin with, it's a lot less cute and has a more structured organization. (Personal pages could have a stricter structure, but a relaxed set of pages is more personal.) Company pages tend to adhere more to rules of consistent design and have an overall look that might reflect the corporate image.
In this section, we'll look at a company presentation for a small company called Beanpole Software Inc., which makes Web tools (or they would if they actually existed). This presentation isn't as large as many other company presentations on the Web, but it does provide most of the same features. Most company presentations that you find will have more depth, but little in the way of wildly differing content.
The home page for Beanpole Software is shown in Figure 21.12. This home page has two major sections: the banner at the top and the icons and links below the banner.
Figure 21.12 : The Beanpole Software home page.
The banner is the first thing that comes into view, with the company logo and the name Beanpole Software Incorporated. There are several things to point out about this banner:
If you've been paying attention, you might wonder how text-only browsers can handle having the name of the company in the graphic itself.
Well, with ALT text it can be done like this:
<IMG SRC="beanpole.gif" ALT="Beanpole Software Incorporated">
But just having ALT text isn't enough. You need emphasis to show that this is Beanpole's home page, emphasis that you get with an H1 tag. However, because you can't put HTML tags in ALT text, what can you do?
You can pull this sneaky trick:
<H1>
<IMG SRC="beanpole.gif" ALT="Beanpole Software Incorporated">
</H1>
Using this trick, when the ALT text gets substituted for the image, you're already in the middle of an H1, so the ALT text will be interpreted as an H1. (See Figure 21.13 for how it looks in Lynx.) Because the image is the only thing in that tag, graphical browsers don't have a problem with it either; they just display the image and move on.
Figure 21.13 : The Beanpole home page in Lynx.
If you're a purist, you'll note that according to strict HTML there's no text in that <H1> heading, and programs that index headings might become confused about that. You are absolutely right. In a novel, there's no character development on the title page. In this case, the entire page serves no other purpose than to lead the reader into the rest of the presentation. It's not a document with lots of headings and content; it's merely a map for the rest of the presentation.
| Note |
I don't mean to be flippant. It is entirely true that some strict HTML editors might have problems with the fact that there's no text in an <H1> tag. But in this particular instance, it makes sense for the presentation as a whole. Again, this is a choice you have to make as a Web developer: go for the strict HTML syntax, or bend the rules a little. As long as you realize the consequences of your actions and feel that the effect you're getting outweighs those consequences, you can go ahead and bend the rules. |
The second part of the page is the icons, two columns of them (Figure 21.14 shows them all). Aren't those tables rather than columns? Nope. Actually, these columns are done with preformatted text, painstakingly lined up so that the icons are arranged neatly on the page. That's why the link text is in a monospaced font.
Figure 21.14 : The Beanpole home page icons.
It doesn't look as spectacular as it could. Again, because preformatted text can't be wrapped, you'll have the same problem with the icons as you did with the banner if the screen width is too narrow. You might want to make that design decision to get the column effect with the icons without having to resort to tables. This page might look funny, but it's conforming to HTML 2.0 (really, I checked it).
Each icon is a link to a page and a separate topic. There is the ubiquitous What's New page, a search page, plus three icons for the products that Beanpole makes. The home page, as presented, is simply a map for the rest of the presentation.
The first page we'll look at in this presentation is the What's New at Beanpole page. When you select that link (the one with the red and yellow birthday present on it if you're on a graphical browser), you'll get the page shown in Figure 21.15.
Figure 21.15 : The Beanpole What's New page.
Here, you'll see the first page, which follows a design used throughout the pages at this site: The Beanpole logo is at the top right, with a first-level heading alongside it, and a rule line separating the header information from the text. Each of the pages in this presentation uses the same convention, as you'll notice when you see more pages.
In this particular example, the What's New page contains information about What's New with the company itself. Some companies prefer to use What's New to indicate specifically what's new with the Web site or for a view of actual press releases. What you put on your What's New page is up to you and how you want to organize your presentation.
Note also that the items in What's New are arranged in reverse order, meaning with the most recent item first. This allows your readers who are coming back multiple times to get the newest information first; they don't have to wait for the entire document to load and scroll all the way down to get to the new stuff. Also, it enables you to archive older information off the bottom of the document, either by deleting it entirely or by putting it in a separate file and then linking it back to this page.
At the bottom of this page is a footer containing two rule lines, a button bar, and a copyright, which is also a consistent page element that appears on most of the pages on this site (see Figure 21.16).
First, let's look at the copyright. If you have lots of copyright information (more than a line or two), you might want to put a short version in the footer and then link to the full version. This provides several advantages over including all that copyright information in your footer:
A common trick to many Web developers is to use the Netscape <FONT> tag to make the font text smaller (usually the smallest it can be), under the theory that it's all there but it's less obtrusive. However, it's less obtrusive in Netscape, but in other browsers it is just as large and just as ugly as if you never changed the font at all.
Now we move on to the more interesting part of the footer: the button bar, which I've shown again in Figure 21.17.
Figure 21.17 : The button bar.
The Beanpole button bar has five icons that follow the same design as the main logo and icons on the home page. Each icon is a separate link to a separate page on the server, allowing you to see where you've been (they show up as purple links as opposed to blue). They also provide faster access to those pages than if you use an image map. (Remember, image maps must go through a CGI program in order to work, which is inherently slower than using a direct link.) Also note that if you shrink the screen width way down, the icons in the button bar will wrap to the next line (as shown in Figure 21.18). Few people are likely to read pages in as narrow a width as this, of course. But keep in mind that, just as with the banner on the home page, many screens are narrower than you expect, and if you use a single-image icon, you might end up having some of your image cut off by the right side of the page.
Figure 21.18 : Wrapped buttons.
Note that each icon button has a text label (HOME or NEWS). The label helps indicate what each of the icons represents, which might have been a bit obscure without the label (what does that green splotch do anyway?). Because the label is actually part of the design of the icon (it's blue, blurry, and abstract like the icon itself), it doesn't seem so much to be a label tacked onto the bottom of the icon as it seems to be an integral part of the icon.
But what about those text-based browsers that don't have icons at all? Fear not. Each icon has ALT text, allowing each "button" to be selected in a text-based browser just as it would be in a graphical browser (see Figure 21.19). Because you still have the rule lines and the copyright, the footer as a whole holds together as an important part of the page design, even in a text-only environment.
Figure 21.19 : The button bar in Lynx.
We'll explore each of the buttons in the button bar later in this chapter. For now, let's choose Home to go back to the home page.
The next page we'll look at is the one called All About Beanpole Software, just below the What's New icon (see Figure 21.20).
Figure 21.20 : The All About Beanpole Software page.
There isn't much to note about this page, other than the fact that it follows the same consistent design style that I mentioned in the What's New page:The header has the icon and the level-one head, and the footer has the same button bar.
Do notice, however, that the contact information for the company is at the very top of the page, before the chatty company history. The goal here was to make sure that someone who wants Beanpole's phone number doesn't have to search for it; in fact, an argument could be made for putting the contact information directly on the home page itself. But here it's a single link away from the home page, at the very top, and contains all the information in a well-designed, easy-to-scan fashion.
Now go back to the home page and skip across to the Beanpole Author page (see Figure 21.21). This is one of three pages about Beanpole's products; the other two are Beanpole Server and the Beanpole Networks. All three have products on the home page, allowing people who are interested in each one to go directly to that information.
Figure 21.21 : Beanpole Author page.
Beanpole Author is a tool for creating HTML documents, as the page describes. It comes in three versions: a limited free version that can be downloaded from the Internet, a cheap version with some advanced features, and a fully featured and more expensive version that can be used with the server product. This page describes all three.
Note the disk icon after the description of the free version (see Figure 21.22). If the software can be downloaded from the Internet, let the reader do it now. Make it obvious! Here, the fact that the icon stands out on its own line implies that choosing that link does something special, in this case downloading the software itself.
Figure 21.22 : The Download icon.
Most of this page contains basic marketing information about the products, but the interesting part is close to the end. There's a section called Specifications (see Figure 21.23), which has links to a table but provides three different versions of that table depending on the capabilities of your browser.
Figure 21.23 : Choose a table format.
Why would you want to segregate the tables to a separate page? With the table on its own page, you can keep the main pages HTML 2-compliant and provide the fancy tables for browsers that can view them. This way readers won't get mangled text or have to sit around waiting for an image to load-instead, they have a choice of how to view the information based on the browser or connection they happen to have. From the reader's standpoint, it's perfect.
The main disadvantage of keeping three versions of the table is that if the information changes in one, you'll have to update all the others to reflect those changes; you now have three pages to maintain instead of one. Depending on your position in the Web developer's continuum (remember about that from Day 6, "Designing Effective Web Pages"?), you might want to pick one over the other two based on the goals for your pages.
What do the tables look like? Figures 21.24, 21.25, and 21.26 show each version. The GIF file looks suspiciously similar than the table version. It should; it's a direct screen shot, which is easier to manage and maintain than drawing the whole thing in an image program.
Figure 21.24 : The Specifications table.
Figure 21.25 : The table as a GIF file.
Figure 21.26 : The table as text.
Because each of the product pages (the pages for Beanpole Server and Beanpole Networks) provides a similar format, we won't follow them here in this book. Feel free to explore them on your own.
Back up to the home page again, and skip to the top of the icons to the Search page. Search pages are always good for larger sites where your reader might have something specific in mind, and pointing out the search page right at the top of your presentation, and frequently within individual pages, is always a good idea. (You'll note that the search page is also in the button bar.) The search page for this site is shown in Figure 21.27.
Figure 21.27 : The search form.
This page is a simple form for entering search keys. It also lets you indicate whether you want to search in a case-sensitive way (all capital letters are preserved), and whether you want to do an AND search or an OR search, in database terms. (I like the wording in the form itself much better.)
In this particular search form (which is a very simple example), if you search for something (such as Johan) you get back a page something like the one shown in Figure 21.28. You can then select any of those pages and link directly to them.
Figure 21.28 : The results of the search form.
Now that you've explored the primary pages at this site, we'll go back and talk about the button bar some more. Figure 21.29 is another picture of it, in case you've forgotten.
Figure 21.29 : The button bar.
Button bars are usually used as a road map to the most important parts of the site; because it appears on every page, you can get to those locations quickly and easily (you'll learn more about button bars in Chapter 29, "Testing, Revising, and Maintaining Web Presentations"). Note the locations on this button bar:
The WAREZ icon points to a page called Beanpole Products (see Figure 21.30), which is a general overview of the three products that Beanpole sells. Each icon (the same icons as on the home page) points to the individual product pages, just as the home page did, and also collects the other information about the company (such as press releases and sales information) on one page as well.
Figure 21.30 : The WAREZ page.
This is a classic example of providing multiple views on the same content. If you have three products, you can provide a single overview page, or you can list them separately. This presentation uses both methods and provides multiple ways to get at the same content from different places on the site.
One could make a strong argument that the WAREZ label for the disk icon is actually misleading because not everyone will know what WAREZ are. (Actually, WAREZ often has negative connotations because its original meaning referred to pirated software.) A better term might have been Products or Software. But those wouldn't have fit well on the icon; they have too many letters (a poor reason, I know). Not all of the design decisions you make will be good ones, which is why usability testing and maintenance are so important even after your presentation is done. (Even writing about it, as I've done here, can often point out some of the silly things you've done that you didn't think were silly at the time.)
In this chapter, we've discussed two simple presentations-a personal home page and one for a company-each of which has different design goals, different overall structures, and uses different methods of achieving those goals. In this chapter, we've walked through the presentations, either on paper or online or both, and you've seen the decisions I've made and the rules I've followed in creating these presentations. Hopefully, these real-life examples will help you in the decisions you'll make when you create your own presentations.
| Q | Your examples in this chapter are great, and they've given me lots of ideas for how to do my own presentations. But where can I find more good examples? |
| A | You have millions of examples available to you on the Web. Go out there and explore! But as you do, look at each site with a Web designer's eye, as opposed to just sitting back and following links. Watch for the
hints I've given you. Can you find your way around the site easily and find what you need? Do you know where you are within the pages, or do you get lost easily? Does the site have a good mix of text and graphics for both slow and fast connections? If
it uses experimental HTML, is the effect worth it, or is it just flash in an otherwise empty presentation? Is there a consistent design? If you see some trick in a Web page that you haven't seen before, use View Source to find out how it was done. If it's a CGI script or an NCSA include, you might not be able to do so; but, for many things, simply being able to view the source can tell you a lot. Of course, keep in mind that most "neat tricks" in HTML will be browser-specific or illegal according to the true specification; remember that if you decide to implement them in your own pages. |
| Q | I'm not sure why anyone would be interested in my hobbies, my job, or a photograph of my dog. Aren't personal home pages sort of narcissistic? |
| A | Yes. Very much so. That's what they are there for. It is your chance to tell everyone how great you are, without really annoying them. If they get annoyed, they can always just go somewhere else on the Web. It's
not costing them anything. But you can use personal home pages for more than the boring details of your everyday existence. Looking for a job? Put your résumé on the Web. (Design it for the Web, of course; no two-page limit here!) Are you a starving writer or artist? The Web is the ultimate in self-publishing: It's cheap, easy to advertise, and you can get instant feedback from your readers. The medium is anything you make of it. It's your chance to be creative, funny, and opinionated. You can say anything you want without having to prove that you're better, louder, or more right than anyone else. Where else can you do this? Or, where else can you do this that you won't get stared at or arrested? Mostly, putting together a personal home page is fun. And having fun is one of the best reasons why you should be publishing on the Web. |
| Q | The icons in the Beanpole Home Page are really cool. Can I use those in my own presentation? |
| A | Sure! I designed them for this book and for this presentation, and they are available on the Web at the site I mentioned at the start of this chapter. I do ask that if you use them, you give me credit somewhere in your presentations and link either to my home page (http://www.lne.com/lemay/) or to the pages for this book (http://www.lne.com/Web/ Books/). |