Kenan Doyle Branam
Media Consultant / Coach / Presenter / Producer
gold bar
Network Add Kenan Branam to your Google Circles Storify by Kenan Branam Klout Report for Kenan Branam LinkedIn icon Facebook Twitter YouTube vimeo Huffington Post meetup TED Technorati My Obama Profile Skype

Web Weaver

Web Elements of Style

Basic Page Elements

Page Length

If you have lots of information you need to choose between long or multiple pages. Long pages are good if you expect people to print out or download your pages for future reference. You can index these to internal "bookmarks" to help your customers find their way to needed information. The drawback is that long pages of 40K or more may try the user's patience.

You can use multiple shorter pages that treat just one subject each. Here you can use links from major topics in your Content Outline or sub-directories. It doesn't take as long to view.

Page Titling

The page title which displays at the top line of your Web browser is very important because it often shows up in search engines. Make this specific to the page, using key words that people might use to find your page. The <title> code can contain a longer string to reference sub directories, authors, and the site name but should be listed in specific to general order. (Example: Local Jobs - Monthly Features Column - Houston Chapter MCA-I)

Page background.

Textured and colored backgrounds unify your pages. I call this something like "page-bak.gif" so it can be changed easily. Alternatively, you can specify an RGB color for the background. Many Web sites today use a simple white background for readability by many Web browser and monitor configurations.

Background Color or Texture.

You want to set your Web site off from all the rest. One way is with a well-designed graphic. The other is with a background texture and/or color.

Plain gray. This is your entry-level color scheme. All browsers can display it. The novice HTML writer can do this without even trying. I don't know why anyone uses gray when they can choose something brighter. Gray is ugly (IMHO).

Colored background and lettering. If you know the right codes, you can easily change the background color. Make the letters a contrasting color.

Textured and colored backgrounds are proliferating on the Web. This is really pretty easy, like the tiled wallpaper used in your Windows desktop. Both texture and color will make your site special. But you have to be very careful that your text is easily readable when you're finished. If they can't read it they won't stay. Don't let the background overwhelm the text, but subtly complement it. Consider white.

Headline Type.

Decide what size to use on these "sub-pages" and use it consistently. Text. Go very sparingly on the headline typefaces. Use the normal typeface instead. It looks more modest. There is such a thing as overkill.

Horizontal Rules, Buttons, and Bars.

Horizontal rules are HTML codes and don't take any time to download. They can be varied in length, width, and color if you know the codes. Colored Lines take a few seconds, but can spice up your page, especially if they are coordinated with the color scheme you have designed. Don't overdo it. Bullets are available as an HTML option to set off lists. Colored balls, arrows, and pointers are also available.

Last update

If your site features up-to-date information, an update date is helpful. But if you don't do much updating, leave the date off or the site will look untended.

Jump lines

If you have a complex site, you may want to have one or two- word designations which will allow your customer to jump to another section of your Web site. Most common is a "home" or "top of page" jump, sometimes using "click able images" or "buttons."

Response Tags

Sign your pages so the author is apparent. Alternatively, you may want to include an E-mail address, which when clicked takes your customer to a "mail to" form which allows him or her to send you e-mail, such as "E-mail feedback to kenan@branam.com." In a corporate Web site, it is very helpful and friendly if you provide contact links to help the user reach the right person directly.

Off-site Links

The power of the Web is its ability to link to any other page in the world. But be very careful to let the user know that a certain link will take them off your site where the BACK button will be the only way back.

Graphics and Photos

Main Graphics

Your Index or Home page needs a graphic to look inviting. Think about it as the sign over your storefront that beckons your customer inside.

Top-of-page Graphic

A small graphic at the top of each of your pages helps unify your Web pages. You can use a smaller version of your main "index page" graphic. Or perhaps a band at the top of the page with your company name and a small logo. I always call this something like "page-top.gif". That way if I want to change it, I don't have to alter every page. Just upload a new image with that name.

Colorful "New" or "Updated" graphic images as small markers draw your customers' attention to items you may have added recently.

Photos

You'll want to illustrate your products or services to help tell your story. Or you may want to put your whole catalog online. Remember to use the "IMG ALT=" tag so customers who don't have graphics turned on will know what guidance the image would show.

Color images and photos grab people. Tell your story through a few pictures. Obtain professional-quality photos of your products locally. You can also obtain stock photography from inexpensive professional stock photograph on-line.

Keep the size of these down so that your customer doesn't have to wait all day to be able to see them. 20K to 40K is the acceptable range for people with dial up modems. You need to be able to resize or crop as needed so your photos are sized appropriately for the page, and don't take too long to download.

Click able thumbnail images are one compromise. You show the picture in a thumbnail size image. If the customer is interested he or she can click on it to display the larger photo. You can also give the image size, such as 57K, so the customer has an idea of whether or not he ought to choose this option.

GIF images can be viewed by all Web browsers, though as April 1996 nearly all common browsers can see GIF, JPEG, and PNG (Portable Network Graphics).

JPEG images compress better and thus load faster. They're especially helpful for color photos. Usually you'll find that a JPEG image is smaller than a GIF, but not always.

Video and Audio

Multimedia is getting more common and more Web browsers and computers support it, so you might want to include: sound, GIF animation, Flash movies, video clips, and JAVA Applets. (See more about video at Video for the Web.)

(See Domain Registration and Addressing article)

Resource Links