Web Authoring Guidelines

| Analysis | Design | Coding | Testing | Publishing | Maintaining |

Analysis

Goals

Establish an overall goal for your web site. Who will your audience be? What information do you want to convey to this audience?

Targets

Which of the following will your audience be using?

• Web browsers (Netscape, Internet Explorer, AOL, Opera, lynx)
• browser versions (4.0+, 5.0+, 6.0+, 7.0)
• platforms (Windows, MAC, UNIX, Linux)
• screen resolution - The most popular screen resolutions at this time is 800 x 600, but 1024 x 768 is a close second.

Design your site so that it meets the specifications of the target(s) chosen.

See www.thecounter.com/stats to see current statistics regarding the most frequently used browser versions, monitor resolutions and operating systems. (This site works in Internet Explorer only.)

Design

Content

The most important part of your web site is the actual text content. Use the following tips regarding content:

1. Site Navigation Scheme - Using index cards or smaller pieces of paper, write down all the items that you want included in your web site (Brainstorm here!). Now separate them into categories, understanding that one index card may end up in more than one category. When you have something that makes sense, you have just created one navigational scheme!

   If you need more than one level of hierarchy, create additional piles. Ensure that those items which you know your audience will want to get to are not too far down in the navigational scheme. Will your audience have to click more than two times to get to the item? If so, consider using a Quick List on higher levels of your site which will get your audience quickly to these popular items.
   See Washburn's usage of Quick Links on lower right of each secondary sub site

   Repeat the above process until you come up with one or more navigational schemes for your site. Now decide how you want to "label" each of the categories so that it is brief and yet descriptive for your audience.

2. Static vs Dynamic - Determine which elements of your web site will be relatively static in nature, and which elements are dynamic, requiring frequent updates. You may decide in this step NOT to include something on the web site, if you will not be able to maintain it.

3. Page Size - For large documents, decide whether you will break it into separate web pages, making each page printable on its own.
   Your alternative is to make one large document with a table of contents or index at the top with target links to specific areas of the document. In this case, it is best to provide "return to top" targets through the document.
   Example of a document with an index

4. Page Identity - Make each page in a group of web pages understandable on its own. This means that you will need to title each page consistently. If your site has several layers of content, consider the usage of footprints on your pages. (Ex. WU Home>>ITS>>Documents)

5. Print vs Web - Content that typically needs to be revised when converting printed media to the web include:
   • contact points (email addresses in addition to mail addresses, room numbers and telephone numbers)
   • if you include a phone number, use complete phone numbers with area codes
   • when referring to a date, spell out the month. While the US uses month/day/year, the rest of the world uses day/month/year.
   • for forms to be placed online, you will need to rewrite the instructions. For example, remove/reword sentences such as "Complete back side of this form."
     
6. Link descriptions - Part of your documents will contain links to other information. These links should alert the user to what they will see if they select the link; in other words they should be brief and yet descriptive. In some cases, it is also appropriate to describe the "where" in the link. For example, if a link will take the user to another web site, convey that information in the link text. Avoid terminology like "click here" or "press the right arrow"; browser methods of choosing links vary.
• provide "return to" statements on pages of your web site to help users get back on track.
  
  
7. Stale content - Tell users, in words, how often a page is updated.
   See example on Washburn's University Calendar Page
   Do not include a 'Last modified' date. An automatic trailer which includes the revision date is appended to the end of each page on Washburn's official web site.
   
   
8. Original content - Make the content of your home page original. Do not duplicate documents that appear elsewhere on Washburn's Web server or on the Internet. Instead, link to them.
   If you are unsure whether something exists on Washburn's Web server, try the search page.  If you still do not find what you are looking for, contact webmaster@washburn.edu to find out if it is under construction.
   Be aware of copyright regulations that apply to existing Web sites.
   
   
9. In development - Avoid under construction pages. If you intend to eventually include an additional page or section on your web site, you may say so on a completed page of your web site, but do not put up a page which only states Under Construction.
   
   
10. Spelling errors - Spell check and proofread your pages as you would any other publication.

