Responsive Portal Styles

Our goal with this project is to provide an accessibile, responsive, and future-proof template for applications throughout the University of Mississippi landscape. To facilitate this goal, we have developed new stylesheets and a templating mechanism to make use of them.

New Applications and Overhauls

Going forward, new applications should be built using HTML5 standards. One shortcut we are introducing is a JavaScript file called “UM Templater.” Follow this structure for using the templater script:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		...
		<script src="https://common.olemiss.edu/templates/um-templater.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://common.olemiss.edu/_css/application.min.css"/>
		...
	</head>
	<body>
		<main id="main" class="container">
			<h1>Page Title</h1>
			...
		</main>
	</body>
</html>

Portal Theme examples (simulated internal/external):

This UM Templater script is also capable of including a header and footer for applications that live outside the portal. Applications may utilize the full UM template by implementing a basic HTML5 structure, or specifying a class on the body tag like so: <body class="um-full"> . The end result is an application that looks as though it were built as a part of the main UM website. Documentation for this will be available soon.

Relocation of Resources

If you have shared javascript files on various servers, let's consider moving those to this Common server. Any scripts you created for just one or two related applications can remain wherever you need them, but a single instance of jQuery and other shared code will help us out. So here are the scripts I have in place now:

Existing Applications

Applications that are already in production can benefit from minimal changes to their HTML.

Step 1. Update CSS Link

The original code for legacy applications included calls to portal.css and (sometimes) ptemp1.css. More recent ones used portal2011.css, as well:

<LINK href="https://secure3.olemiss.edu/irj/go/km/docs/documents/UMStyleSheets/portal.css" rel="stylesheet" type="text/css" media="screen" >
<LINK href="https://secure3.olemiss.edu/irj/go/km/docs/documents/UMStyleSheets/ptemp1.css" rel="stylesheet" type="text/css" media="screen" >
<LINK href="https://secure3.olemiss.edu/irj/go/km/docs/documents/UMStyleSheets/portalprint.css" rel="stylesheet" type="text/css" media="print" >
<LINK href="https://secure3.olemiss.edu/irj/go/km/docs/documents/UMStyleSheets/ptemp1print.css" rel="stylesheet" type="text/css" media="print" > 

These should be replaced with this:

<link rel="stylesheet" href="https://common.olemiss.edu/_css/legacyportal.css" type="text/css"> 

The new legacyportal.css should handle most of the styles of the previous stylesheets, though we expect to find some snags that need correcting as the conversion process continues. If your application had stylesheets developed specifically for it, be sure to include those after the legacyportal.css link.

This may be all that is needed to make things "look" okay.

Step 2. Update Structure

The new layout lets you remove some of the structure we originally created to mirror SAP's theme framework, and at the same time, it makes the page titles more accessible. Here's some sample legacy 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">
	...
	<body>
		<div id="container">
			<div id="pagetoolbar">Page Title</div>
			<div id="page">
				<div id="content">
					<div id="information">
					...
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

We can now use a more semantic structure with the simpler HTML5 doctype and <html> tag:


<!DOCTYPE html>
<html lang="en">
	...
	<body>
		<main id="main" class="container">
			<h1>Page Title</h1>
			...
		</main>
	</body>
</html>

The following examples illustrate how the changes will affect the documents.

Testing Applications

See information on testing your applications for valid HTML5 and accessibility.