to the top

to the top

to the top

to the top

to the top

to the top

to the top

to the top

to the top

to the top

UH-Downtown UHD.edu Style Guide
Up To UHD Contact/Technical Information

As illustrated in the UHD.edu template, UHD's website is designed to reflect the image and mission of the university -- in organization and structure, and especially through a graphic look that is consistent with the university's external communications.

Refer to the attached guidelines for specific help in creating your own pages. If you have any questions, please e-mail webrequest@uhd.edu.

Some recommended reading for web developers/editors:

Web Style Guide by Lynch and Horton
ISBN 0300076754
Online at: http://info.med.yale.edu/caim/manual

Non-designer's Web Book by Robin Williams
ISBN 020168859X

REQUIRED ELEMENTS

If you're using the UHD.edu template, the following elements are automatically included:

• The UHD.edu navigation bar is a required element for all UHD web pages, or for the primary (index) page of each site. It will provide users a direct link back to the UHD.edu home page, as well as Search, Site Map, and People/Campus Directory capabilities. The UHD.edu navigation bar may not be altered.
• Include the UHD logo (this can be accomplished through use of the UHD.edu navigation bar) and a clearly-identified link to the UHD.edu home page ("UHD home."). The UHD logo may be sized proportionate to the other elements on a page.
• On all primary (index) pages of a website, include the identifier information shown at the bottom of the UHD.edu home page, which includes UHD's street address, phone number, copy right date, name of the institution, Privacy Statement, Contact Information, and last updated date. This information is not mandatory on all pages beyond the index page.
• You must comply with the Privacy Statement.
• If you are using images, content or multimedia that are not original in nature, you must be able to document that you have copyright permission for its use.
• You must comply with the Texas Administrative Code for State Web Sites (found through a link in the online version of these guidelines), which addresses ADA considerations.
  

RECOMMENDED ELEMENTS

• Include a link to the primary (index) page of your site, clearly identified with the title or abbreviated title of your site.
• Any pages that are longer than one screen in length should include "to the top" jump links in the left-hand margin, placed so that at least one is visible on-screen at any point in a scrollable document.
• If using red and blue, please use official UHD web colors.
• The recommended standard background color is white.
• Include an e-mail contact in case further information is needed (e-mail should not reference a student e-mail address).
• Unit websites should include contact information so the client can easily contact the unit.
  

SIZE

• Place the most important information at the top of the page to assure that the user sees the main scope of the page.Limit the use of scrolling.
• When evaluating the overall size of a web page, keep in mind that users accessing web information from off campus will generally experience a longer load time.
• UHD.edu pages are designed for an 800x600 screen resolution with a maximum dimension of 760x420.

IMAGES AND MULTIMEDIA

Standard formats for images include:

• GIF: Use for large blocks of color and line art images or where transparency is desired; essentially anything that is not a photograph; works with a 256 Color Palette
• JPG or JPEG: Use for photographs and gradients; works with millions of colors but may have variants in the way the color is displayed on the Internet; images are compressed, resulting in a smaller file size for photographs
• PNG: Recommend avoiding for now; used predominately in newer software graphic programs such as Flash, Fireworks and Corel 8 (will be used more widely in future web development, as newer browsers support it)

Some considerations in using images:

• Know your audience and include images that relay the appropriate overall impression you are trying to convey to the user.
• Avoid the use of animated GIF and multimedia elements images unless they are the only method available to convey an idea. Overuse of movement within a website is distracting to the user and increases site load time.
• Try to make the file size of your images as small as possible while still retaining quality. This will decrease the site load time. PhotoShop 5.5 or Fireworks does an excellent job of this. For more information, contact the TTLC at 713-221-8200.
• Always try to finalize the size of your image in a graphics program and not dramatically change the dimensions within the html or html editor. This has negative impact on load time.
  

BACKGROUND AND COLORS

The recommended standard background color for UHD.edu is white. Studies have shown that black text on a white background is the best. Patterned backgrounds or tiling are distracting.

UHD's official web colors are red and blue. By using the standard UHD navigational bar at the top of your page, or on the primary (index) page of your site, you will meet all required elements in web use of the UHD logo.

