Web Style Guide
This style guide is meant to be used for the College of Design and program websites. Please note that program centers and departments should not attempt to duplicate the College of Design homepage, which is intended as a unique gateway into the entire College of Design website.
Adobe Contribute is the college's web content editor. Any area on a web page that you can edit in Contribute is called an editable region. There are four areas of the page that you can edit:
University header, which includes:
- U of M Driven to Discover wordmark
- MyU and OneStop buttons
- The search bar
University footer, which includes:
- Copyright statement
- EEO statement
- U of M contact information
The College of Design wordmark
We use Proxima Nova for our display fonts, which means that Proxima Nova is used for headings and for graphics. The body text used are the web safe fonts Verdana, Helvetica, and Arial.
Heading Styles and Tags
The heading styles we use are listed below. It is important to use and tag the correct heading style to ensure that screen readers can read our content and to maintain good search engine optimization (SEO) for the site.
Screen readers—When a screen reader is being used to scan a page, it jumps from heading to heading, reading the h1s first, then the h2s, then the h3s and so on. Think of your headings as a page outline and keep the pieces in an order that would make sense for a screen reader.
SEO (Search Engine Optimization)—Heading tags are one way of emphasizing an individual page's keywords to search engines. Heading tags are given much more importance by search engines than regular body text. They should be used to reinforce the page’s overall keyword theme.
Headings should never be used just to achieve a certain font size or color. If needed, the advancement team will add font styles to the style sheet for that purpose. Headings should also never be linked.
No extra space (multiple returns) should be added after the headings or anything else on a page. The only time extra space is needed is when a table has been included in the body of a page. In that instance, you will need to add an extra space after the table.
Above is an <h2> header. Main body <h2> headings use initial caps on every word unless the word is a conjunction. Heading 2 should only be used at the top of the page. Text written in the Heading 2 format is limited to 36 characters including spaces.
Above is an <h3> subheading. Subheadings should capitalize the first word, but lowercase all following words. Subheadings should only be used after <h2>s have already been used.
<h4> sub-subheading. It may be used to call out important text, but should only be used after <h3>s have been used.
<h5> This is to be used on rare occasions when it's necessary to draw attention to a section
Text is predefined in the templates and css files. We are using Proxima Nova delivered from the web server. No one needs to have the font installed on their computers in order to see the font style. Text should not be centered anywhere on the page, including the main content area or in the right or left columns. Do not color text.
Links are automatically set to be maroon and will style themselves. They underline when you hover your mouse over the link. Links can also be formatted by the individual in their browser preferences.
Links should always be descriptive and should not be the URL.
For example, you should not tell people to go to this page: http://www.design.umn.edu/about.
You should direct them to the About the College website instead.
Linking an email address is acceptable. For example, send email to the College of Design at email@example.com.
Use a horizontal rule (for example the line above this section) to seperate sections. Please do not overuse the horizontal rule.
jpeg or png
The banner image is 960px by 200px
Images in the main body content area should be no wider than 660px
Images in the right column: 180px
When naming an image do not use spaces, special characters, or dots.
Images are automatically uploaded to your page via Contribute.
Images should always have alt tags, they are required in Contribute when you upload an image. Alt tags provide a short description of the image. Do not give an alt tag ageneric name like "Image". Alt tags are used for screen readers and will show in place of an image if the viewer has images turned off.
Tables should be used only to display data or when images need to be aligned with text in a tabular style.
Links to a social media profile should be included in a discreet, one-line icon/text combination at the bottom of one's contact information.
College of Design Web Resources
For content contact Amelia Narigon firstname.lastname@example.org
For general web requests, technical support, and hosting requests contact Theresa Tichich email@example.com