Raising the Bar

by Gary W. Priester

A Web site makeover for The State Bar of Texas computer section

• Fore site: How NetObjects Fusion's style feature makes it easy to create a good-looking site.
• Change of Face: Even NetObjects Fusion's standard styles can be customized simply by choosing a different typeface.
• Drop anchor: Adding anchors helps your readers quickly get to just where they want to be. This is especially important on long pages (like this—this summary is made up of links to anchors).
• In good form: Creating forms so your readers can get in touch with you.
• Does your site create Sore Eyes?: e-mail us and you might just get a free web site makeover.

This month's makeover candidate is The State Bar of Texas, computer section.

Tamara Kurtz, chairwoman of the computer section, explained: "Since our site serves mainly lawyers, who are quite busy, a site map and a short download time is critical. Of course, we would like to have graphics and some color. We would like our Web site to convey a look and feel that will visually inform visitors we are a professional organization and a Texas leader in law and technology resources for lawyers."

Kurtz continued, "We are a volunteer-based organization, and we would like to keep our Web support costs to a manageable level. Thus, we prefer the streamlined approach in terms of Web site upgrading."

Well, Tamara Kurtz, you have come to the right place. NetObjects Fusion is the perfect solution to your Web site requirements, and I'm not just saying that because they pay me the big bucks. I find it easy to recommend Fusion because of the ease with which it allows you to create and maintain a site, even if you have little experience.

My general observation of your current site is that it needs focus and simplification. The decorative icons on the About The State Bar of Texas page while attractive and well-designed, lack the tone and manner for a site providing content for lawyers. This is not to say the members of the state bar are lacking in art appreciation, but the elements, in my opinion, are gratuitous and inappropriate.

Fore site

One of NetObjects Fusion's strengths is its SiteStyle feature. This feature allows you to create a single style and easily apply it to your entire Web site. NetObjects Fusion ships with more than 200 of these styles, so chances are good that you can find one, already designed, that you can use.

But if you want a custom look, then you can easily create your own style by making graphics for banners, buttons, and backgrounds, going into Style mode, creating a new style, and pointing to the graphics you want to use.

SiteStyles also makes it easy to upgrade and grow your site because once you've chosen (or created) the basic elements, NetObjects Fusion automatically places text (in the font of your choice) on top of the banners and buttons. This gives each page a custom look—automatically.

Using SiteStyles

To make it easier to maintain the new Web site design, I decided to create a SiteStyle. You can see the SiteStyle elements here.

The graphic elements were created in Corel Xara . I created a very light repeating wallpaper pattern incorporating the association's seal on a very pale gray background. This added a quiet dignity and professional look to the page and also made sure site visitors would always know what site they were on.

The tiling element is a square, with the seal in the center, and a diagonal line going from the top left corner to the bottom right corner and dropping out behind the circle. Each corner of the tile contains 1/4 of the seal as shown here. When the image tiles, it creates a staggered pattern that I prefer to a more static simple repeating pattern.

Square banners

While most Web page "banners" (graphics along the top of the page) are long narrow rectangles, these lawyers tell me there's no law that says they have to be that shape.

So in this case, I used the left 1/3 of the screen for the banner and navigation, and the right 2/3 for content. This makes a clean separation between the two and gives the page structure and organization.

I made the Banner essentially square (the same width as the buttons) with two rounded corners on opposite ends. The association's seal is filled a darker blue and is centered. The buttons repeat the same rounded corner motif and incorporate a star, a symbol found on the Texas state flag.

I specified Trebuchet MS, a sans serif font that ships and installs with many Microsoft applications, is optimized for Web browsers, and is available for free download for Windows and Mac as the SiteStyle font. This font has a fresh look and is easy to read.

A change of face

One of the great things about SiteStyles is that NetObjects Fusion adds text to buttons and banners automatically. A lot of people don't "get" this, but it's quite simple. Normally, you can't use a font on a Web page unless you're sure your Web page visitor has that same font. But these banners and buttons are graphics, automatically created by NetObjects Fusion. They're compact, fast-loading GIF files, so they can use any font on your computer and you're sure they'll display correctly on everyone else's computer.

