Web Page Templates & Compliance
Lehigh University developed a Visual Identity System to ensure that the university, its colleges and its supporting offices maintain a consistent, unified approach to communicating the Lehigh brand. Using such a system helps people easily identify Lehigh throughout all forms of communication.
The following official templates, web development guidelines, resources, tutorials and utilities are provided to enable Lehigh webpage authors to create standards-compliant HTML markup that also complies with Section 508 accessibility guidelines and conforms to the Lehigh visual identity system.
It is strongly recommended that the templates provided below are used to build institutional webpages. The official Lehigh website templates are constructed to be standards-compliant, conform to accessibility guidelines and the University's visual identity system, and enable web content become "mobile aware" and automatically adapt to fit the form factor of tablet, smartphone and desktop computers concurrently. A special instance of Google's search engine is integrated into the templates to enable visitors to locate any number of University-wide services including programs and majors, financial aid and scholarship opportunities, registration and student services, library and technology services, news and events, job opportunities, maps and directions, and disability support services. In addition, the official Lehigh templates incorporate important footer links including emergency information and a "text-only" transcoding service that dynamically generates an assistive technology-compatible version of web content. Websites built upon the Lehigh official templates also benefit from improved search engine rank.
In the event that an institutional webpage developer cannot utilize the official templates, consult "Achieving compliance on sites built without the Lehigh web template" below.
Creating a compliant Lehigh website using the web page template
The official Lehigh web page templates below are to be used to create sites for hosting exclusively on university web servers.
Step 1: Setup Web Space
To help web authors create, edit and manage pages on university web servers, technical training and documentation is available on several topics, including acquiring licensed software, initializing web space, understanding HTML basics, conforming to university computing policies and guidelines, and much more. Visit the "Setting up your Web Space" section of the Library and Technical Services Web support page for details.
Step 2: Choose a Template
Each of the official Lehigh website templates below are constructed to be standards-compliant and conform to accessibility guidelines and the University's visual identity system,. The templates incorporate Responsive Web Design (RWD) techniques to enable content published on the website to adapt to varying screen proportions so it can be viewed comfortably within browsers on desktop computers, tablets and smartphones. The templates contain all the required code markup, hyperlinks and scripts to ensure a seamlessly integration with the rest of the Lehigh website (Lehigh's "WWW4" series of web pages--including Lehigh's home page and Inside Lehigh page). Step-by-step documentation and inline comments are included with the template so that institutional web authors with a basic understanding of HTML and CSS can implement sites quickly and easily.
Instructions: Select the appropriate template package to download, extract the files to a local drive, and consult the included documentation.
Web Template 1 (Basic)
Contains placeholders for customizable graphic header, body text, and footer information, as well as the ability to create topic navigation through text links that are manually added to each page. This template version is best suited for sites consisting of a few broad topics or parent-level pages.
 |
(.zip file, 704 KB) |
| (Lehigh authentication required*) |
Web Template 2 (Advanced)
Contains placeholders for customizable graphic header, body text, and footer information, as well as the ability to create drill-down site-wide navigation through text links controlled via a centrally managed JavaScript file. This template version is best suited for sites consisting of several topics and subtopics or parent- and child-level pages.
|
(.zip file, 700 KB) |
| (Lehigh authentication required*) |
Step 3: Develop Standards-compliant Pages
Here are a few recommended resources to aid in the development of accessible, standards-based markup, and to improve site usability and user satisfaction.
Web development and accessibility resources, tutorials and utilities:
Monitoring site activity:
Interested in learning more about where website visitors come from, and how they interact with the site? Web authors will need some technical expertise to implement additional code into the website template, and a Google account that the web author or department will manage. Here's how to get started with Google Analytics.**
Achieving compliance on sites built without the Lehigh web template
It is strongly recommended that the official Lehigh website templates provided are used to build institutional webpages. In the event that an institutional webpage developer cannot utilize the templates above, consult this guide to optimize your results.
Many Lehigh University offices and services benefit from having their website linked from various locations on the institutional website (Lehigh's "WWW4" web pages--including Lehigh's home page and Inside Lehigh page). This includes sites and services that are created and/or hosted by third party providers. Before an office, department, program or specialty web page or site can be linked in this manner, it must meet the following requirements:
- Adheres to Lehigh's visual identity guidelines regarding use of the logo, color palette, typefaces and photographic style.
- Adheres to Lehigh's writing style guide and observes proper grammar and punctuation.
- Features a prominent hyperlink (specifically, http://www.lehigh.edu/home) to Lehigh University's home page.
- Site markup is standards-compliant and complies with section 508 accessibility guidelines to ensure broad compatibility.
- Text and other content featured on the site complies with Lehigh's computer use policy and Web site copyright notice.
- Site integrates Lehigh's Google Search (instructions below) that indexes all Lehigh.edu pages and other Lehigh-related websites and pages.
- Site includes the Lehigh footer (instructions below). Adding these links is easy to do and helps make services such as the Emergency information site and Lehigh’s website copyright notice readily available to all site visitors. Embedding the provided script will ensure that this set of essential links always remains up-to-date.
Lehigh's Google Search Implementation Instructions
Lehigh University licenses a special instance of Google's search engine that is tightly integrated into the official Lehigh webpage templates. This service enables visitors to locate any number of University-wide available information and services including programs and majors, financial aid and scholarship opportunities, registration and student services, library and technology services, news and events, job opportunities, maps and directions, disability support services and much more.
This Lehigh-Google search function can be integrated on a website that was not built with the official templates. To learn how, select the button below and follow the instructions to embed the supplied code on each page within the site (Lehigh authentication required*):
Lehigh Footer Implementation Instructions
The Internet Services team of Communication and Public Affairs manages the content and styles of the footer file. To add the footer to a site, view the code by clicking the button below, and follow the instructions to embed the code on every page in the site (Lehigh authentication required*):
For web authors with experience with CSS who are interested in changing the footer styles to match the design of their site, please view the Technical Notes page for more information.
* Access to the templates requires authentication with a valid Lehigh AFS ID and password. (Your AFS ID and password are those used to access your email account, or to log into the Network Server.)
** Lehigh University is not affiliated with Google and does not provide technical support for using these third-party products.