Gustavus template
The Gustavus template is a system of creating pages for the Gustavus website. Web pages which use the Gustavus template share a common navigation structure and maintain a consistent look and feel throughout the Gustavus website. This system allows Web Services to make improvements and updates to every page that is in the Gustavus template quickly and easily, and helps to ensure that these pages meet accessibility and usability web standards.
How it works
A web page that uses the Gustavus template is said to be "in the Gustavus template." When editing such a page in Adobe Contribute, it won't look exactly like a Gustavus page even though it will when viewing it on the web. This is a bare-bones version of your page which only contains its editable parts. When you publish your page, the Gustavus web server will pull each of these blocks of information out of the template container page and use them to generate the document that everyone can see in their web browser when they visit your site.
Components
A page in the Gustavus template is made up of several components. Some of them are directly editable on the page by the person maintaining the site, some of them are modifiable by Web Services on a per-site basis, and some of them are static across all Gustavus pages.
Directly editable sections
You can directly edit the content of the following three sections of your page:
- The page's Title.
- The page's Subtitle.
- The page's main Content.
These three sections are described below.
Title
Your page's title should be concise, descriptive, and unique. When your page is published, this title will show up in the following three places:
- As a large heading at the top of the page.
- In the breadcrumb trail.
- As part of the HTML document's title in the browser.
Additionally, your page's title will show up in search results when people use search engines such as Google. Therefore, a well thought-out title is very important because it will help people find your page.
Subtitle
Your page may optionally have a subtitle. When published, this subtitle will show up below the page's title and as part of the page's title in the browser. Resultingly, the subtitle makes up part of the link text for search engines.
Content
This is where your page's main content goes.
The local navigation is a list of links to pages in your site that appears on the left side of the page. Unless your site is very large and complex, most (if not all) of your site's pages should be linked to in this area, and the same list of links should appear on every page. Local navigation serves as the road map to your site, and a little extra time spent planning this and naming things in a logical way can have a tremendous impact in making your site easier to use.
Usually, each link to a page should be that page's title (or a very close approximation). If your link text seems too vague, there is a good chance you should rename your page to have a more descriptive title. Additionally, you can add a short description to the link by giving it a title attribute.
You may be thinking, "Gosh, that's going to be a pain to edit every single page when I want to update a link in the navigation." And you're right. That's why many Gustavus sites make use of a feature in scripting languages called including, to include a separate navigation links file (specifically, the include() function in PHP). This makes updating your local navigation a lot quicker because you only have to change one file. At Gustavus, our convention is to name this file of links site_nav.php.
Customizable sections
Web Services can make some customizations to sites, as long as these customizations fit into the look and feel of the rest of the Gustavus template.
Banner
Web Services can work with departments to create a departmental banner for a site that goes between the Global Navigation and Breadcrumb Navigation sections. This can provide a substantial distinction and visual identity for individual departments. For example, the Linnaeus Arboretum uses custom banners.
Aux box
The aux box is the area that appears between the page's main content and footer and is used for additional information that falls outside of the scope of the current page's content. Web Services can customize this area on a per-site basis to contain only information specific to that department, office, or organization. For example, the Philosophy department. If you'd like to add this to your site, compile a list of these custom items for your department and contact Web Services.
Available types of content
There is a variety of types of content that are currently available for your aux box, including:
Static sections
Page container
A common question Web Services gets is "Why are all the pages so narrow?". The Gustavus website is used by a very wide audience, and we strive to make it as accessible and usable as possible for all of them. While some users may have giant monitors running at massive resolutions, some users do not. Our statistics show that most visitors view our site at a resolution of at least 1024x768, and the current page width of the Gustavus Template reflects that minimum. While vertical scrolling is common and generally considered a necessary method of browsing websites, forcing the user to scroll horizontally is a huge failing in usability.
Masthead
The black bar that contains the logo is informally called the header or masthead. On the left side of the masthead, the Wordmark links to the home page. The right side contains a multi-purpose search box which provides a fast way to perform a Google search of Gustavus' website (or the Internet), a College calendar search or a search of the electronic Gribly.
Below this is the Global Navigation bar, which contains the most frequently used sections of the website.
Below the Global Navigation (and Banner, if present) is the Breadcrumb trail. This series of parent directory links mimics the file structure on the web server, and provides users a clear representation of where they are in relation to the site's home page. This is especially important if the user lands directly on a page buried in several directories, such as from a search engine. The Breadcrumb trail allows users to quickly figure out where they are and shows them how they might get to other related content.
The footer contains additional links designed for different audiences. Additionally, it contains important contact information about Gustavus, including Gustavus' address.
Why use the template?
Web Services has done a lot of research and put a lot of time and thought into planning the Gustavus template to make it great in many ways. Some of the template's most important features can be summed up with the FAST acronym:
- Fast, Friendly, Flexible: By using streamlined, semantically meaningful XHTML markup and CSS, we can achieve faster page loads, make our pages more search engine friendly, and make them easy to update in the future.
- Accessible: Our website can be used by people with special needs, such as those with visual impairments.
- Standards-compliant: We attempt to cleanly code everything to meet strict standards set by the W3C to make our pages work on as many web browsers as possible (past, present and future).
- Tableless: We strive to have all of our pages use only semantically-meaningful code. Modern web design strives to separate presentation from content, replacing the antiquated (and semantically incorrect) method of using tables to organize and lay out non-tabular data. The Gustavus template takes the modern approach of using CSS exclusively to control the look and feel of the site.
Most importantly, changes made to the underlying template framework are reflected immediately, site wide, on every single page in the Gustavus template. This means that we can focus on keeping ahead of changing trends and standards without having to manually edit each page. Your site will benefit without any unnecessary headaches or downtime.
Moreover, creating a consistent, easily relatable, and highly predictable user experience is good for everyone.
Other features
We have several convenient tools built into the template which we continually improve and add to:
- Send feedback
- Breadcrumb navigation
- Global navigation
- Useful footer information
I still need help
Please e-mail web@gustavus.edu or stop by the Web Services office in Olin Hall 119.