Communications and Marketing
Anibal House
630 Pioneer Drive
Rochester, MI 48309-4482
(map)
(248) 370-3184
fax: (248) 370-3182

Web Development & Graphics

Ready to get digital? The UCM web team sure is. This group is responsible for website development, interactive web tool creation and data analysis. They’re ready to show you that a strong web presence is the most effective way to reach your audience – and they have the data to prove it.

Maintaining
your Site

When we create a new section on the OU website or redesign an existing one, we go through all the nitty gritty with a fine tooth comb to ensure we're following best practices and achieve the best user experience. We also design sections to be efficient and need as little maintenance as possible. Even then, updates will always be needed, especially if you will be featuring a lot of different content throughout the year. Please contact your UCM account manager for assistance.

Who Makes Updates?

Every web section needs a keeper. Content on each subsection should be coordinated by one or two people within that department to maintain a clear message and focus.

UCM offers training and support for all of the university's content management system users. Below are the basic considerations to keep in mind for day-to-day content maintenance.

Adding and Owning Content

Do not recreate information that exists on another site, especially if another department “owns” that information.  Let them be the expert and link between sections.

Decide within your division or unit what information you need to provide your audience. Then decide which department “owns” this content. That is the section it should live on.
  • Info owned by another department: Work with them so the content works for your audience and link to theirs.
  • Info owned by your department: Be willing to work with other departments that need your information to help their audience. Know who’s using your info and keep it up-to-date.

By no means should you be creating multiple versions of the same information. It clogs search results and confuses the audience.

Adding New Pages, News Stories, and Events

To streamline the process of adding new content to the OU website (not just updating existing), the web section administrator for your department should complete the new page request form.  

Fill out the calendar listing request form to add your campus events to the OU calendar.  Fill out the news request form to add news updates to your web sections.

Formatting

Simply put, don’t add any extra formatting. Remember that the template and the graphics are the design. Very little additional formatting is necessary. Custom Style Sheets (CSS) take care of headings and the default font is your body copy. Even bolding seems harmless, but screen readers – a piece of software used by visually impaired computer users – will read bolded content first. So it's important that bold is reserved for very important content.

Standardized design formats are also available for elements within the content areas that are not simple text. Keeping with these formats allows us to have a unified look across OU's website while keeping design costs low. Custom designs are also available for special programs or events and should be included in the communication plan and designed at the same time as coordinating materials.

Design

Adding buttons, banners and other graphics to your section is a great way to showcase your department's services and further the OU brand.  Per Policy 488, all design elements need to go through UCM. See samples and pricing in the Web Banner and Web Buttons tabs. 

Content Copyright
Developers must obtain approval in writing from the copyright owner before they publish anything to the Oakland University website. This includes corporate logos. 

Disability Compliance
All content should be made as disability compliant as possible. Media that is not disability compliant (ex: an audio segment) should have a disability-compliant alternative (ex: a text transcript). All graphics that contain important information must use alt text. Contact your account manager for details.

Avoid Broken Links
If you will be linking to any other site or page outside of your control, create a reciprocal relationship with those site's administrators and let them know you're linking. Make sure the pages you are linking to are not just linking back to your website for information. Own it! TIP: Download a link checker plugin for your Web browser. 

Visit your section regularly
Make it a point to visit your section content and all links you are responsible for. Create a schedule of information that needs to be updated (and things to feature, if resources allow) and assign your section's administrator to facilitate those updates.

Webste/Tool
Development

The Oakland University website is generally maintained using the university supported Percussion Content Management System (CMS). CMS training is required for each person who will have access to edit a department's section. Each department section needs to designate one person to be responsible for the content.

New Website Development & Section Redesigns

All new web sections are done collaboratively between the department and UCM. Your account manager will help you identify content needs, including graphics and interactive Web tools, and work with the UCM Web team and designers to create a site that meets your department's goals.

