Skip Navigation

Information Technology

Guidelines for Creating ASU Web Pages

Introduction • General Design Concepts • Department Home Pages • Content Pages • Application • Things to Remember • Reccomendations

Introduction

These guidelines have been produced and disseminated as part of the University's marketing effort to provide more consistency in design and quality of University and departmental web pages. Various templates have been designed with consistent color schemes, type fonts and design elements to provide a unified look for University web pages. At the same time, some flexibility has been provided for the informational components that departments may choose to use.

In addition to providing a unified and enhanced look to ASU web pages, the templates provide a professional starting point for departmental webmasters to focus on the informational rather than design components of their respective pages. While some design flexibility is available to the webmasters, the templates and these guidelines are intended to simplify the process of departmental web design and enhance the University's overall marketing to prospective students.

Back to Top

General Design Concepts

A unified template design has been developed using Cascading Style Sheets with a consistent page banner, menu, font styles and faces. CSS ensures that all of the pages within the ASU web site have a consistent look and feel.

The unifying element of all the templates is the top banner titled " Angelo State University " with a blue textured background, the new ASU logo (formerly the athletics logo) and the name of the department. The template will allow web page authors to change only the name of the department.

Each page created using the template will contain a Top Menu Bar that is the same for all pages on the ASU site. Below the Top Menu Bar there will be a Bread Crumbs menu that will track the file path of the page that is being browsed at any given time. This Bread Crumbs menu is generated automatically and the web page author does not have to create this menu. For each page there is a Left Menu. This menu will serve as the navigation for each department's web site. Some items on the menu will link directly to a web page while others will lead to a submenu of related pages. Items may be added to and deleted from the Left Menu as the need arises.

An example of all of the General Design Concepts described above can be found on the page you are reading now.

Back to Top

Department Home Pages

The opening page for academic departments is the place to start recruiting students. Each academic department should have an opening page that provides a brief description of the department, its programs and the career opportunities that are available to its graduates or a sample of the firms that have employed or professional schools that have accepted graduates. The object here is not to overwhelm prospects with information as much as inform them what makes your department special and intrigue them with opportunities within a particular field.

As our surveys of prospective students indicate, they are very visual and they like photos. Including a high quality photograph germane to your academic area is recommended. But keep in mind that a poor quality photo of low resolution and dark shadows can do you more harm than good.

All departments, whether academic, administrative, admission, recruiting, or student support, will use one of four department home page styles. Click on the Style # in the list below to see an example of each:

The news and announcement boxes and the bottom column menu are optional. Both can be turned on or off based on the needs of the department via the template.

Save all home pages as index.html.

Back to Top

Content Pages

Each additional page within the site must use the template to ensure a consistent look and feel within the entire ASU site. The editable region within each template is available for departments to use to fit their specific needs. This area can be used for both text and graphics. The Cascading Style Sheet will determine the size of each page as well as the colors. The font face, size and color are determined by the Style Sheet as well. Main headings should use the <h1> tag and subtitles should use the <h2> tag. All of the content on the page other than the elements included in the template should be placed BELOW the title.

Because these pages are the windows more and more prospective students use to gauge their interest in Angelo State University, several standards must be met in design. All graphic elements, including photographs, should be of high quality and appropriate resolution. All information should be accurate and informative. Text should be well written.

Web page authors should use only those colors approved for the ASU site.

The primary colors are:

#EFE3B9
239-227-185
#CB9F5B
203-159-91
#E6E6E6
230-230-230
#CCCCCC
204-204-204
#4E6886
78-104-134
#4C72AB
76-114-171
#133980
19-57-128
             

The secondary colors are:

#B5B499
181-180-153
#445347
68-83-71
#B09C7B
176-156-123
ASU
#FCC917
252-201-23
ASU
#003896
0-56-150
TTU
#CC0000
204-0-0
#990000
153-0-0
             

Here are some additional guidelines for creating content pages within a department's web site:

Here are some short examples of HTML code for the most common elements on a content page.

Here is an example of a correctly formatted content page.

Back to Top

Application

These design guidelines apply to all university Class I and Class II Pages as defined by the University Web Policy. Faculty who wish to incorporate the appropriate template into Class III pages, as defined by the University Web Policy, may do so for instructional or educational pages only. No other Class III pages may use the templates.