In this case, I've chosen a simple font call Trebuchet (free from Microsoft) because I wanted something low-key, yet professional. But if I'd wanted a wild West image, I could have used a "woodtype" font, like the kind used on old wild West posters, or something futuristic or quietly traditional. Even if you use a standard NetObjects Fusion SiteStyle, you can always change the font to customize it and make it more personal.

As an example, I've modified the current site style and substituted Playbill, a font based upon old and decorative hand-cut wood type, for the Banner and Button text. Playbill has a "wild west" look that makes it appropriate for the Lone Star state and as you can see, it does add certain wild west look.

On the other hand, is this really appropriate for the State Bar of Texas, who by the very nature of their web site wish to convey a modern, up to the state of the technological art, look and feel? What's more, this font is pretty darn hard to read!

Here's another example of a "western" typeface. Cute. Yeah, real cute. Too cute, for this. But you see what I mean—the entire look of a style can be radically altered just by changing the typeface you choose.

Of course, you have to be careful to choose an appropriate font. Even those these two fonts were western, they weren't appropriate for the serious nature of this web site. If you use an inappropriate font, then you run the risk of people not taking you or your site seriously. Just don't let that scare you away from trying different fonts—it's important to use type to give your site more personality!

How do you change fonts? Go to SiteStyle view. Choose the style. Double click on the banner or button on which you want a different font to appear. Click on the "Text Settings" button and choose the font, size, style and color of your choice. It's easy, and it makes a world of difference.

Active/Inactive

I created an active and inactive button, again using Trebuchet MS for the text. The inactive button is medium red with white text. The active button, which is the button that appears on the selected page and identifies it as the current page, uses the same blue as the banner and has white type. I left the other elements in their default state. When the association's volunteer Webmaster creates new pages, the banner and buttons will automatically update, requiring minimum effort.

I created a separate button that reads, Contact Us. I added it as a Picture under the button bar (as opposed to a normal, automatically produced page button), and I added a "mail-to" link so site visitors can click this button to bring up a standard browser e-mail form to contact the bar without having to search the site for contact information. The Contact Us button is exactly the same as the navigation buttons except it does not link to a page but instead calls up a standard browser e-mail form.

I wanted all of the text on the site to use Trebuchet because it's an easy-to-read font and it's freely available. But I know that not everyone will download it, so I've specified alternate fonts in case some visitors don't have Trebuchet on their systems.

To do this, I edited the fontmap.txt file (in the /NetObjects System/folder) to add Verdana, another free Microsoft Web font (that comes standard with Internet Explorer) as second choice, then Tahoma (basically the same as Verdana, it comes with Microsoft Office), then Arial, and finally Helvetica. If the visitor has any of these fonts installed on her or his computer, the browser will use the first font it finds in the specified order in place of the default browser font, usually Times Roman.

Drop anchor

I wanted to add Anchors to the five sections at the top of the Who We Are page. Anchors let you link to a place on the current page. eFuse.com uses anchors in the summaries at the top of each article.

In Fusion, this is easy (if you know how to do it), but the documentation is a bit vague. An Anchor is a link to an image or area on a current page. It works like an external link except instead of linking to another page or another site, an Anchor goes to a specific section on the same page. Here's how to add an Anchor in Fusion: We'll create an anchor that links the first topic, Joining the SBOT-CS, to the appropriate section just below.

Step 1. Go to the subhead or paragraph where you want the linked copy at the top of the page to come to.

Click, but do not highlight, the Text Insertion Cursor at the beginning of the text heading. The Anchor button will now be activated on the Text Properties menu.

Step 2. Click the Anchor button. This brings up the Add Anchor dialog.

Type in a word or words to describe the anchor, in this case "Council," as shown. You can have more than one word but you cannot leave spaces between the words. Click OK to close the dialog box. A small red "upside-down-T" anchor icon should now be present. If you don't see one, choose View/Object Icons to see this and other icons. These icons will appear in NetObjects Fusion, but they will not appear on the final Web page. You can turn them off at any time by choosing View/Object Icons again.)

Step 3. Go to the top of the page, highlight the text you want to serve as the link (Figure 6), and click the Link button on the Text Properties menu.

Step 4. The Link dialog opens as seen here.