Official UHD web color hex codes are:

Blue: 003366
Red: cc0033

In incorporating other colors on your pages, here are a few considerations:

• Always use the 216 web-safe color palette.
• Limit the color scheme of the website to 3 or 4 colors overall in the following areas:
  Graphics
  Links
  Text
• Be consistent with the color scheme through out the entire website.

FONTS

The recommended standard UHD.edu web font is Arial. This is one of the most universal fonts among various generations of browsers and computers, and will increase the likelihood of readability.

In general, if you want to include other fonts, san serif fonts are the most readable (i.e., Arial, Helvetica, San Serif).

Keep in mind that not all browsers have the same available fonts.

Refer to the UHD.edu template for font sizes and colors in headers, links and blocks of text.

Using the UHD.edu template or linking to the cascading style sheet will allow you to automatically incorporate the recommended font attributes.

Some other considerations in use of fonts:

• Use bold lettering sparingly and only for emphasis.
• Limit the use of italic lettering.
• Always make sure the font size is easily readable to all users.
• Do not center large blocks of text. It is difficult to read.
• Avoid using platform-specific fonts.

BROWSERS

• Keep in mind that the user may have an older browser that does not support some of the new design elements currently available, such as JavaScript, layers, stylesheets, etc.
• Most websites should be designed to be compatible for version 3 or higher browsers.
• Text-only versions of your web page may be included for universal viewing, but are not required. · Check your pages in both Netscape and Internet Explorer and as many versions of those browsers as possible.
• Check the website on both PC and Mac platforms. Screen resolutions and color settings vary between these two platforms.
• Limit the use of elements that require special browser plug-ins.

NAVIGATION

The UHD.edu navigation bar is a required element for all UHD web pages, or for the primary (index) page of each site. It will provide users a direct link back to the UHD.edu home page, as well as Search, Site Map, and People/Campus Directory capabilities.

Here are some things to consider in planning other navigation tools for your site:

• Keep the navigation of the website simple and easy to understand.
• Each page should include a link to the UHD.edu home page (This can be accomplished through use of the UHD.edu navigation bar) and the website's primary (index) page, clearly identified with the title or abbreviated title of your site.
• Any pages that are longer than one screen in length should include "to the top" jump links in the left-hand margin, placed so that at least one is visible on-screen at any point in a scrollable document.
• Limit the use of links, buttons, or choices in the navigation bar to fewer than ten.

  - For large numbers of items, consider making general groupings with subcategories.
  - Try to make choices viewable without scrolling.

• It is best to include a table of contents to help guide users through the website, as well as a site map if the website is large.
• Use concise labels that are easy to understand and appropriate to website's purpose.
• Remember that visitors may enter your website at different point, so place navigation buttons throughout the site.

MAINTENANCE

The staff of the TTLC is available for consultation to assist you in maintaining websites contained within UHD.edu; however, primary responsibility for maintenance remains with the owner of each website.

• Plan for the maintenance of your site and allot resources (people) and time to maintain, update, and rethink the design of your pages. At a minimum you will probably need to:
  -Update content
  -Add new content and/or features
  -Confirm that links are working properly and make repairs where necessary
  
  
• Given time and resources you may consider:
  -Using software tools that simplify maintenance; the TTLC can offer recommendations
  -Performing testing through focus groups or interviewing to get a look at how the site is meeting user needs
• IT will perform periodic link checks and report broken links to you; however, you should review your links regularly.
  

ADA CONSIDERATIONS

• Use ALT tags to describe images and image maps within the website. As a state agency, this is required of UHD by state law.
• Make sure that text and image colors contrast well and that color is not used as the sole means of conveying important information.
• Frames should not be used as they are not supported by most adaptive software tools.
• Texas Adminstrative Code for State Websites.

FORMS AND FRAMES

Due to the complexity of designing with frames and forms, we recommend not using them. Not all browsers currently support frames. If your website has a particular requirement for the functionality of forms and frames, please contact the TTLC for technical consultation, at 713-221-8200.