ITS Web Template Guide


 Overview

To meet the needs of ITS web publishers, as well as facilitate a unified ITS web experience, ITS Communications had made available web templates, including the ITS Brand Template and ITS Divisional template.

ITS Divisional Template. 

a thumbnail image of the ITS Divisional Template

The ITS divisional template is to be used for the primary content of each ITS division. These templates meet an immediate template need and also ensure a well-planned transition toward a global ITS web and content management strategy. The divisional template contains 3 Column layout and 2 Column layout.

ITS Brand Template. 

a thumbnail image of the ITS Brand Template

The ITS Brand template is intended for ITS web projects that do not constitute primary divisional web content. The template's main menu is independent of an overall ITS navigation system, unlike the divisional template. It is flexible and will easily scale for ITS web content sites of various sizes.

ITS Single Column Template. 

a thumbnail image of the ITS Single Column Template

The single column template is a "fluid" layout and may be used for smaller projects or single page screens such as a login.

 Template Files

Each of the ITS template types consist of multiple files and folders:

Divisional Template

  • 3col.php

  • 2col.php

  • kb.php

Brand Template

  • template.shtml

  • kb-brand.php

 Template Content Elements

 ITS Divisional Template Elements

The ITS Divisional template will scale to support both large and small division redesign projects. In addition, the template will adhere to an overall ITS site navigation structure. The global elements will ensure that end users have a consistent experience on all division web sites when navigating throughout the primary ITS web site.

an image of the divisional template with various content elements outlined in red
Cross-division navigation

cross-division menu system

UNC links

global UNC Chapel Hill links

ITS navigation

This is the primary ITS navigation. This menu will be activated upon launch of the first phase of the ITS redesign.

Submenu

first level division site navigation

Sub-submenu

second level division site navigation

Page-specific contact

contextual contact information (contact relevant to specific page)

Links

These are links to resources. Links list may be applied to specific pages or be used consistently throughout site.

Footer

global site footer

 ITS Brand Template Elements

The ITS Brand template will scale to support both large and small web projects. A secondary menu system (submenu) may be added or removed depending on the amount of content. A global header and footer ensure a consistent experience for end users and reinforce the ITS brand.

an image of the brand template with various content elements outlined in red
UNC links

global UNC Chapel Hill links

Primary navigation

first level site navigation

Site title

name of web site

Submenu

second level site navigation

Links

These are links to resources. Links list may be applied to specific pages or be used consistently throughout site.

Footer

global site footer

 Understanding Includes

The ITS web templates have incorporated a technique known as server-side includes (SSI). This means that certain elements of the template, such as the header and footer, are stored in one place. Each instance of the template will reference the exact same code. For the web developer, this means much less code to view and understand . For the end user, this ensures a consistent, unified look and feel .

Below are the elements of each template that use includes:

ITS Brand Template

  • UNC links

  • Footer

ITS Divisional Template

  • Divisional navigation

  • ITS navigation

  • UNC links

  • Divisional title subheader

  • Header (ITS logo, search)

  • Footer

This is an ITS Divisional Template include tag:

<?php include("includes/footer.php") ?>

This is an ITS Brand Template include tag:

<!--#include virtual="/includes/footer.html" -->

Note

Each ITS Division Template file must be saved as a .php file for the template to display content properly. Each ITS Brand Template file must be saved as a .shtml for the template to display content properly.

 Publishing Help Documents in Templates

Help documents includes user manuals, tutorials, FAQs and how-to articles about ITS services. These are maintained in the Knowledge Management Tool (KMT) and for a consistent customer experience they are displayed on the [ http://help.unc.edu/ ] Help site. However, you can also pull Help documents into your own pages or applications in order to meet particular customer needs.

Publishing a Help document in either ITS template is simple. KB.php (divisional template) and KB-brand.php (ITS Brand) are supplied for this purpose. All you do is copy the appropriate template into place, open the file and insert your document ID number in the include tag. (Those with more complex publishing needs, such as Java integration, should contact KM staff for assistance.)

Note

If the your documentation is not yet in the KMT, contact Steve Segedy (445-9483 or ) to see how the Knowledge Management team can help you produce and distribute quality Help documents. ITS technical writers are ready to help migrate your documents, provide training and ongoing editorial assistance.

 Publishing Multiple Help Document Links

If you wish to link to multiple Help documents, there is no need to duplicate the KB template files. Simply link to the KB.php or Kb-brand.php file and add ?id= document number to the URL.

 Guidelines and Best Practices

Web Standards. These templates were created with "web standards" in mind. This approach ensures less markup, a separation of content and presentation, improved accessibility, and wide browser support. ITS web developers are strongly encouraged to develop sites according to web standards. Learn more:

XHTML. Template markup is written as XHTML. ITS web developers are strongly encouraged to create their web sites using valid XHTML code. Learn more:

Semantic Markup. Template markup has been created with semantic, or structured, markup principles in mind. Semantic tags imply meaning rather than presentational instruction. For example, each header id is labled as "header," the side column ID is "sidebar," and footer is "footer." ITS web developers are encouraged to incorporate semantic markup. Learn more:

  • [ http://www.digital-web.com/articles/writing_semantic_markup/ ] Digital Web

Accessibility. UNC Chapel Hill is "committed to serving all the people of the State, and indeed the nation, as a center for scholarship and creative endeavor." For this reason, ITS web authors should develop sites in accordance with the university's accessibility guidelines. Learn more:

Clear, Relevant Content. Implementing the templates (particularly the divisional template) provides an opportunity to "clean up" code, remove outdated legacy content, and present users with easy-to-find information.

Good Information Architecture. An essential step in the web design/development process, is establishing an effective information architecture (IA) framework. Techniques such as sitemaps, content inventories, and the identification of common user tasks, can ensure that ITS web sites have usable navigation systems, intuitive layouts, and well-categorized content. Learn more below:

Usability. There are many factors that contribute to a successful web site. To ensure that our visitors have a good experience, ITS web developers and content publishers are encouraged to incorporate accepted usability practices into their site design and development. Learn more:

 Next Steps

After determining the appropriate template, contact the Web Services group to get the necessary files and assistance. You can reach the team Manager, Wendy Dascoli, by email at . You can also submit your request through the Web Services [ http://its.unc.edu/divisions/communications/web-services/request/form01.php ] Project Request Form or through the Remedy [ https://www.unc.edu/ar-bin/websub/index.pl ] Online Support Request.

Tip

There are many important considerations for a web project to be successful. These include information architecture, web standards, clarity of content and visual design, and so on. Consult ITS Web Services for assistance, guidance, and tips.

Copyright 2002-2007 The University of North Carolina at Chapel Hill.

Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 United States License.

Post a Comment

This form is for document feedback. If you need technical assistance, and are affiliated with UNC-Chapel Hill, please Submit a Help Request
Optional
Optional
So that we may contact you.
Do not fill out this form, this is a spam trap.
Top
University of North Carolina - Chapel Hill