Site-wide links

Rochester Institute of Technology logo

These materials are copyright Rochester Institute of Technology.

www.rit.edu

Copyright, disclaimer, and contact information, available via the links in the footer of our site.

Pretitle text, if applicable (e.g. "Office of" or "College of")Site Title

The RIT Web Template System

The purpose of the RIT template system is to allow users to rapidly create a website on RIT’s main web environment, while also maintaining a level of consistency across all "official" RIT sites. What follows is a brief explanation of the template system, followed by how to impliment it.

The system has two parts: the HTML code and the CSS style. The HTML code contains all the content that you want to go on your site. The CSS style is the information about how you want the site to look. We are separating the content of your site from how the content is styled and presented; function over form.

Creating webpages this way has a bunch of benefits. Your website will be more easily viewed on mobile devices, it will be more optimized for search engines, and it will be more accessible to screen readers for the blind. In each case, the style/presentation information can be ignored. For these not so popular cases, you at least want people to be able to read your content, even if it isn't presented as pretty as you would like.

The website images below show the beauty of the template system. Each of the sites below use the same HTML code structure, they just have different CSS style files applied, thus making each site have it's own identity to varying degrees.


Before you start...

Before starting to create any website, you should have a good idea of its goal, audience, content, and structure/hierarchy. These areas are vital to any website. Even if you are simply moving over an already existing site into the RIT template system, you should revisit each area for your site. Is there anything on your site that could be improved upon? Would a change in hierarchy assist users of your site in getting to any specific information more quickly? Spending more time upfront will make the implementation of your site in the system a lot easier. That being said, if it ain't broke don't fix it. It's usually best to make small improvements to your site, instead of changing something entirely.

Eighty percent of the work related to a website is upfront, twenty percent of the work goes into actually implementing the site. Without being clear upfront, you will end up with a website that looks unprofessioinal due to the series of small bandaids you've used to "fix" things over the weeks, months, and years that follow.

Anyway, without further ado, let's jump right into the HTML code.

The HTML Code

Though CSS style is not required for any given web page on the web, the HTML code is; it is the page itself. The code below is the base HTML code used for the RIT template. Every RIT page in the system starts out exactly like this.

Base HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>RIT - Name of your site - Name of this specific page within your site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
	@import url(http://www.rit.edu/ritstyle.css);
	@import url(yoursite.css);
	/* CSS specific to only this page goes below this line */
</style>
<link rel="stylesheet" type="text/css" href="/print.css" media="print" />
<link rel="shortcut icon" href="http://www.rit.edu/images-template/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="container"> <a name="top"></a>
	<!--#include virtual="/inc_metanav.html" -->
	<!--#include virtual="/inc_printnotice.html" -->
	<div id="breadcrumb"><p>&nbsp;</p></div>
	<div id="banner"><div id="banner-image"></div></div>
	<div id="sitenav">...</div>
	<div id="maincontent">
		<h1 id="sitetitle"><a name="pagecontent"></a>Name of your site</h1>
		<h1>Name of this specific page within your site</h1>
	
		[The content of your site goes here]
		
		<div class="clearer">&nbsp;</div>
	</div>
	<!--#include virtual="/inc_footer.html" --> 
</div>
</body>
</html>
		

If you were to copy the above code, place it in a file, and upload it to the RIT web server, this is what the base HTML code would look like. It's nothing amazing, but a big chunk of your page is completed already. Quite effortlessly you've already got a design for your site that includes all the key areas, the RIT university-wide navigation, an area for a banner image for your site, a navigation area specific for your site, the generic RIT footer, etc. If you want to change the look of your site, you can do that later by changing the CSS style. By starting out by using the template though, you are allowed to pay attention to what should separate your site from any other site at RIT (the reason why any web user has come to your site), your content.

Keep the content simple, clean, and sematic. If you want to start a new paragraph, use a P tags. If you want a secondary heading somewhere throughout your content, use an H2 tags (see also Heading levels and page heirarchy further down in this document). If you have some tabular data to present, use an HTML table tags. Once you've got some pages created, it's time to work on the site navigation.

Site Title

If you're using the generic RIT template system, the banner image and the site title are the two biggest areas where you will distinguish your site from other sites using the system. And beside that, it's just good practice to put a site title on all of your pages to identify it. Placing the site title in an H1 tag also helps for search engine optimization, yet another compelling reason to use this template system! ;)