All new and redesigned sections will use the "new template." 
Features include:
  • "Top links" section below the web section name reserved for action items aimed at repeat visitors.
  • Standardized, but flexible, left-navigation items based on department/site type.
  • Categories on the left navigation.
  • Second level pages are displayed using a drop open functionality instead of a fly out.
  • Third level pages can be displayed as tabs within the second level page. When using tabs, the main content and additional content areas can be used to display static info while the user clicks through the tabs.
  • Top banners for internal pages.
  • Media gallery for banners is Javascript (refreshes instantly when changes are made, Apple friendly).
  • Department name, address, general contact info and social media links on the bottom portion of the left navigation. 
Student Organization Websites

GrizzOrgs hosts websites for student organizations. Contact the Center for Student Activities for more information. Some direct-funded student organizations like Student Congress and Student Program Board may have websites within the Percussion CMS. None of these sites advertise official university services. Student organizations can pursue outside hosting options.

Web Tool Development
A web tool or a web application is a special/unique functionality that is added to your web section. This functionality is typically not found in the standard content management system. Web tools are custom developed to meet your requirements using JavaScript, and if required, the C# programming language. Below are samples of custom web tools developed by UCM.
Special Projects
Special projects include any type of Web development not covered by any of the above scenarios. Some examples are conferences, podcasting or faculty/staff organization sections. For help with these situations, you should consult directly with UCM or E-Learning and Instructional Support (E-LIS). They will work with you to either fold your project into an existing solution or build a custom solution. Departments should not develop their own websites outside of the CMS since it would put the official university servers at risk. However, approved developers must follow these guidelines.
Web
Governance

View the current Oakland University Website Layout Governance document which is updated annually based on carefully studied market trends and best practices.  This document explains how to strategically layout content on the Oakland University website.

Last updated February, 2016.

Subsite
Banners
Web banners display at the top of a page above the body content. Banners are graphically designed images that help carry the OU brand throughout the website. They are uploaded through widgets in the CMS and can be rotating or static messages.

Rotating banners are often used on departmental home pages to give visitors an idea of what your mission and services are by using short positioning messages and an image (stock art or OU images). They can also be used to draw users into internal pages on your section or highlight major events.

Static banners are often used on internal pages of a department web section to add a visual element. They are often "glorified page titles" with the name of the page and an image.

Your account manager will help you identify appropriate messaging and how often you plan to make changes to your section.

A Web banner following one of the standard design formats will generally take about four business days if there are not multiple rounds of edits. Custom banners or large quantities will generally take 5-10 business days.
Web Buttons
When used strategically, Web graphics can improve traffic flow on your section and enhance the user experience. Below are standard button sizes that work well on the OU template and complement the OU brand.

A text only or text with photo background button will generally take about four business days if there are not multiple rounds of edits. Custom buttons or large quantities will generally take 5-10 business days. 

Button Size 144 x 160
Button size A fits three across when the additional content area is used. This button size works well for demonstrating steps a user should take when visiting your section's index (or home) page. This size does not work well in the additional content area. 

Example: 

        

Button Size 220 x 50
Button size B fits two across when the additional content area is used. It also fits in the additional content area. This button size works well for in a grid or series to highlight links to your desired next steps for the user. 

Example:

 

Button Size 220 x 25
Button size C fits two across when the additional content area is used. They also fit in the additional content area. These button sizes work well in a grid or series to highlight links to your desired next steps for the user. 
 
Example: 
 

Button Size 220 x 80
Button size D fits two across when the additional content area is used. They also fit in the additional content area. These button sizes work well in a grid or series to highlight links to your desired next steps for the user. 

Example: 



Button Size 220 x 125
Button size F fits two across  when the additional content area is used. They also fit two across in the additional content area. This button size works well on department home pages to draw the user into important pages on your section. It can also be used in the additional content area, but be careful not to overwhelm the page with large button sizes.  
 
Design formats: