Mobile Navigation Menu Icon. 3 horizontal gold bars.

Communications and Marketing

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

Communications and Marketing

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

A photo of the Oakland University Graduate School webpage.

Web Development & Graphics

The UCM web team is here 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. They are responsible for website development, interactive tool creation and data analysis. Learn about the services the web team provides and how to successfully manage your web section on the tabs below.

Maintaining your Site

When we create a new web section on the OU website or redesign an existing one, we ensure we're following best practices to achieve the best user experience. We’ll dive deep into your analytics to structure your pages in a way that will both increase the usability and flow of your section, as well as boost your SEO value. As with all new updates, we’ll also be returning to you a fully ADA compliant web section. While we also design sections to be efficient and need as little maintenance as possible, even then, updates will always eventually be needed. When that time comes, if you’d like assistance then please contact your account manager.

Who Makes Updates?

Content on every web section should be coordinated by only one or two people within your department to maintain a clear message and focus. In order to achieve some of the updates you’ll want to make, for example, updating an image, you’ll need to contact your account manager for further assistance.

UCM provides required 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 just add a link to their webpage.

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 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.
  • Info owned by another department: Let the other department know you’d like to use their information too. Work with them so the content fits for your audience as well and then link to their webpage.

By no means should you be creating multiple versions of the same information. It clogs search results, confuses your audience, sets you up to eventually have outdated or conflicting information, and it hurts your SEO value.

Adding New Pages, News Stories, and Events

If you have new content you’d like added to a new page, the web section administrator in 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 in 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. Similarly, underlining your text can cause some of your users to mistake it for a link. For these reasons and more, you should not customize your text styles, in order for us to maintain our ADA compliance and brand guidelines.

Standardized design formats are also available for elements within the content areas that are not simple text, such as tabs and collapsible boxes. 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. To further learn about your options, please contact your account manager before proceeding or submitting a request form.

Some of the design formats, such as collapsible boxes, can be tricky to update. If you have new content to add to a collapsible box, please contact your account manager and we’ll be happy to do it for you!

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. To add any of these items, please contact your account manager.

Content Copyright

You must obtain approval in writing from the copyright owner before you can publish anything to the Oakland University website. This includes corporate logos.

Disability Compliance

All content must be made disability accessible (ADA compliant). Media that is not disability compliant (ex: an audio segment) should have a disability-compliant alternative (ex: a text transcript). Graphics can’t include important text, and all images must have alt text. In all possible instances, instead of uploading and linking to a document, you should create a new webpage with the information from the document on it. If for some reason you can’t create a webpage with the document’s content, then you must make your document ADA compliant before you can put it on the website. For additional details or questions, please contact your account manager.

Avoid Broken Links

If you will be linking to any other site or webpage 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! In the Percussion required training you can learn how to create a link to another OU webpage in the correct way that’ll prevent it from becoming broken if something changes. In the event you do have a broken link on your page then when you’re editing the page in Percussion you’ll see a yellow exclamation mark icon next to the link. TIP: You can easily check the links on your live webpage by downloading a link checker plugin for your Web browser.

To maintain ADA compliance for your links, you can not use the same clickable link text to send a user to more than one location.

Visit your section regularly

Make it a point to regularly review your section content and all links you are responsible for. Create a schedule of information that needs to be updated and assign your section's administrator to facilitate those updates. Utilize your calendar reminders to help you remember when it’s time to change content or review your section.

Website/Tool Development

The Oakland University website is generally maintained using the university supported Percussion content management system (CMS). Required training is available for each person who will have access to edit a department's web section. Each department needs to designate two people to be responsible for the content. It’s important to have two people so someone will always be available, and it’s important to have no more than two in order to ensure a unified voice and message of your content.

New Website Development & Section Redesigns

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

All new and redesigned sections will be put onto the newly designed and improved template. Features of the new template include:

  • ADA Compliance
  • Mobile optimized and responsive
  • Clean and modern design with multiple updates to enhance and ease the user experience
  • Modifications to boost your SEO value
  • A unique homepage design with a focus on featuring your department, news and main calls-to-action
  • Buttons which don’t require you to open a new graphics job first
  • The option for a header image on every page
  • 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 Office for Student Involvement 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. 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 and faculty/staff organization sections. For help with these situations, you should contact your account manager 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 because it would put the official university servers at risk. However, approved developers must follow these web guidelines.

Web Governance

