To present a consistent identity throughout Lafayette College’s website, the College has adopted a standard design style for all official College pages.
The style is maintained through the use of the WordPress theme. Template changes can be made only by the Communications Division or Information Technology Services and will be reflected sitewide. In situations when it is not possible for a page to conform to the template, a Communications Division staff member will create the design in order to maintain consistency with the rest of the site.
Design guidelines for the Lafayette website are subject to change based on the needs of the site. Check this document or contact the Communications Division before beginning work on a Lafayette webpage.
Page layout, navigation, color, and font are specified sitewide by the Lafayette page templates. If you wish to design your own page outside the template, you may create a personal page, which is linked on the sites.lafayette.edu server. All pages on www.lafayette.edu use the template.
The Lafayette website is moving as quickly as possible into compliance with federal accessibility standards as provided in Section 508 of the Rehabilitation Act. New content on the site should comply with these standards. A guide from the Federal Access Board is available at http://www.access-board.gov/sec508/guide/1194.22.htm, and a checklist from the W3C is available at http://www.w3.org/TR/WCAG10/full-checklist.html.
The issue most commonly seen is images lacking alternative text (“alt text”). Make sure that any image on a page has information in the alternative text field within WordPress that describes what is shown in the image.
Hyperlinks, when clicked, ordinarily take the site visitor to another web page (or perhaps a specific location within a web page). If a link will do anything else when the visitor clicks on it, it should be noted in the link text. Clicking on links to Microsoft Word or PDF documents, for example, will cause an external program or browser plug-in to open. Thus, the link text to a Microsoft Word document must specify “file-name (Word doc)” and a link to a PDF file should read “file-name (PDF file)”.
Do not use the words “click here” or “go to” to precede links, which are identifiable by their blue color. Links should be within complete sentences, either incorporated in the main text or in a separate statement. These separate, complete statements that are calls to action (e.g. “Visit…”, “Read…”) should be in the linkForward style. The code is class=”linkForward” and should be placed after the <a that begins the URL string. There is no period at the end of the sentence. For example:
Visit the alumni website
The text of an email (or “mailto”) link should be the email address only. For example, an email link to contact Lafayette College should have the text “infohelp@lafayette.edu”.
Do not specify colors or font styles for hyperlinked text.
It is possible to specify whether a hyperlink will open in the same browser window or a new one. Links to a webpage should open in the same browser window, which is the default in WordPress.
Links to documents, however, such as MS Word or PDF files, should open in a new browser window. This is because people are used to closing an application when they are finished with it and will probably close the linked document as they usually do. If the document is open in the same browser window as the preceding page, they will then have lost the site.
Within the content management system, specify a new window by selecting “_blank” in the target field of the hyperlink context menu.
Font style and size are specified in the Lafayette College template and style sheet. Therefore, no font style should be specified within the page content. Editors should not use the deprecated “font” HTML tag or specify a font style within another HTML tag (for example, “span” tag).
Tags approved for use include headers (e.g. “h1”), “strong” (bold) and “em” (italic) tags. Tables and line spacing can also be used to set off text.
If further formatting options are required, contact the Division of Communications. Other style designations can be arranged.
Do not underline text. Underlined text, to Internet users, connotes a link. Use italics or bold for emphasis instead.
Do not use all caps within body text, and avoid it as much as possible within headings. Use a larger heading instead. All caps is difficult to read and is interpreted as “shouting.”
Coloration of content text is strongly discouraged. If colors must be used, be sure that the information conveyed by coloration can also be discerned with no color visible (this is one of the federal accessibility requirements). Do not use blue, red, or purple text, since these are standard link colors. Never specify color for hyperlinked text.
For most web pages, graphics should be no more than 55K in size (a maximum recommended limit is 85K total including text). Large images, or a large number of images on a page, can slow page load time to the point where a visitor with a dial-up connection will never see the images.
Graphics files should be in JPG, GIF, or PNG format. The JPG format has efficient compression and is best for photographs. GIF or PNG format should be used for illustrations such as diagrams, navigation graphics, or a graphic that contains text.
Image resolution should be 72 dpi. Approved College graphics such as photos and logos are provided upon request.
Web pages should not contain animated graphics or images.
The Communications Division and Information Technology Services reserve the right to alter images to optimize file size, correct color, correct light levels, or crop aesthetically.
Paragraphs should be left-justified. Indentation and justification are print conventions and should not be used on the web site. Keep paragraphs short and easily scannable.
Avoid using spaces to place text. For example, do not try to line up or indent text by
adding spacing like this. The content management system is programmed to strip out extra spaces. Spaces display differently depending on the browser, so what lines up on the computer you are using may appear differently on another one.
Web page text must adhere to the editorial style for official College publications. Conciseness and simplicity of language should be the rule of thumb for text. Break up large paragraphs and use bulleted lists whenever possible. Remember that website visitors typically skim text rather than reading word for word.
Articles
Although the website serves the Lafayette community and all visitors to the site, keep in mind that prospective Lafayette students are a key audience. Text should be written in an engaging tone. Principles that should be followed for articles:
Keep it simple. Avoid using sophisticated graphics and other features, such as animation, frames, and auto-loading video clips and sound bites, which are slow to load and cannot be accessed by all browsers.
Remember that when working on campus, the Internet connection is much faster than what most site visitors will have. If possible, look at the page with a dial-up connection to see how slowly it loads in a browser.
Academic and administrative web page editors may contact the Communications Division (infohelp@lafayette.edu) if they have questions or need assistance in developing web pages.