Class I and Class II Web Page Guidelines

All Class I and Class II Web Pages must meet these requirements:

  1. Page information must be accurate, current and appropriate for online use.
  2. One manager must be responsible for the content and timeliness of the page and this person's name and e-mail address must appear on each page along with the date of last revision.
  3. Page must comply with the policy established by the Web Oversight Committee.
  4. Pages must avoid unnecessary duplication of information and effort as well as contradictory or erroneous information.
  5. Pages must comply with all policies and laws, especially those governing copyright and Americans with Disabilities Act requirements.
  6. Pages must be treated as if they were being published in a hard copy format and are subject to University publication regulations and policies.
  7. Official pages are the only documents allowed to display the official Angelo State University logo and should be denoted by that logo. This logo is subject to the graphic policies as set forth by Institutional Advancement. An online version of these policies will be linked from the official Angelo State University website.
  8. Pages should be constructed in accordance with good design practice.
  9. Pages should load quickly as determined by Information Technology.
  10. Pages must be easily accessible from and have a standard link returning to the Official Angelo State University Home Page.
  11. Pages may include audio, video, graphics, and text.
  12. Public domain information contained in official pages must have requisite permission and appropriate citations.
  13. Official pages must be updated as necessary or at least once a semester. This should include checks of the validity of all hypertext links.

Examples of appropriate material:

Examples of inappropriate materials:

Class III Pages:

Class III pages are instructional and educational pages that are created and maintained by individual faculty, staff, and students. The University encourages Class III Pages in support of the University's institutional mission. The following guidelines apply to Class III Pages:

  1. Faculty and staff may create Class III pages linked from Class I or Class II pages.
  2. The following disclaimer must appear on the first page of all Class III Pages:
    "This document and its contents reflect the views and opinions of the author(s) and not necessarily those of ASU or The Texas Tech University System."
  3. Examples of appropriate materials:
    • Class projects.
    • Class materials, including syllabi, assignments, etc.
    • Original works of art.
    • Original writings.
    • Resumes and biographical materials.
    • Research results, data and/or discussion.
    • Examples of inappropriate materials:
    • Derogatory or libelous materials or materials that infringe on the rights of others.
    • Materials which violate policies or laws.
    • Confidential materials including records protected by the Family Educational Rights and Protection Act.
    • Materials that are abusive, profane or sexually offensive.
    • Advertisements for commercial products or enterprises.

General Guidelines for ASU Pages

Because the World Wide Web is a major window into the University, visitors to the ASU web site make judgments upon the University based upon what they see. Therefore, attention to accuracy, detail and design are important in making the best possible impression upon Web visitors. All individuals designing and writing Web pages, whether Class I, Class II or Class III, should remember the following.

Back to Top

Things to Remember

ASU's colors are royal blue and gold.

Appropriate University icons, including the new ASU logo are available on the Communications and Marketing Web Site.

Keep graphics small by using a resolution of 72 dpi. Most monitors will not display higher resolution than 72 dpi. Use thumbnail images to link to larger graphics.

Browsers

The Web is a diverse environment and not all browsers are equal. Recommended minimum browsers are browsers developed within the past eighteen months. Test your page with each of these browsers.

Links

Use hyperlinks and anchors to provide jumps within long HTML documents.
Don't leave unimplemented links active. Error 404s (file not found) leave people frustrated.
Validate and verify everything. Make sure your URL's are correct and do not include spaces in your filename.

Document Titles

Document titles should aim for global uniqueness. The title should be informative and concise.

Body

Keep the length of your pages to one or two screens of information. Minimize scrolling and display time. Less display time helps everyone. Limiting the amount of information helps with download time and generally results in a more visually appealing page. Use white space wisely, with consistent spacing between things of equal importance and increased spacing between organizationally distinct categories. Don't crowd your text and be brief, concise and specific in your wording. You can often say more with less.

Images

When incorporating images into your pages, make the file size of the image as small as possible. Larger images can drastically increase retrieval times. Your pages will be enhanced with graphics, eliminating visual monotony, just remember to keep the file size relatively small. Always use the alternate and title text tags to provide meaningful labels to non-graphical browsers. The alternate text tags are also required to meet requirements of the American with Disabilities Acts.

Back to Top

Recommendations

Back to Top