ENVR 401 Webpage Guidelines

Website Guidelines for Student Projects

ENVR 401 Environmental Research

These are some guidelines for your final report webpage. Student Reports are to be made available on this McGill website (www.mse-research.mcgill.ca). While we do not want to stifle your creativity, there are some guidelines that need to be followed to ensure a consistent and professional look. These are outlined below, and are separated into two lists. Please contact me, Pete Barry, if you have any questions. I am at 398-4306 or info.mse@mcgill.ca.

Content or Style Elements

Title Page (filename: index.html)

All reports need a title page that MUST include

Report Title
Team Member Names (I cant believe some people left this out in previous years!)
"Submitted in partial fulfillment of the requirements for ENVR 401 Environmental Research"
Date of Submission (eg. December 2002)
McGill logo and crest (available from McGill ICC). These must link to www.mcgill.ca
MSE Logo (must link to www.mcgill.ca/mse ) Available in three sizes: 75x75, 150x150, and 300x300 pixels
Client Name and Logo (if available) which should link to their website (get client permission for this)
Contact info for Client (get permission), and for MSE prof who supervised the project (get permission).
Link to MSE homepage www.mcgill.ca/mse
Link to full version of report in PDF or Word or both. This part is optional, but it is useful.
And finally, a link to the rest of the report! Sounds obvious, but...
See this sample page

Body of Report

Each page of your report should have the name of the project as the page title (for example the title of this webpage is "ENVR 401 Webpage Guidelines" which is set using the <title> tag.
Each page should have a link to the other pages, or at least the other sections, of your report. Readers should be able to jump to any section without having to move through the document sequentially (assuming you have more than one section). There should also be a link to the title page so readers can access the contact info easily.
Keep pages short. If you need to page down more than three times, there may be too much info on this page. Try to break it into two or more pages.
Please use a white background colour for all your pages (<body bgcolor="#FFFFFF">) unless you have a really good reason not to. Some pages in the past used yellow or white text on a dark background. Looks ok until you try to print it.
Please avoid flashy elements like spinning titles or logos, and animations that do not convey specific information. They are distracting and tacky.
Please check your SPELLING. (I admit, I am guilty of weakness in this area. At least get the client's name right.)

Technical Elements

File names

NO spaces! Windows allows them, webservers do NOT. Use underscore instead (no_spaces_allowed.html)
NO capital letters! Windows allows capitals in filenames, some webservers do NOT, or (worse) they consider them to be different from lowercase characters, so that filename.html and Filename.html are completely different files. This can result in a lot of broken links and missing images, even if everything worked fine on your desktop computer.You should also be aware that some software packages for web editing, word processing, and image processing, add file extensions in capital letters (like imagename.GIF). Rename these to all lowercase (imagename.gif). Make sure your links also avoid capitals.
NO "HOME.HTML" or "MAIN.HTML" for the main page. Use "index.html" for your title page and NOTHING ELSE. I will make sure your website sits in its own directory. Your other pages can have any names you want, as long as you follow the naming convention above.
Use .html, rather than .htm if you can. If you cannot, dont worry about it, just be consistent.

Structure

Please try not to use Microsoft Word or Frontpage to create your webpage. Find some free web editor or write the code yourself. Word and Frontpage add all kinds of XML and non-standard tags that cause problems. Netscape Composer is ok, but dont let it put all your images in the same directory as the html files. Contact me if you have trouble.
NO FRAMES! Ever! Period! They are evil and cause problems.
Put all your HTML files in ONE directory. This is where I will put them on the server. When you link to these files, do not use the directory name, as it will be different on the server. Just link to the filename.
Example: <A HREF="conclusions.html">Conclusions</A>
Put all your images and graphics in a directory called "graphics" AND NOTHING ELSE. Make sure all your image tags look like this: <img src="graphics/imagename.jpg">
Any links to pages or images, etc. outside your own site must be absolute links, not relative links.
Example: <A HREF="http://www.mcgill.ca>McGill University</A>
This applies even to links to other reports on the ENVR 401 site.

Images and Graphics

Use images! Dont just dump text on the web (although that's what I did for the MSE site, I will fix that someday). You should also provide a map of your study area, if applicable. Just something to let people know where it is. If you are talking about an invasive species, show us what it looks like!
Try to use images and graphics that match the size you want on your page. Do not resize an image or graphic by specifying WIDTH and HEIGHT values in the IMG tag that do not match the actual dimentions for the graphic, or by grabbing the "handles" and dragging in a webpage editor. Web browsers will resize the image, but they will do a lousy job and it will appear blurry and jagged. Use a graphics program to resize the image. Contact me if you have trouble.
Try to avoid really big file sizes for your graphics. Use gifs for line art and diagrams, or images with solid colours, and use jpegs for images with lots of tones, like photos. Avoid using "lowest quality" jpegs. You are better off reducing the image size or cropping it and saving with a higher quality.
Renee says we can't ignore copyrights (as if I would ever!). If you copy an image or other material from a website you have to get permission from the owner to use it on your site. Especially if the owner is your client! (You can use MSE and McGill stuff freely.) There are lots of sites that provide free images, search for them.

Boilerplate

Every page must contain a footnote-like "boilerplate" that tells readers who owns the site. Just copy this code into your page:

<hr noshade>
 © 2002 <a href="http://www.mcgill.ca/mse">McGill School of Environment</a> 
<a href="http://www.mcgill.ca">McGill University</a> 
3534 University, Montreal, Quebec, Canada H3A 2A7

See the sample page for what it looks like.