Eastern Mennonite University

EMU Web Design Standards

Web Policy Manual

Basic Web Design

Professionalism

Dreamweaver MX 2004

Editorial

Images and Graphics

Consistency of site look and feel

Almost every service-based company has a uniform. Delivery people, mechanics, grocery store clerks, and food servers all usually have some sort of standard clothing. The uniform can be as unobtrusive as a name tag or as distinctive as a doctor's white coat. Either way, uniforms convey professionalism, organization, and unity. The EMU web site wears a "uniform" of sorts. Several elements combine to create a consistent, distinctive look and feel to the EMU site.

  1. The header, generated dynamically
  2. The left hand navigation column - this contains a set of department specific links followed by general EMU links.
  3. Major headings are indicated by choosing an H1, H2, H3, H4 code (do this rather than set your font size higher).
  4. Body text. The font and size is assigned automatically (using CSS). Curators should leave text in it's default font and size to avoid over-writing the CSS.
  5. The footer, generated dynamically
  6. Minor headings -- used within major headings as another organizational level -- are rendered in bold face, at the same size and font as the surrounding text.

All public pages on the EMU website should adhere to this graphical "uniform" to increase the usability and distinctiveness of the EMU web. ("Private" pages, such as course pages and personal pages, need not adhere to the graphical standard.)

Header and Footer

The "uniform" is put on by including a header and footer on each page. Inclusion is done with SSIs. The basic page template looks like this:

<!--#include virtual="/ssi/head.html"-->
  <title>YOUR TITLE HERE</title>
<!--#include virtual="/ssi/body.html"-->
  <h1>YOUR TITLE HERE</h1>
  <p>This is the first paragraph</p>
  <p>This is the second paragraph</p>
<!--#include virtual="/ssi/footer.html"-->

Note that the above example uses a generic header and footer. The header (and less often, footer) is customized for each department, so in the academics section, the path to the header would be /ssi/academics_header.html. Also note that the header includes </head> and <body> tags and the footer contains </body> and </html> tags, so you don't need to put these in your page.

Email address protection

Don't ever put an email address on a web page unprotected. Spam bots troll the web collecting email addresses and adding them to their spam lists. An Encoded e-mail address isn't visible to spam bots, but is visible to a human with the decoding capabilities of the web browser. In order to add an encoded e-mail to your webpage, simply follow these steps:

In Dreamweaver, place your cursor where you want to insert the e-mail link. Then, switch to "Code" view. There, you will need to copy and paste this code where you want the e-mail to appear:

<!--#include virtual="/tools/emailnospam.php?address=email@emu.edu&linktext=email"-->

Replace email@emu.edu with your email address and the email segment following the second equals sign with the text you want your link to have, or simply copy the e-mail address you entered earlier.

It should also be noted, once you enter this code into the code view, the e-mail will be invisible in the Design view of Dreamweaver. To double check the e-mail address, you'll need to go to the webpage in question and find the e-mail link.

File naming conventions

When naming your HTML and image files, remember that they'll appear in the URL a visitor sees. Try to make them brief but descriptive of the actual content on the page. A user should be able to look at just the URL and tell what the page is about. For consistency, use only lowercase letters. To separate multiple words, use hypens for both SEO and because it's easier for users to read and type. HTML documents should use the lowercase extension .html, not .htm. If you're using Dreamweaver, it's a good idea to change the default extension in your preferences.

There are two ways you can reference a document in a link: absolutely or relatively An absolute link defines the location of the document absolutely including the protocol to use to get the document, the server to get it from, the directory it is located in, and the name of the document itself. http://www.emu.edu/marketing/policies/web/professionalism.html is this page's absolute path. A relative link on the other hand takes advantage of the fact that the server knows where the current document is. Thus, if we want to link to another document on the same server or in the same directory, we don't need to write out the full URL. We can just use /marketing/policies/web/professionalism.html

Consider this branch of the EMU web site: [image showing just a bit of the president tree]

Relative from cabinet.html...

Link Server Directory File
http://www.emu.edu/president/mission.html www.emu.edu president mission.html
/president/mission.html      
mission.html      

 

[more on this coming soon]

External links

EMU's web site provides links to other sites when the web content manager or curator discerns that the information on that link is a useful supplement to EMU's site. When linking to a new site, curators should program the link so that it opens a new window, thus keeping users on the EMU web site as well.

In Dreamweaver, choose the link. Then use the Modify menu, choose Link Target, then Set. In the window type a word like linkexternal. If you are looking at the source code it should read something like:

<a href="http://www.externalsite.com" target="linkexternal">Check this out</a>

Solicitations for links to outside sites will be screened by the content manager in consultation with web work team or the curator of the department being solicited.

Our statistics program should be able to track visit to your external links. If the link is on your department home page, there is no way for us to know that they clicked on the link. Ask the web administrator to create a page that will send them to the correct web site but also helps us track visits. This is called a redirection page. The only exception to this is when the entire page is dedicated to a report on another web site and a link is provided to that site.

If you have any influence over the content on the external site, request that they have a link to our home page.

Load time of page

To keep page loading times to a minimum, the total graphics and text for each web page should be no more than 50 kilobytes (KB). A web page that takes too long to load is a web page that is not visited! Web users are notorious for their lack of patience, and too much waiting will simply send them elsewhere.

On-campus connection speeds are not reliable indicators of off-campus performance. Simply because an EMU web page loads quickly from across campus is no guarantee that it will load quickly from across the globe. The best way to verify that your pages will load quickly is to add up the sizes of the page itself and all of the image files that appear on that page. If the total size is more than 50 kilobytes, then the page and/or the images need to be trimmed. Refer to the Image formats guideline for ideas on how to do this.

NetMechanic offers their online HTML Toolbox with a free sample. This tool will check your page for multiple items including slow loading parts of your page. If you need assistance understanding this report, contact the web administrator in Information Systems.

 

Pixel width of page

When creating content, do not place anything in the page that has a total width of over 610 pixels. EMU's web site is designed to fit within a browser window on a screen set at 800 x 600. If page content is over 610 pixels, the overall page width (after adding the left column width, padding, scrollbar, etc) will be over 800 pixels, forcing some users to need to scroll horizontally to read all the text.

Back to top