This site title element should not change throughout your site. Yes, each page should have it's own unique title, but the name of your site should never change. You need to create a consistent site identity after all. Also for consistency, this site title should also be used in the <title> tag at the top of the base HTML code.

Site Title code

<h1 id="sitetitle"><span class="pretitle">Pretitle text </span>Site Title</h1>
		

The optional pretitle SPAN tag should be used if your website needs text like "Office of" or "College of" before the common title of division/college/school/office. Most of the time, you'll want to match up this pretitle with the descriptor that you used on your navheader class of your site navigation. Be sure to place the space before the closing SPAN tag, otherwise if styles are turned off your site will read "Pretitle textSite Title."

Site Navigation

So you've got a couple pages of content, but they are useless if someone can't get from one to another. That's where your site navigation comes in. Hopefully by now you've thought out the best navigation structure/heirarchy for you site. If so, implimentating that navigation system should be a snap.

Generic Site Navigation code

<div id="sitenav">
	<ul id="primary">
		<li class="navheader"><a href="index.html">[Descriptor] Home</a></li>
		<li class="first"><a href="#">Main section 1</a></li>
		<li><a href="#">Main section 2</a>
			<ul>
				<li><a href="#">Subsection 1</a></li>
				<li><a href="#">Subsection 2</a></li>
			</ul>
		</li>
		<li class="last"><a href="#">Main section 3</a></li>
		<li class="listspacer"></li>
	</ul>
	<ul class="secondarylinks">
		<li><a href="#">Secondary links 1</a></li>
		<li><a href="#">Secondary links 2</a></li>
	</ul>
</div>
		

If you were to replace <div id="sitenav">...</div> in the base HTML code with the above chunk of code, and then upload the file to RIT's web server, this is what the base HTML code with added site navigation would look like.

Please change the "[Descriptor]" in the "[Descriptor] Home" link at the top of your navigation. Do not use just "Home" for your main site navigation, please use a descriptor such as College Home, Department Home, School Home, etc. Anything you want, as long as it's not just the word home. The reason for this is that we don't want people seeing the RIT at the top of your site, and then seeing Home, and thinging that they will be going to the RIT homepage. We want the used to understand that they are still going to the homepage of your subsite.

Note: The "first" class (which should be placed on the first LI element after the navheader) and the "last" class (which should be used on the last LI in the primary list, excluding the "listspacer" class) have no special styling in the default RIT template style, but can be very useful in creating a custom CSS style for the navigation. See the Sustinability Institute website for a great example.

For ease of updating, you'll want to make sure you create a single HTML file that is your site navigation (if it doesn't change from page to page). That way, if you ever need to change it, you only need to do it in one place.

Referencing your site navigation file in an HTML file

<!--#include virtual="/USERNAME/inc_sitenav.html" -->
		

Obviously, you'll want to change the USERNAME to wherever your site is, relative to the root web location (http://www.rit.edu)/. For example, for the University Publications website, USERNAME would be changed to upub because that site is located at http://www.rit.edu/upub/.

Referencing your site navigation file in a PHP file

<?php include('/home/w-USER/www/inc_sitenav.html'); ?>
		

Headings levels and page heirarchy

Proper document heirarchy (and thus correctly structured H1 - H6 tags) helps with search engine optimization and well as readability. Heading level 1 is the most important, so it is the biggest, and obviously the font size decreases as the heading level decreases. A special note about Heading level 1, this heading should appear at the top of every page, as it is used for the title of each specific page. It should also be different on every page of your site and should have the same name as it's navigation item that links to it (if it is one of hte main pages of your site's navigation). These heading (in fact all headings) should NOT be links to other pages. Below you will find RIT's style for the different headings. A border of 1pixel has been placed on each tag so that you can also see the padding above and below each heading (for example, see how only the H1 tag has a significant amount of bottom padding?).

Heading level 1 (page title)

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Bulleted lists

 

Paragraph as heading to a list

<p class="listheading">Text</p>
<ul>
	<li>List item</li>
</ul>
		

P.listheading - a P with class listheading should be used for P tages that lead into a UL (unordered list) or OL (ordered list), this keeps the list more close to it's heading, as follows:

Generic paragraph and list

<p>Text</p>
<ul>
	<li>List item</li>
</ul>
		

This is a generic P, without a listheading class. This is how the bulleted list appears if you leave out the listheading class:

Spaced out list

<p>Text</p>
<ul class="spacedlist">
	<li>List item</li>
</ul>
		

The following UL has the class spacedlist applied to it. Use this style if you want the list to be spaced out more vertically. In this case, it makes more visual sense to NOT use the listheading class on this P above the list.

Styling words within body text

The most commoly used methods of styling specific words within a paragraph of text is to make some words bold by placing a B tag around them or italicize them by placing an I tag around them. Sometimes you will see people use STRONG and EM (meaning emphasis) tags. For the sake of ease of use, these are treated the same.

Sometimes though, you might want to do something other than bolding or italicizing. For this, we add the standout class to a SPAN tag around our words.

Images within body text

It's a very common occurrance that people will want photos along with text on their website. Most commonly, these photos will either appear aligned on the left or right with text flowing around them, or simply centered within the page (with no text on the left or right). This is accomplished easily.

Right-aligned image within flowing text

<p><img class="textimage1" src="..." alt="..." />Text</p>
		
Left-aligned image within flowing text

<p><img class="textimage2" src="..." alt="..." />Text</p>
		

For right alignment, just place a class="textimage1" on your IMG tag (which should be within a P tag or a heading tag). Same goes for left alignment, just use class="textimage2". Right aligned images have some padding on the left and bottom of the image (so that text does not get too close to the image); Left aligned images have padding on their right and bottom. No padding is place by default on teh top of the images, so that if the image is included at the beginning of paragraphs, it will align nicely to the top of the text in the paragraphs (see how the right aligned images does just that?). In this example of the left aligned image though, I would probably want to add some padding to the top because of how close it is to the text above it (due to it not being placed at the beginning of a paragraph).

An important thing to note about using images in these two ways is that the images can sometimes flow over into another P. The textimage2 at right, starts in the above paragraph, but because of the images height, it comes down into this paragraph and pushes the paragraph's start point to the right more. After this paragraph gets long enough though, text will star wrapping around the image and returns to the left border as one would expect.

You're probably wondering why the classes aren't simple named "rightimage" and "leftimage." This is because we are separating presentational information from the content. The reasoning if more easily understood if we look at naming of the site navigation area. What if that area was called "leftnav?" It might work for how you want your site to look, but what if in the future you decide that you want your navigation to be horizontal across your page? A couple changes to the CSS style and it's easy to change from a left nav to horizontal one, but then your HTML code will say "leftnav" even though isn't displayed on the left. It doesn't make sense.

Centering the image is slightly different than the other two methods though. For centering, you'll need to place a class="textimage3" on the IMG tag, which is what you'd expect, but you also have to place that same class on the P tag. Unlike the previous two methods, text is not meant to flow around centered images.

Centered image

<p class="textimage3"><img class="textimage3" src="..." alt="..." /></p>
		

One more note about images, you should not need to include any width or height dimensions on the IMG tag, unless you are resizing the image with HTML, which is generally NOT advisable.

Back to top links

Every web developer has had to deal with content issues. Either there isn't enough content, or there is way too much. In cases where there is way too much content (and for some reason it can't be split onto multiple pages), you'll want to use a 'back to top' link.

Back to top link code

<p class="backtotop"><a href="#top"><span>Back to top</span></a></p>
		

Back to top

You may be wondering why the span tag is in there. That would be used if you wanted to not have the text, and instead use an image such as an up arrow. For that case, you just use css to change the text-indent of the text in the span to a large negative value, and then use a background image of your arrow on the anchor tag within the backtotop class.

Side bar

There may be times when you want a sidebar on your site. Whether it is for news, announcements, or links to other relavant pages or sites, the sidebar can further direct people on your site to the info they are looking for. Implementing the sidebar is a snap as well. Here's how:

Side bar code

<div class="sidebar">
	<h4>Heading</h4>
	<p>Text</p>
</div>
		

Item listings (with photos)

The item DIV was created to keep some consistency to the system in cases where one wants to describe a series of objects. In the example below, we've used the item div for a faculty/staff listing, but it could just as easily be used to describe anythign else. Say I had two talk about 4 different bowling balls, the facult photo would be replace by a bowling ball photo, and the itemtitle would be the name of that specific ball followed by a description abotu what makes it unique.

Item code

<div class="item">
	<img src="..." alt="..." />
	<p class="itemtitle">Title</p>
	<p>Text</p>
</div>
		

p.itemtitle for use inside div.item

normal P tag inside div.item with text. filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler

Real example: Brenda Monahan, Print Buyer

