Web Style Guide

4. Design Requirements

This section identifies design requirements for all “Official” pages of Siena College’s website. Siena College’s official web fonts and colors are also defined.

 

  1. Fonts - Site Builder Toolkit (SBT) will have fonts set up for use on the website. Use of fonts other than those prescribed by SBT is prohibited.<font> may not be used.
    1. Arial is the standard font for all web pages – In order to establish a uniform presentation of information, Arial font must be the dominant font across all official pages. In limited occurrences, for the purpose of enhancing aesthetics, other fonts may be used for logos, captions and titles. If a content manager/editor elects to use a font other than Arial for the majority of a web page, said individual needs to document his or her deviation by referencing an external industry standard that requires it.
    2. Font size – Site Builder Toolkit uses a font of “Normal” for all regular text. Normal is a 10pt font.
    3. Font sizes for headings – Page titles should be the only use of “header 1” size font. All body content should begin with “header 2” size font for section headers, "header 3" for subsection headers, and “normal” for main body text.
  2. Color Values – Official colors for Siena College are green and gold. They are as important to the identification program as the logos. The application of these specific colors will create a strong and consistent identity for Siena College.
    1. Font Colors
      1. Body text – black #000000.
      2. Main links – maroon #770a0a.
      3. Top-links – white #ffffff.
      4. Interior navigation – black #000000.
      5. Widgets - n/a.
      6. Related information links – black #000000.
      7. Old print-material green – light green #5c855c.
      8. Spotlight sub-links – gray #999999.
    2. Template Colors
  3. All-Capitalized text may be used only for titles, headers, or logos – A section of words that are all capitalized is perceived as “shouting” or “yelling” and are hard to read. Use sparingly.
  4. Blinking, scrolling, or marquee text may not be used – The World Wide Web Consortium (W3C) is an international community where member organizations, a full-time staff, and the public work together to develop web standards. Their accessibility guidelines state, “Some people with cognitive or visual disabilities are unable to read moving text quickly enough or at all. Movement can also cause such a distraction that the rest of the page becomes unreadable for people with cognitive disabilities. Screen readers are unable to read moving text. People with physical disabilities might not be able to move quickly or accurately enough to interact with moving objects.”
  5. Underlined text is reserved for navigation links and cannot be used for any other purpose – If emphasis is required, use bolding, italics or other alternatives. These alternatives should be used sparingly.
  6. Body or paragraph text must be flush left – Text that is flush left is easier to read than text that is either flush right or centered (this also aids re-flow if the user re-sizes their browser window frame).
  7. Image tags must include width and height attributes – These attributes allow pages to load faster. Setting their values (that is, what the attributes "=") equal to the dimensions of the original image is the most efficient.
  8. Create web pages that do not require horizontal scrolling on basic monitors – Most users have monitor resolutions higher than 1024x768 (76% by W3 Schools log-files). To ensure your page design fits within this limit, horizontal graphics and tables should not exceed: 940px for 1-column templates, 680px for 2-column templates, 440px for 3-column templates.
  9. Create web pages that do not exceed four screens – Vertical scrolling allows a reader to advance in the text with less loss of mental "context" than does following a link. This advantage lasts up to about four screens of text. After that, there is a tendency for people to lose their context, and get frustrated with the mechanism of scrolling, and their inability to keep track of what elsewhere is on the page. Exceptions to this point include linked or referenced material not designed specifically for the web (e.g. .pdfs, .docs, etc).
  10. Use Microsoft Office Picture Manager to change photos to 72dpi.
  11. All pages are required to use dark text on light backgrounds for all main body text (paragraphs, headings, and subheadings) – Dark text on a light background provides a high contrast that enhances accessibility, readability, and printing consistency. The best contrast is black text on a white background, and is therefore strongly recommended. If there is a need for a dark background (which is not recommended for official or unofficial pages) light text that does not cause undue strain on the eyes should be used.
  12. Do not use multiple frame pages.
  13. The following information must be supplied on each page:
    1. Contact information of the content manager or editor or a general number to contact for page questions/comments (e.g. name of content manager's name or department).
    2. Contact email address – This can be either the traditional way or by address mungeing (pronounced munj-ing). See section 9-e below.
  14. Official Headers are required on every page – Headers will be supplied and controlled by ITS and SCIM.
  15. Homepage
    1. The main image rotator needs to have properly compressed images to allow the homepage to load as quickly as possible. The proper size of the image should be no more than 80kb.
    2. News ‘featured’ on the homepage should not be longer than two lines (more causes content below the news header to be pushed down). For more see ‘News Guidelines’ below.
  16. News Guidelines
    1. Titles – only the featured title should wrap to two lines (max).
    2. Other headlines – 45 character max (with spaces), which is essentially, ‘Siena Poll: Confidence Continues to Climb.’ This will make the site more consistent, not only on the homepage, but also for the interior landing pages.
  17. Information Channels
    1. Do not use your “related information” or the “persistent content” widget as navigation through your site. If page links need to reside “on” certain pages, then those pages should be moved or created “under” the parent page in the site hierarchy (this will allow the links to be in the main navigation) and/or linked within the body of the page.
    2. When using “related information” or “persistent content” widget, use one sentence to describe the link. If this is not filled out, “more” will be the only information for the user.
  18. Extra Code - Any code inserted by content managers/editors should not influence or change the pre-defined templates approved by the WAC.