You are here:

Communication & Marketing Guidelines

• Home
• Logos
• Official Colors and Fonts
• Stylebook
•  
• Advertising
• Printed Publications
• Publicity
• Websites
  • Overview
  • Best Practices
  • Procedures
• Our Staff
• FAQ

Best Practices for Websites

Accessibility · Browser Versions · CSS · Colors · Hyperlinks · Graphical Design · Images · Metadata · Naming · Navigation · Page Size · Templates · Typography

Accessibility

• Use a design that will be accessible to the largest possible audience. For a quick overview of accessibility guidelines see Section 508, Electronic and Information Technology Accessibility Standards. For a more in-depth explanation of accessibility techniques, see Web Content Accessibility Guidelines 1.0.

Browser Versions

• Test web pages with multiple, standards-compliant browsers: Internet Explorer (7), Mozilla Firefox (3.0), and Safari (3.1). These browser make up 98% of the traffic on the GC website.
• Avoid use of browser-specific features which do not degrade gracefully in Internet Explorer 7 or later, Mozilla 2 or later, and Safari 2 or later.

Cascading Style Sheets (CSS)

• Use Cascading Style Sheets (CSS) to separate presentation from content. Use tables to display tabular data and not for layout purposes.
• Name CSS ID's and classes semantically. Call it what it what it is. For example, .smalllink is correct, .style17 is not.

Colors

Orange

• HEX: F48F33

 

Black

• HEX: 000000

 

Purple

• HEX: 503D82

Hyperlinks

• Ask yourself what kind of information the user expects to find behind a given link. Link labels should match the title of the page that the link leads to. For example, when a user clicks on the "campus events" link, they should be directed to a page entitled "Campus Events."
• Make link text meaningful. Repeat usage of "click here" does not help readers easily locate the information they need. Instead, write your link text to describe the page it links to.
  • Bad: For information on HTML, click here
  • Good: For information on HTML, see Learning HTML (Avoid this redundancy)
  • Better: See Learning HTML for more information.
• Use consistent terminology. Be aware that one term can represent different kinds of information. For example, a link to "Academics" can reasonably be a link to the academics section of the main Georgetown College website (http://www.georgetowncollege.edu/academic.htm). Do not use the same term to refer to different pages. For example, if you have a section of your site devoted to policy, select a consistent word and use it on all pages that refer to the policy section of the page. Avoid calling it "Policy & Procedures" on the index page, but calling it "Policy Information" on subsequent pages.
• Use a consistent URL for periodical newsletters or publications Let's say you publish a monthly newsletter. When you publish the January newsletter you might be tempted to name it january.htm. That works fine for this month, but what happens next month when the latest or current version is no longer called january.htm. Consider creating a directory called current or a file called current.htm for the latest version of your newsletter or other similarly recurring publication.
• Avoid using icons or graphics as the only source of labeling information. Graphics and icons can be misinterpreted.

Graphical Design

Images

• All images on the web should be resampled to 72dpi in order to keep page sizes small.
• Keep your image size under 100K. This can be achieved my resampling your image after you have determined it's size and location.
• Use the appropriate file type for your images. Use a .jpg format for pictures and .gif format for simple color logos.
• Make thumbnail pictures clickable links. Users expect thumbnails to be links to the material they represent.

Metadata

• Use, at a minimum, these three metadata elements in the head of documents.
  1. <meta name="description" content="A breakdown of steps to apply to Georgetown College."> The description metatag does what it says, describes the content of the page. Very often, this is what you see in search engine results. Be succinct in the description.
  2. <meta name="keywords" content="apply, application, steps"> The keyword metatag provides keywords or topic phrases that describe the content of the page. This designation is helpful for search engines to accurately report the content of the page.
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> is the declared character set, which doesn't change.

Naming

• All pages should use .htm as their extension.
• Use index.htm as the name for the first, or primary page of your Web site. If the primary page is called index.htm you do not need to specify it when listing URLs in printed materials. Both of the links below work, but the shorter one follows standard naming conventions and is easier to remember and type:
  • Acceptable: http://www.georgetowncollege.edu/admissions/index.htm
  • Better: http://www.georgetowncollege.edu/admissions/

Navigation

• Create a consistent navigational scheme on all pages of your site. Good navigation never requires visitors to use the “back” button.
• Use a similar navigation and aesthetic scheme as the College's main page. Users find the shift between the main Georgetown College site and other department sites jarring and confusing because they are so visually and architecturally different. In organizing your pages, try to emulate the navigation scheme and aesthetic elements of the high-level georgetowncollege.edu pages as much as possible. If you need assistance in doing this please contact the web coordinator.
• Include Georgetown College’s name on all pages. This might be done as part of the title or header of the page.
• Let users know where they are at any given time in the information hierarchy of your site. The navigational system should present the structure of the information hierarchy in a clear and consistent manner and indicate the location within that hierarchy.

Page Size

• Page sizes should be less than 30K. Pages this size will load in eight seconds on a 56K connection. While this is the goal, we realize that some pages can not fit within this constraint so some exceptions may be made.

Templates

• Academic Departments can choose from four different templates (Template1, Template2, Template3, Template4)  that retain a common header, navigation and footer. For more information contact the Web Coordinator.
• College offices and departments need to use the standard College template that has a common header, navigation and footer. For more information contact the Web Coordinator.
• Student Organizations are not required to use a College template, however they are required to follow the guidelines listed here.

Typography

• For web pages, use fonts that will be the easiest to read and would be available on most computers. Sans-serif fonts, like Arial or Veranda, are much easier to read. Official College fonts have already been pre-defined in your site using CSS style sheets. Those editing pages should not change or deviate from these fonts. These predefined fonts can be found in the menu bar where "Paragraph" is listed.
• Styles used on the Georgetown College Website are listed below: