SOO Training Web Style Guidelines

Web Style Guidelines
SOO TRAINING CENTER
Web Style Guidelines

		What are some guidelines for Web page design?
		Tell me more about HTML.
		How do I use links effectively?
		What do I need to know about graphics?

WEB PAGE DESIGN

Before you begin to design your Web site, you need to know the hardware, software, and connectivity limitations of your users. For example, if you have a limited audience that you know has an optimal setup (a display capacity of 1024x768 and 24-bit color, and connectivity with an ISDN or T1 line, the latest versions of the most widely used browsers), you can make optimal use of graphics and JavaScript and other programming add-ons or scripts to enhance your page's navigability and look-and-feel. If your page is intended for general use by the public at large, design pages that can be used by what could reasonably be considered the largest population, i.e., design for 640x480, 16-bit color, a 28.8 speed modem, and any browser. An ideal page for general use should take about 10 seconds to load at this speed.

For people used to design for paper-based output, it may be difficult at first to create pages that can be viewed any number of ways, depending on the user's monitor, browser settings, and computer configurations. Remember to simplify your text if possible, using clean, simple fonts and allowing plenty of "white space" for readability. One way you can insure white space is by the effective use of tables, and one way you can simplify your text is by using lists (bullets for topics and numbers for procedures). See layout samples. Stay flexible with your page layout--remember, the user can resize his/her browser window and set his/her own fonts, so if your design is dependent on a certain window size or font style to look good, you may be disadvantaged from the start. Here are some short tips for page design:

Write content clearly and briefly

Use a consistent layout and color scheme for all the pages in your site.

Make each page stand on its own—you can’t control the sequence in which viewers will be reading your material

Link back to your home page on every page, and any necessary higher-level pages.

Choose a navigation scheme that is easy for your user to understand.

Choose a background pattern for your pages that is not distracting--see background samples.

There are just a few fonts that every computer has, so if you want to really control your text layout, use Times New Roman or Arial. You are free to use fonts of your choice, however, with the understanding that if your user's computer does not have the same font installed, his/her computer will supply a substitute font, which will most likely be Times or Arial. Also, keep in mind that your users can customize their browser to force the fonts of their choice.

Avoid light text reversed out of a dark background. Studies have shown that monitor pages are more easily viewed when the text is dark against a light background, so if you have many pages of textual information, keep this in mind--see text samples.

Use graphics carefully, weighing the information or impression you want to convey against the time it will take to load the page. Beware of gratuitous animations and audio. You don't want to distract your viewer from the content; you want to enhance it or use it to make a point.

Be careful using copyrighted images or graphics and content from outside sources, such as another Web site. If you don't have a person at your facility who is in charge of intellectual property, check with the Website owner before using their material

Test your pages on two browsers and at least two different monitor resolutions before publishing it if you have no control over what hardware and software people will be using when viewing your site

Test your code. Several programs are available on the Web to run your code through before publishing, such as Dr. HTML™ and WebReference. These are free sites that will check your pages for bad HTML code

Maintain your page—check it often, especially if it includes many links to outside sites. These links may not be valid over a long period of time

You may wish to use frames in your screen layout. Frames can be very effective, but keep in mind that the problems with frames are

Using frames doesn't allow browsers to keep track of the Uniform Resource Locator (URL) for pages you are linking to outside your site

The user can’t bookmark individual frames within your nested site
External links must include either "TARGET="TOP" or "_NEW" to prevent "framing" someone else’s copyrighted material. (This refers to bringing another Web site into the frameset you have produced, so it looks like the new Web site is a part of your site)

Page Design Links and References:

HTML

You will be using the Hypertext Markup Language (HTML) when you build your Web pages, even if you use a Web-page-building program, such as Microsoft FrontPage or Claris Home Page. HTML is the language for writing Web hypertext documents, and is supported by all Web browsers. The HTML standard is evolving daily; however, HTML 3.2 is as close to a standard as we are likely to have in the foreseeable future.

HTML Links and References:

LINKS

Links are the things that turn the Web from a collection of unrelated pages into an inter-related information system. Best design practices suggest 3 colors for links: the unvisited link, which is the color you see when you first encounter the link; the active link color (also called flash color), which is the color the link turns as it's being clicked; and the visited link color, which is the color the link turns to show you have already been accessed. Make sure the text color you choose for your active link, visited link, and unvisited links are distinguishable from one another and from the regular text color.

Use relative instead of absolute links to connect pages that exist on the same server. In other words, when you are linking to another page on your same site, link in the following way: <A HREF="nextpage.htm">. Do not use <A HREF="http://www.mysite.gov/mydir/nextpage.htm">. If you are linking to a document outside your server, you will use absolute links like <A HREF="http:www.site.org/index.htm">.

GRAPHICS

Graphics or images can greatly enhance the appearance and the contents of a Web page. When you are deciding how large to make your images or whether or not to animate them, weigh the length of the load time against the information you want to convey, and make your decision carefully. You may alienate your viewer if they wait too long for an image that doesn’t tell them very much. Try to keep your simpler graphics at about 15K in size.

The two primary graphic formats for the Web are *.JPEG and *.GIF. JPEGs are best for photographs, and can be compressed to various degrees to save space. GIFs are smaller files, and can be animated. Using the GIF89a format, one or more colors can be made invisible, so the background of your Web page shows through. This is useful for graphics that have irregular shapes.

If you set the height and width attributes of each graphic in your code, the page will load quicker (example: <IMG SRC= "graphic.gif" WIDTH=200 HEIGHT=300 BORDER=0>). Consider using thumbnails of images that convey the information you want, and let the user decide if he/she wants to click on it to see an enlarged view.

St. Cloud State University has an excellent site on using visuals in instructional media.

Clip Art

Use clip art with discretion. Clip art is by nature generic in appearance, and can be overly cute or downright tacky. Besides which, when used indiscriminately, clip art takes up space and bandwidth that could better serve real content. Clip art is available commercially on CDs and on the Web as shareware or freeware downloads, and can include background tiles, photographs, boxes, borders, icons, header bars and useful navigation elements. Investigate carefully before using any images off Clip Art Web sites to make sure they are copyright-free.

Clip Art Links and References:

The Mining Company (also has links to many sites with backgrounds, bars, and buttons)

Barry’s Clip Art Server

Clip Art Universe

The Background Sampler

Lunamoon Graphics

Web Clip Empire

A.L.G.’s Place Free Graphics

Web Developer’s Virtual Library

Icon Bazaar