View the current Oakland University Website Layout Governance document. This document explains how to strategically layout content on the Oakland University website.

Web Guidelines

The following guidelines are primarily for developers who are approved to develop Oakland University sites and applications outside of the supported content management systems. However, Percussion CMS users may use this as a reference.

Approval Standards
  • Any of OU’s public websites need to be reviewed and approved by UCM before they can be made live and linked to the main OU website.
  • Content should comply with OU style and editorial guidelines.
  • UCM reserves the right to review a site at any time and change or remove content if it is deemed to be incongruent with official university positions/message or OU’s website style and standards.
Technical Standards
  • Sites must render in current versions of all industry standard browsers, including Internet Explorer, Firefox, Google Chrome and Safari. Effort should be made to ensure that sites render the same in all browsers.
  • Sites must be responsive and adjust to all possible screen sizes. This includes Mobile, Tablet, Laptop and Desktop screens, horizontal and vertical screen orientation should be considered for each device.
  • Sites should not use browser specific code in the delivery of critical content, but rather should comply with HTML5 and CSS3 standards.
  • Sites must meet WCAG 2.1 Level AA accessibility compliance standards. These guidelines will make website content more accessible to users with disabilities, and often improve the user experience for everyone altogether.
Design Standards and Conventions
  • All site pages should clearly indicate that they are part of the Oakland University website by way of high visibility graphic elements (header, top navigation, etc).
  • Each page must have a descriptive title (<TITLE>) tag and should include the words “Oakland University”. This is important because it appears in bookmarks and search results.
  • Frames (<FRAMESET> or <FRAME>) are not allowed on any Oakland University website.
  • Inline frames (<IFRAME>) are allowed but should always be implemented to be transparent to the visitor of the website.
  • Content should be optimized for delivery over the Web as much as possible. This is especially important for images, video, audio and any file that embeds these elements (like PowerPoint).
  • Every site should identify at least one point of contact in the event site visitors have any questions.
  • No visible reference is to be made to development houses or contracted developers outside of Oakland University.
Fonts and Colors
  • The Official Oakland University fonts are ITC Garamond and Helvetica, which are acceptable for use on websites outside of the Percussion CMS. Arial may also be used for main body copy/text.
  • Fonts should use relative sizing so that the user can resize the fonts if desired.
  • Text links in all websites should be black (#000000) and underlined.
  • Text links on hover or focus should be gold (#877148) and underlined.
  • Text content must be easily readable, including to those with visual disabilities. Text must have a reasonable contrast with the background over which it is laid. Color ratios may be checked using the WebAIM color contrast tool, and must meet WCAG AA compliance for normal and large text.
  • Background graphics for an entire website are not allowed.
  • Official OU web colors are as follows:
    • Black - #000000 (R: 0, G: 0, B: 0)
    • Gold - #877148 (R: 135, G: 113, B: 72)
Use of the OU Logo
  • Use of the OU logo is subject to review and approval of UCM.
  • The OU logo should be used as a whole image and follow the guidelines for usage found on the UCM licensing and brand guidelines page.
  • The proportions must not be adjusted. Elements cannot be used as graphic or design pieces. It may not be screened back as a design element.
  • Type may not be placed over the logo or any portion of it.
Navigation
  • All public sites should include a header along the top of the screen with a consistent navigation and the Oakland University logo linked directly to the oakland.edu homepage.
  • Site specific navigation should be primarily on the left side, and should persist in a consistent way through each page of the site. Contact information (name, address, phone, etc.) should appear at the bottom of the left-hand navigation.
  • Use of pullout/dropdown menus is allowed, but we do not recommend menus that go more than 2 levels deep.
  • Navigation should be WCAG 2.1 AA compliant. See Understanding Success Criterion 3.2.3: Consistent Navigation for more details.
Copyright and Privacy
A standard footer must appear at the bottom of every page and should include the following information:
Website Graphics

All design elements on a web page (banners, buttons, graphics) must be designed by UCM, as noted in Policy 488.

Banners are graphically designed images placed at the top of web pages that help carry the OU brand throughout the website. Buttons are images that indicate calls to action on a web page. They use hyperlinks to direct users to other web pages or assets. The use of additional graphics on web pages should be limited to instances where they are necessary to enhance the content of the page (for example: faculty or staff headshots).

To begin the process of opening a graphic design job, clients should contact their account manager. The account manager will help to identify appropriate messaging and photos for the graphics. To upload any graphics on a web section, clients should also contact their account manager.