UNC Web Style Guidelines

About this UNC-CH Style Guidelines for Web Pages

While this set of “guidelines” is intended primarily for newcomers to the web, it contains general guidelines and tips that hold value for just about any level of web-page designer. This is by no means a reference guide to HTML. The intent of these guidelines is simply to help you write pages that present information effectively to the audience that you are targeting.

Types of Pages: Information Provider or Casual Fun?

Before getting started with these guidelines, take a second to consider the type of web site you are creating or maintaining. Is this a site for a university department or organization, or will it serve as a reference tool for interested parties around the state, country, and/or world? If you fit into this latter category, your web site will act as an information provider, and the guidelines in this document will be especially relevant to your task. If, on the other hand, you will be creating a web page that will only be for you, your family, and some trusted friends, you won’t be as bound to current web page conventions. However, you should note that the principles of sound web design discussed in this document are beneficial to any web site.

Where We All Must Start: What is Your Purpose?

The first thing to consider when designing or maintaining a web site is what its primary purpose will be. Before you do anything in HTML or in an HTML editor, just jot down 5 or 6 of the most important things that your site will feature. This might be difficult, but you can’t build a coherent web site without identifying these main information areas. Try to think of your site a set of information, and then break up that set up into main categories. If this seems a daunting task, consider the nearly infinite amount of info stored by the Library of Congress http://lcweb.loc.gov/ and even they are able to narrow their web site to seven major topics: Using The Library, Thomas – Congress At Work, The Library Today, Copyright Office, American Memory Exhibitions, Help & FAQs. Or for a more familiar example, the vast information available at the UNC Web Site http://www.unc.edu is narrowed to: For Students, For Faculty, For Alumni, For Visitors, Administration, Admissions, Academics, Research, Libraries, and Public Service.

Some Rules of Good Navigation – It’s in the Links!

In his document “Composing Good HTML,” Eric Tilton offers the following advice on building good navigation:

You should always be able to easily navigate to all documents which immediately relate, but you should also always be able to get any other document in the infostructure with a minimum of fuss. Always provide access to the original table of contents, or its equivalent. http://ology.org/tilt/cgh

Your “table of contents” in this context is the set of categories, or main topic areas, that you came up with in the first stage of your web planning. This set of categories should be available to the web surfer from anywhere within your web site. If visitors to your site have to use the Back button several times to go back to the main links, you will lose them. Your site should be so easy to navigate that the Back button will only need to be used once at a time, if at all. You can achieve this good navigation very simply, as in the examples below.

Sample Main Page

Notice how the top of the example page below has a banner with links. Although this page is a little cluttered, as most news pages are, those top links make it easily navigable. These links reside throughout the web site, meaning that visitors to the site can never get lost.


Sample Second Level Page

Now look at the second-level page below, and note that navigation banner at the top tells the web surfer where he or she is (the little arrow pointing to the word “Weather” in the navigation bar) while continuing to provide access to each of the web site’s main sections.


Note: These examples from the WRAL web site http://www.wral.com provide an instance of good navigation, not necessarily style. For most of us the information demands on a site like this far exceed anything we’ll have to do, thus we would never have to fill a page up with so much information.

A Last Word On Links

A set of good links insures that your site will be easy to use and have return visitors. Here are some basic link rules that will always help you to create good, useful links:

  • Never have link that says “click here.” Make the topic itself a link. If your topic is Exercise, don’t point to a link with a sentence like: “For more info on exercise, click here.” Instead, you can say: “More info on exercise.”
  • When inserting links in a block of text, focus on integrating them seamlessly. Don’t change topics for the sake of presenting a link.
  • Don’t make the web reader guess where to click (this applies especially to using images as links).
  • Links to major sections of your web site should be available everywhere on your site. Don’t let visitors to your web site get lost! When they got lost, they leave.

What is Bandwidth, and How does it Affect My Site?

According to Webopedia http://www.webopaedia.com/ Bandwith is defined as follows:

The amount of data that can be transmitted in a fixed amount of time. For digital devices, the bandwidth is usually expressed in bits per second (bps) or bytes per second. For analog devices, the bandwidth is expressed in cycles per second, or Hertz (Hz).

When it comes to the web, the bandwidth you need to be concerned about is that to which visitors to your web site have access.

Bandwidth and the Web

Before you can understand why bandwidth is something you must consider, it might help to review the processes of the web. Remember that every time you visit a web page you download the contents of that page to your computer. (If you don’t believe me, check your History folder in Netscape, or your Temporary Internet Files folder in Internet Explorer.) This means that if you visit a page with a lot of memory-intensive graphics it takes longer to load. What’s taking so long is the process of copying a file of that web page from the web server to your computer.

How Bandwidth Considerations Might Affect your Website

