University of Rochester Web Site Design Guide

Note: This document is still being written and has been made available for reference to site content editors

With the implementation of the new site design for the department of Medicine their are some topics you should be familiar with to ensure that when you are editing your site, you adhere to departmental design policies.

• What is new with the site redesign that affects you
  • Navigation area
  • Title Area
  • Faculty Information
  • Events Calendar
  • Element Access Removed
• Where you can find resources for learning how to use Contribute
  • Contribute - How Do I
  • Classes
  • I am not a web designer
• How do you improve your web site
  • Sites need Images!
  • How to make a image with the Template border
  • Content Required
  • Do not add date/time the page was edited

Navigation Area

Although not easily noticeable, the navigation bar to the left can now be edited within Contribute, but because of limitations of Contribute to handle include files you must manually enter the location of the navigation bar file to edit the contents. For example if I wanted to edit the navigation bar for this sub site of medicine I would enter "http://www.urmc.rochester.edu/urmc/mcs/navigation.htm" into the url bar located at the top of the Contribute application shown in the image below:

The location of your navigation file is always "DivisionName/navigation.htm" so chances are if you append navigation.htm to the end of your start up page within contribute then you will be able to edit it.

Title Area

The new TitleArea of the site is significantly smaller then the title area of the old template which helps allow us to restrict what appears in the location bar, but this means you must use no more then 23 characters in your title. If you do use more then 23 characters they will be removed when someone views the page so that the template is not affected by the text.

DO NOT APPLY STYLES TO THIS TEXT - Applying styles to the title text will cause scripting errors since the template uses this area as its reference for where a visitor is within the sites structure. Scripting errors will cause a prompt on a default installation of the visitors browser and the system will not be able to properly display the navigation structure along with the title of the page.

The text you type into this area will automatically populate the title value of the web site by appending it to the end of the text string "Department of Medicine - ", it will update the status bar, and it will update the location bar, like in the examples below:

The Title Bar

The Location Bar

The Page Status

Faculty Information

The faculty information will now be generated using the new Electronic CV application that will be available in the last quarter of 2005. Simply update the information available in a faculty members Electronic CV and it will automatically update the Departments web sites. Many of the sites at this time have individual pages dedicated to a particular faculty member and these should be converted into links into the main faculty page for the department once the information is added to the Electronic CV application.

Events Calendar

The new Medicine events calendar gets its data from the information that administrators provide to the URMC Scientific Events Calendar. If you actively participate in the planning of Medicine Scientific events we encourage you to sign up for an account and begin managing your events. The Department of Medicine Events link only shows information for events occurring that have been set as Department = Medicine within the Events Calendar application.

Element Access Removed

Access to two font design elements have been removed because they were being overly used improperly on the old design. They are the following:

• Heading Fonts: H1, H2, H3, etc.
  
  The reason for removing the ability to apply heading fonts is that in a lot of the page text we found that people would apply these in areas that would cause the design of the site to not be properly standardized.
  
  This is an example
  of what we would see
  on some pages
  
  Which as you can tell is not very aesthetically pleasing to read. Styles are in place and available within contribute for applying a variety of formatting options. You can access the styles menu by highlighting the text you would like to see changed and using the drop down menu within Contribute shown in the image.
  
  
• Non Breaking Spaces:
  
  Non breaking spaces were being overly used to format the text within the content area of a page. Whenever possible a table* should be used to display tabular data because their is no guarantee that non breaking spaces will format the same way on each browser and each font size that can be set within a browser. Also when a template change occurs that reformats the width of the content area the text gets extremely obfuscated.
  
  This is an example using non breaking spaces:
  
  Test 1                   5
  Test 2                   27
  
  And this is how it should be done:
  
  

  Test 1	5
  Test 2	7

  
  * Tables should be formatted with cell spacing = 1, cell padding = 3, and border = 0 for such data.

Contribute Itself

Probably the most efficient way to learn the various ways that you can use Contribute is to use the Contribute Help and "How Do I"* sections.

As you can see from the image to the right you can access in depth tutorials about the most common functionality for Contribute use, from adding a new page, to setting up your connection, to editing an existing page and adding file links to your documents.

You should become familiar with this panel and use it often if you have a question about maintaining your web site using Contribute.

Contribute Quick Start Guide

