print header

Tips and How-Tos 

This section contains a collection of pages about additional functions provided by WebDev Services as well as more in-depth information and reference materials. Listed below is a collection of general tips. Don't stop here - there are more tips to be found in the Online Resources page.

General Tips

  • You only have one chance to make a good first impression!
  • Be sure to check for spelling and grammar errors on all your pages.
  • Consistent use of an editorial style can improve the look of your pages. Editorial Guidelines have been developed by the News Bureau office for your use. They include such things as recommended formats for offices, department and titles.
  • Don't embed links that take users to a dead-end page, even if the dead-end page says "under construction." Instead, leave an unlinked placemarker, say "coming soon" or comment the intended link out until fully constructed.
  • Avoid the use of frames when possible! They can be a barrier for users with older and special browser technology, are difficult to print with and don't bookmark well.
  • Check the links on your pages often to make sure they all work and are still meaningful. There is no one best way to do link testing. Dreamweaver provides a broken link report that is very useful.
  • Update your pages regularly so they don't get boring or fall behind the times.
  • Use ALL CAPS only to emphasize select information. Studies have proven that it is more difficult to read information in all caps. All caps also gives the reader the impression that you are shouting at them.
  • The university has adopted the following references to the university name. Please use the spelling and hyphenation below:
    • University of Wisconsin-Eau Claire--for initial reference on a Web page.
    • UW-Eau Claire--only after previously defining within the Web page.
    • UWEC--The use of the acronym UWEC or UW-EC is discouraged because it may not be immediately recognizable to those outside the university.
  • All references to UW-Eau Claire buildings should have the official building name spelled out for the first reference. References that follow can use the buildings shortened name. For example Hibbard Humanities Hall should appear first, but could be referenced as Hibbard afterwards. Do not use building abbreviations (HHH).
  • Phone numbers should contain an area code and prefix. You can expect global visitors to your site who might need to contact you!
  • Use blinking sparingly. Blinking can become annoying when used excessively and may detract from the information you are trying to communicate.
  • Your pages represent the university. Please act responsibly when writing your Web pages by making sure none of your material could be considered offensive.
  • So as to not confuse the user, make it apparent when a link is to an external site. The cue may be the location (e.g., grouping) or the text surrounding the link itself. Actual notation will be influenced by the way the link is integrated into the content of the page.

To top HTML Coding

  • Use the return key to create blank lines to separate major sections of your HTML document. This doesn't impact the resulting display but makes it easier for you and others to maintain the document.

To top Link Text, Titles and Headings

Though they have slightly different functions, the link (the words a person clicks on or selects), and the title and heading (working title) of the document it calls are very similar.

It is important for the description used in these elements to be very similar. For example, on the UW-Eau Claire homepage, there is a category called "Administration". When you select it and move to that page, you will see the title, "UW-Eau Claire Administration" displayed at the top of the screen. The heading, at the top of the document, is a graphic which reads "Administration" and identifies the content of the page. More about these three related elements follow.

Links

  • The link grabs the person's attention and describes where it will take the reader.
  • Avoid using words like, "click here" to indicate a link. (Example: Click here for an alternate text version.) Instead, word your sentence so that the topic of the linked page becomes the link text. (Example: An alternate text version is provided.) Not everyone "clicks" to select a page. Also, when printed on paper, the text still makes sense.

Title

  • The title is not obvious to the reader. It is displayed at the top of the browser.
  • The title should be descriptive and should identify the university. This is what is saved to a person's bookmark file and may be indexed on.

Heading

  • The heading informs the reader about the content.
  • Headings should use the <H1>, <H2>, etc. heading tags as HTML was meant to do.
  • The heading should be descriptive, but kept brief and to the point.
  • Capitalization of headings should follow the rules of title capitalization.

To top Testing

To ensure readability by your audience who may be using different browsers as well as different versions of the browsers and who have various hardware capabilities, you may wish to test on as many browsers as you can, over as many hardware configurations as you can:

  • Different/older operating systems (Macintosh, Windows 98, etc.)
  • Different browsers (Netscape, Internet Explorer, Firefox, Opera, WebTV)
  • Older versions of browsers (Netscape 5 and Internet Explorer 6 and up)
  • Different size and resolution monitors, black & white monitors

Your audience will define the extent of your testing as well as the kinds of features you will include. For example, Java applets will not run unless the feature is specifically allowed in the browser options. If they are critical to the page's content, you may want to make note of these special features somewhere at the beginning of your page (e.g. This page requires a Java-enabled system). You will also need to provide an alternate method of getting at the content for universal accessibility.

To top Multimedia

Graphic Images

  • As a rule of thumb, keep the total file size of all images on one page to 50 kilobytes or less. Any more than that and people will lose patience waiting for the page to load and go somewhere else.
  • If an image is larger than 50 kilobytes, you may want to give the user the option of viewing the image by selecting a link. That link might be a thumbnail version of the image. You may also want to label the size of the image, so the user can decide to view it or not, considering the time it might take to load.
  • When using the "IMG" command to display graphic images, assign an alternate value for non-graphical viewers. This lets people who can't display the images or who turn off image loading see either nothing (e.g. ALT="") or the alternate text (e.g. ALT="Home Page").
  • When using the "IMG" command to display graphics images, always use the "WIDTH" and "HEIGHT" attributes to display the actual size of the image in pixels (e.g. <IMG SRC="graphic.gif" WIDTH="75" Height="20" ALT="">). This speeds up the graphic loading process. Many Web editing software packages include this as an optional feature.

Backgrounds

Backgrounds can add appeal and identity to a Web page if used effectively.

  • Colors should complement the wordmark and other graphic elements.
  • Text must remain readable. This means you should do more extensive testing when using background images. If possible, use different monitors; Macintosh, DOS/Windows, VGA, perhaps black & white. Some background textures make your entire page unreadable when displayed on low resolution monitors.
Excellence. Our Measure. Our Motto. Our Goal.