In the "Page" box, click on the "Current Page" button, then in the Anchor drop-down list, select the name of the Anchored section (in this case "Council"). Click Add Link.

That's all there is to it.

Repeat steps 1-4 to add more anchors. Preview your page in your browser to make sure your anchors work.

In good form

Client side forms (forms that send the results to an e-mail address via e-mail rather than using complex CGI programming and a Web server) are easy to create in Fusion, though there are a few things you need to consider. First of all, simpler is better because even though Fusion is WYSIWYG (What You See Is What You Get), the results can be WYSINWYE (What You See Is Not What You Expected).

First, I created a text box. I clicked on the Text Box tab on the Properties palette and checked the "Text box is a form" box.

Second, using the Form Tools toolbar, I created my first text entry box (called a Forms Edit Field) and added a small line of copy aligned on the left directly below. I took advantage of Fusion's Drag and Drop capability (hold down the Ctrl key while dragging) to make duplicates of the text entry box (you can also copy and paste form elements to duplicate them). I also used Fusion's View/Grid and View/Snap to Grid to space my entry boxes evenly.

When you click on one of these form boxes, the Properties palette shows the name of the field (you can call any field anything you want) and the properties (in this case, what will appear in the field by default). It's important to give each field a different name. NetObjects Fusion will do this automatically for you, but it's best to name them yourself, because then you can give them a name that's easier to understand!

I changed the text as well as the identifier name for each entry window (Name, Address, etc.). The data name appears before the submitted data on the e-mail generated when the form is sent.

Third, the final step to creating an e-mail form is to turn on the components toolbar, then click on the Form Handler icon (it looks like a rectangle with a wavy line in the middle). Then click inside your forms text box and a button will appear. In the Properties palette, double click on the area where it says "Publish to," until it says "Publish to Email." Then click on the space below it that says "Email" and enter the e-mail address where you want the form response to be sent.

Note: This always works for people who use Netscape Navigator. It usually works for people who use Internet Explorer, but occasionally IE will open an e-mail window instead of sending the form. This is an IE problem, not a NetObjects Fusion problem, but it can create problems for you.

If you require a more complex data-based form and don't want to do programming, you have two choices. First, you can use the www.response-o-matic.com Web service (which is what we use here at eFuse.com), or I recommend BoomaSoft Corporation's WebForms, an easy and effective way to create forms, database, and automated e-mail response forms.

These elements looked perfect when I performed a browser preview. The exception were the City and State text entry boxes. Although they were perfectly aligned on the Fusion page, they displayed catty-wompus on my browser.

But all in all, on top of the repeating SBOT seal/wallpaper background, the form looked very presentable. I used a drop-down list for the multiple choice answer to the question regarding publications that took care of aligning the four options. Actually, there were three options originally, but I felt not to receive publications also should be an option and so took the liberty of adding the additional option.

You be the judge

We used to have a link to the made over site here, but guess what. The legal-eagles there in the lone star state said too many people were visiting our makeover instead of their live site. So, to avoid having them "harsh our buzz," we have temporarily removed the makeover, and will put it back under assumed names which, we assume, will not steal any of their traffic.

The site now has a common look and feel, and the button bar makes the site easy to navigate, so even a busy lawyer can do it. The blue buttons that appear on the selected page make keeping track of the current page easier.

Because SBOT-CS's site is now set up in Fusion, the volunteer Webmaster should have no trouble adding pages, updating or adding additional information, and/or inserting links. I created a SiteStyle for the paragraph text as well, so simply swiping the new text with the text cursor and selecting SiteStyle from the Text Properties dialog will automatically apply the pre-designated font, size, and color. The site at this stage will almost maintain itself, but I had better not promise too much. These folks are, after all, lawyers!

Does your site create sore eyes?

If you need help with your Web site, let us help. That's why we're here after all! E-mail and give us the URL for your Web site as well as a brief description of what you hope to accomplish with your site. If we pick your site for a makeover, we will contact you for more information.

About the Author

Gary Priester is a partner in The Black Point Group, a Northern California graphic design company. He is the author of Looking Good in Color, Ventana Press and CorelDRAW Studio Techniques, Osborne/Corel Press. E-mail Priester or visit his web site. 

© 1999 Gary W. Priester