Fonts

Do not go overboard with fonts. Using too many font faces on a page is not good design.

1. Font usage - There are two places where font usage applies: text on the page and in graphics
   
   
2. Text mark-up - When using fonts to mark up the text on a page, keep in mind that you can develop your web site on a computer that has a certain set of fonts, but these fonts may not be available on the viewer's computer. It is best to stick with basic fonts like Times Roman (usually the default), Arial, and Helvetica.
   
   
3. Using Fonts in Graphics - Some fonts look great and appropriate in print brochures but look horrible when used in web graphics. See Choosing Fonts for Web Graphics for tips and ideas to help deal with this problem.
   
   
4. Font family - If you want to use a sans-serif font, use a font designation like the following: font-family: Verdana, Arial, Helvetica, Geneva, sans-serif . The user's browser will work through the list until it finds one that it can use.
   
   
5. Unix fonts - Always include Helvetica or Times for on-campus UNIX browsers

Graphics

There are two major image formats for use on the web: gif images (support a maximum of 256 colors) and jpg (or jpeg) images (support millons of colors). There are other emerging image types, which are referenced in Graphics Formats for the World Wide Web.

The gif format is better for images such as buttons, bullets and clip art that contain large areas of the same color and less than 256 colors overall while jpg is better for photographs.

The following provide guidelines related to using graphics within your web site:

1. Large graphics - Avoid large graphics; avoid too many graphics on one page. This will increase the time it takes for your page to load.
2. Thumbnails - If you must use a large graphic, provide a thumbnail size version linking to the full version, including a warning regarding the full version size.
3. Transparency - Learn how to make your gif files transparent so that they can be used on any page with any background color. Most graphics programs will ask you to designate a certain color as transparent.
4. Save originals - If you create a graphic using a graphics package such as Photoshop or Paint Shop Pro, save the graphic in its native format (Photoshop or Paint Shop Pro) with layers, etc., intact. Then convert the graphic to a jpeg or a gif, and save it in this format suitable for the web. If you need to revise the graphic at a later point in time, you can bring it up in its native format, make revisions to the appropriate layer, save it again in its native format, and then convert to a web suitable format (jpg or gif).
5. Small file size - A general rule of thumb is to limit graphics files to less than 30k in size.
6. Optimize - Optimize your jpegs using your graphics software or a program like Ulead Smartsaver from webutilities.com.
7. Video formats - When including video or audio files, include the file size and format (for example, wav, mpg, avi, mp3).
8. Crop it - Crop and resize an image to the size you wish it to be within your web page. This helps the browser render the image faster because it doesn't have to resize it before displaying it.
9. Easy to change? - Remember that graphical elements of a web site are more difficult to change than the textual elements. For example, if you use buttons as navigational tools, then want to add an additional navigational button, you will need to create a new graphic.

You can obtain graphics by downloading them from free archives on the Internet; if you do so, pay attention to the copyright issues and "terms of use."

Official Washburn graphics can be found on www.washburn.edu/sample.html and www.washburn.edu/ur/downloads

Additional Graphics Resources

Color

1. Background color - Always indicate a background color or image for your web page. This will override any settings that an individual user might have on their browser. If a background color is not specified, on campus UNIX viewers will see a drab gray background color.
2. Contrasting text color - When using a dark background, do not use pure white text. The text will not print! Do use a color that will contrast nicely with the dark background.
3. Printing in color - Color adds to your web page, but don't go overboard. Especially, if this is a page that you expect your users to print, the addition of a lot of color can aggravate a user who does not change the printer settings to print in black and white and thus uses a large amount of ink from the color cartridge(s).
4. Web safe colors - Use browser-safe colors, colors used by Netscape and Internet Explorer and colors which do not vary between Macintosh and IBM PC platforms. See www.lynda.com/hex.html

Additional Color Resources

Accessibility

Follow guidelines for creating Web sites accessible to people with disabilities.
See Washburn University Official Web Sites--Accessibility and Quality Checklist

Additional Accessibility Resources

Usability