1169 Building 86
22 Lomb Memorial Drive
Rochester, NY 14623

e-mail: blmcmp@rit.edu
phone: 585-475-4973
fax: 585-475-7783

Read more about Brenda on her bio page.

Two-columned layout

Unlike print, two-columned layouts don't work well on the web, especially if you've got many pages worth of content that you want to put on a single webpage. After scrolling all the way down your page as they read the first column, the user wouuld have to scroll back up to the top of your webpage to continue reading into the second column. That's poor usability. There are however some good uses for a two-columned layout in sections of a page. In particular, the item DIVs mentioned above look great in two columns.

Two-columned layout code

<div class="contentcolumn1">
	...
</div>
<div class="contentcolumn2">
	...
</div>
<div class="clearer">&nbsp;</div>
		

filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long fillerfill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler

filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler

filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler

filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler

filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler

filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long fillerfill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler

filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler

 

generic P tag text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make.

Back to Top

The CSS Style

So, now you should know the basic HTML to use for your webapges. In the next section (which is obviously not yet complete), we'll go over using an additional CSS file to modify the look of your site.

Using the generic template discussed at the beginning of the HTML Code section, you already have the generic RIT CSS style file included with your site. Changing the banner area is a great way to keep your site in the template, but still make it unique to your site, but what if you want to do even more? That's where a secondary CSS file comes in. Putting a link to a secondary CSS file in your HTML code allows you to make your site even more unique.

Here are a few examples that use the standard HTML code and CSS style, but they also have an additional CSS style file attached:

When starting to customize the look of a site, there are a couple chunks of code that I use a lot. In each case, I start with these chunks of code, and then build up to my more custom site look. For example, if the new look is goign to be centered, before I do a lot of design changes to the default look, I apply the code below for centering the page. If I know that I'm going to change the look of the navigation a lot (like if I want to change it from horizontal to vertical navigation), I first apply the navigation reset code below.

Centered default layout

Many modern websites prefer to have their layouts centered. This is easy enough to do in CSS style but it has one big caveat. Recent HTML and XHTML standards do not support having 100% height on your block-level elements (such as a DIV tag) unless that DIV is contained in an element with an absolute height. So what exactly does this mean? You can't easily have your page design run to the bottom of the browser window on big monitors. It's hard to explain, but hopefully you'll know it when you see it. The easiest solution is to have a background image on your BODY tag that tiles vertically, that way you'll have your design go the full length of the browser window.

The code below will let you center RIT's default layout. It does not include any code for a tiled background image. Instead, the footer just has a one border pixel on the bottom that indicates the end of the page.

Centered default layout code

* {text-align:left;}
body {text-align:center;background-image:none;background-position:top center;background-color:#FFF;}
#container {width:950px;  margin:0 auto;}
#banner-image { overflow:hidden; margin-right:2px;}
#metanav {position:relative;}
#metanav a span#logo { padding:0;margin:0;left:0;top:0;display:block; position:absolute;left:0;top:0;width:162px;}
#footer {border-bottom:1px solid #dfdecb;}
		

Navigation reset

Sometimes you might want to change the look of your navigation, but because the navigation already has the RIT CSS style applied, it gets difficult to change things (especially when CSS precedence is acting in a way different than you expect). One of the biggest examples of how we totally changed up the RIT CSS style, but kept the exact same HTML code is on the Imagine RIT site. Below is code to reset the navigation to a more generic look, and then from there you can build it into something completely different (like changing the navigation from vertical to horizontal).

NOTE: this is not meant to be a complete new navigation. This is just meant to reduce and reset the navigation, at which point you will add more code to display the new look (and you might even change things like the left margin on the main content DIV).

Navigation reset code

#sitenav, #sitenav ul, #sitenav ul li, #sitenav ul li a, #sitenav ul li.navheader, 
#sitenav ul li ul, #sitenav ul li ul li, #sitenav ul li ul li a,
#sitenav ul li.navheader a, #sitenav ul li.first, #sitenav ul li.first a {
	list-style: none;
	font-family:Helvetica, Arial, sans-serif;
	font-size:1em;
	font-weight:bold;
	padding:0;
	margin:0;
	border:0;
	color:#000;
	background-color:#DFDECB;
	font-size:100%;
	font-weight:normal;
	font-style:normal;
	width:auto;
	height:auto;
	position:static;
	float:none;
	white-space: normal;
	z-index:100;
}
		

Stay tuned, more to come!