*If you do not see the "How Do I" panel you may have it minimized, look for a small arrow on the left of your screen and open the panel by clicking it.

Miner Library Contribute Class

If you would like in depth training about Contribute and how to use the package you can sign up for one of Miner libraries classes, which will give you hands on training using the product to edit your web site. you can access the class schedule from the miner library site by clicking here.

I am not a web designer by trade

We know!

Some people are frightened by the idea that they will be editing web content. Don't be. Their is no need to concern yourself with terminology like xml, .net, javascript, or accessibility, these items are handled on a higher level and accessibility and design rules are enforced within Contribute and the sites template.

Use the tools necessary to create a informative, easy to browse web site that users will enjoy reading and looking at. Don't worry too much about being a web page designer and what that entails, Contribute is a tool for updating and providing content to a site that has already been structured for you.

Images Images Images

There is a huge lack of images on the departments web site that everyone should address as soon as possible. Here is an example of a well laid out page with a good ratio of images to test: Medicine - Education

Where do you find images?

Shared Assets

There are a few resources you can use for finding images, the first being within Contribute itself and it refers to images that have already been used on the site. If you click the Image button and select "shared Assets" as shown in the image below:

This will open up a panel with multiple images that have been shared within the site for you to use. Shown below:

The shared assets will be labeled with the following which describes what the images purpose is for:

Button	A Button asset should be used for an element that will be associated with a link or action of some sort.
Design element	A Design asset should be used for elements that are to somehow incorporate with the design of the page. For example there is the asset names "Design Element - Horizontal Rule" which should be used to separate sections within a page.
Icon	An Icon asset should be used as a reference to what an object is representing visually. For example you may use the Pdf Icon when you are linking to a pdf document.
Logo	A Logo asset is a graphic that is specific to a particular division, center, product, etc.
Map	A Map asset is a map of an area.
Stock Photo	A Stock Photo asset is a photo that can be used on your site and represents many different things. The stock photo assets available will increase dramatically over the next few months so please check back often if you are looking for an image to use on your site.
Title	A Title asset should be used as a title for a section of a page.

Google Images

Google Image Search - if you are looking for a particular image to represent something on your site, try the google image search.

Note: Be careful of copyright infringement when using images found on other peoples web sites, make sure that they allow you to modify or use the images first.

Images.MD

Medical Images - A Medical Images library provided by The University of Rochester Medical Center is a great source for medical images and illustrations.

How to make an image with the borders seen on this site

This is for more advanced users who have experience using Macromedia Fireworks.

First you must download the png source files here:

Right Click and Save File	Right Click and Save File
Image must be at least 228 x 150	Image must be at least 200 x 150

Open the image in Fireworks and open the image you want to mask in another window. Ensure that the photo restrains to the conditions listed for the mask you are using above. If it does not resize it.

Drag the photo onto the mask image placing the mask layer above the photo layer and position the image appropriately so the area you want to retain is covered by the blue mask area.

Note: The blue mask will not be opaque, that is only for the illustration.

Select the blue mask layer only, Cut it using ctrl+x, then select the layer that the photo is on and click the Mask button shown below:

Paste (ctrl+v) the copied mask layer into the newly created mask and you are ready to export the image.

Export settings should resemble the following for a quality web graphic.

Content Required

All the images in the world still wont make your site worth viewing if the textual content is not there to support the images. Structure your site properly so that pages aren't just filled with links to other pages, make sure you describe why that page exists in the first place. In some cases you may believe it is necessary to have a page of links, in that case format them properly, add titles and try and think of descriptions for the links so people know where they are going to browse to next.

Give meaning to the images you use on the page, if you add an image of a building, explain why that image is there or place a title nearby that explains what the image is for.

Do not add date/time the page was edited

I have noticed a lot of people adding the date and time a page was edited to the bottom of a page. I have removed this where I saw it and it should not be done for a couple of reasons:

• If you mark the page as today
  
  8/26/2005 edited by Jeremy Telier
  
  and come back to this page in a year, it is very possible that the content is still fresh but it appears out of date and people may ignore it.
  
• You may want to do it so that you or your administrator knows that you have been editing the page. That is fine but it is also unnecessary, we retain logs of all edits that are done with a page within the Contribute Publishing System. If you need to see dates/times of changes to pages you can request a copy of your changes from Medicine Computing.