Additional Design and Usability Issues Resources

Coding

HTML

1. HyperText Markup Language (HTML) version 4.01 has been a recommendation of the World Wide Web Consortium (W3C) since December 1999. Current authoring tools such as Dreamweaver create documents that meet HTML 4.01 specifications. However, browsers are still required to support HTML 3.2 and 2.0 standards for backward compatibility.
2. If your targeted browsers are 4.0+, then you may also include XHTML.  To follow what is happening with HTML, access the W3C HyperText Markup Language  Home Page.
3. If necessary, provide alternative versions of pages in your web site so that all audiences can be reached.

See HTML Resources for friendlier HTML resources than the standards documents in 1 and 2 above.

Site Promotion

1. Use HTML TITLE tags on all pages. Aim for global uniqueness in your TITLE tags. A title must be informative and yet concise for the benefit of bookmarks and search engine results.
   
   To promote Washburn University, end all titles with a comma followed by the words Washburn University. See the title in the title bar of this page for an example.
   
   
2. Use META tags that provide information for usage by search engines.  In Netscape Composer, META tags are added in the Page Colors and Properties section of the Format pull-down menu.
   
   Sample META tags for Washburn University Web pages:
   
   <meta name="author" content="Eileen Brouddus">
   <meta name="keywords" content="Washburn, University, Topeka, KS, college, education, web design, web authoring, Webmaster">
   <meta name="description" content="There are many steps involved in publishing a website. Analysis, Design, Coding, Testing, Publishing and Maintaining are all a part of the process. This web page contains guidelines for each of these steps, with specific areas targeted to Washburn University.">

Images

1. Include WIDTH and HEIGHT parameters in your image tags. Do not use width and height attributes to alter the size of an image. Instead, resize your images using your graphics software.
2. If your tables contain images, then use pixels for cell width and height to ensure that the image will fit in the cell.. If you are targeting a certain screen resolution, use pixels for table width to ensure you will not need to do horizontal scrolling.

Layout

1. Place text in a table column of width 300 - 400 pixels to get maximum readability.
2. Use heading tags (H1, H2, H3, H4, H5, H6) to help organize your page into sections, NOT to emphasize text.
3. Designate a background color or image in the BODY tag. (See COLOR section above.)

File Naming Conventions

1. Name your files and directories with all lower-case characters. 
2. Do not include blanks or spaces in filenames.  Avoid special characters.
3. Use directory and file names that reflect the nature of the information and do not contain inappropriate language. Remember, these are viewable by the world!

Testing

1. Use Bobby to check your web pages for accessibility before publishing them.  Each web page should be "Bobby Approved".
2. As much as possible, test your web pages using your targeted browsers, browser versions, platforms and screen resolution.
3. Web Services performs site quality reviews of the Washburn home page and subsites on a monthly basis. We use a tool called Linkbot to check for broken links, missing 'ALT' attributes and missing page titles. If you would like a Linkbot report run for your Web site, send e-mail to webmaster@washburn.edu.
4. Use tools to check the structure of your HTML document. For example:

• Doctor HTML
  
• HTML Tidy
  
• NetMechanic

Publishing

How do you develop, preview and publish a site for the Washburn Web Server?

Maintaining

To assist in making Washburn University's web site a "quality web site", please do the following:

1. Broken links - Check links to other Web documents frequently to make sure they are still current.
   Contact webmaster@washburn.edu to request a Linkbot report , which among other things, reports dead links, missing 'ALT' attributes and missing page titles.
2. Up to date - Update dynamic elements of your site regularly.
3. Do you really want the world to see it? - Do not store files on the server unless they are being used within your Web site. Otherwise, they will be accessible to search engines, and hence to the world. Washburn's own search engine gets re-indexed monthly. If it finds files in your web site directory, it will place them in its index. If what is found is an obsolete version of a web page, then this will be made available to the world.
4. Web site traffic - Look at site statistics to monitor the flow of traffic to your site.
   Contact Susan Jarchow to inquire about web site statistics.

Comments about this web site may be directed towards Eileen Brouddus.