There are many ways to build a web site. You can use lots of images and animations and even java applets, or you can go simple and stick with text and more text. One thing to consider in deciding which way you’re going to go is what type of connection your audience will have access to. If you think a good portion of visitors to your web site will be connecting to the internet via a standard dial-up modem (where the maximum bandwidth would be 56 kilobytes per second), it would be a good idea to keep your site simple. If, on the other hand, you’re sure that visitors to your web site will be connecting via a direct network connection, or a fast connection like a cable modem, then you might feel freer to create a site requiring faster download times.

The Eight-Second Rule

In WebReview.com Derrick Story writes: “Remember the eight-second rule. Consumers have eight seconds worth of patience while waiting for your pages to load. This is especially true for home pages. It’s like the restaurant business mantra: Don’t keep them waiting, or they’ll leave and never return.”

How to Avoid Having a “Slow” Site – Image Overkill

Usually the reason a site downloads slowly is too many images, especially too many large images. You should always condense images before putting them on the web; to do this you can use any number of graphics applications, such as Photoshop or Paint Shop Pro. As a general rule no image you put on the web should be larger than 50 kilobytes. Sometimes photographs are difficult to keep under 50K, so 100K is an acceptable limit in that case. Another way that images can slow your site down is if you use one as a your page background. In general it is recommended that you avoid using images as backgrounds if at all possible; however, if you really want to use an image as your background, do your best to keep the image size as small as possible.

Images

When it comes to images on the web, Sun on the Net’s Eric Tilton offers the best advice succinctly: “When you include an image, be certain that it’s essential to the presentation.” That’s it. If you are maintaining an information-providing site, review the images on your site and be sure that they are indeed essential. How do you know if they are essential? An essential image should do one of the following: provide necessary navigation, help organize the page layout, or make an important statement about the site’s intentions or presentation method.

Images: Some Rules to Live By

  • All images should be essential to your site’s presentation. (Yes, we’re repeating ourselves.)
  • Don’t use graphics that must be loaded from another site; your graphics should live in your web space.
  • Provide alternate text links somewhere else on the page when you use an image-map.
  • If you use images as navigation buttons, use alternative text labels as well.

(Thanks to Eric Tilton and Sun on the Net http://www.sun.com/styleguide/ for many of these recommendations on images.)

For more information on how to create good image maps see the Photoshop 5.0: Web Graphics (dap03).

Pleasing Two Browsers

Unfortunately for web designers everywhere, there are two major web browsers in use these days, and they don’t interpret HTML in the same way. To be sure that your pages will function properly with both browsers, use an HTML Validator service. They’re free and on the web. A good is one is provided by the Web Design Group athttp://www.htmlhelp.com/links/validators.htm

14 Web Commandments (Post these on your wall!)

1. Content should always dictate design, not vice versa.

2. Don’t use blink, ever, unless you’re announcing a genuine emergency situation.

3. Keep link text short and to the point.

4. Don’t have a link on a page that points to itself, i.e., don’t have a “Home” link on the Home page.

5. Keep pages short ? Less than 10% of readers ever scroll beyond the top of web pages; if a page is getting long it might be time to break it up into multiple pages.

6. Don’t run text the entire width of the screen. It makes text difficult to follow.

7. White space is good! Don’t fill your page completely “stuff” ? text and images. (White space directs the eye to the important things on your page.)

8. Don’t use long paragraphs of text ? they are very difficult to read on a computer screen.

9. Keep your site consistent; drastic changes in layout or look between pages will confuse web readers.

10. The Eight-second Rule: Consumers have eight seconds worth of patience while waiting for your pages to load. This is especially true for your home page.

11. Frames: use them if it’s necessary to present your content. Don’t use them just because you can.

12. Animated images can be irritating, and distracting. Do you really need them?

13. Always grant the web visitor a way to offer feedback; an email link is the standard method (<a href=”mailto:emailaddress@something.com”>Email Me your Comments</a>)

14. Make sure your page is accessible to those with disabilities, including the blind. Seehttp://www.useit.com/alertbox/990613.html for more information.

References

Accessibility

More Help and Instruction

You can view the current Training Center schedule on the web at http://learnit.unc.edu/. You can also review the corresponding documents at the site you’re currently in.

Learning HTML to Create Web Pages

  • Web Authoring with HTML
  • Web Authoring with HTML: Advanced Topics
  • Web Authoring: Forms and Counters
  • Web Authoring: Tables and Frames

Creating Pages with Netscape Composer

  • Web Authoring with Netscape
  • Web Authoring for Web Site Managers
  • File Management for Web Site Managers

Creating Pages with Microsoft FrontPage

  • FrontPage 2000: Creating a Web Site
  • FrontPage 2000: Fine Tuning
  • FrontPage 2000: Borders, Tables, and Frames
  • FrontPage 98: Creating a Web Site
  • FrontPage 98: Borders, Tables, and Frames
  • FrontPage 98: Fine Tuning and File Management
  • FrontPage 98: Intro to Image Composer
  • FrontPage 98: Image Composer Part 2

Essential Information Pertaining to UNC Web Space

  • Creating WWW Pages at UNC-CH
  • Putting Group Pages on the Web
  • Putting Your Page on the Web