Facebook Twitter YouTube Flickr Google Plus
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.
WEB BANNERS
WEB BUTTONS
WEBSITE/TOOL
DEVELOPMENT
MAINTAINING
YOUR SITE

   
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 the Media Gallery module of 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 site or highlight major events. 

Static banners are often used on internal pages of a department website 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 to fit your budget and how often you plan to make changes to your site. 

Costs
Text only: $21
Photo only: $21
Text with photo: $52.50
Custom: $84

When ordering multiple banners at the same time that use the same background or artwork with different text are only $10.50 each after the full cost of the first banner. We recommend departments plan their Web banners a year in advance for key messages. If you would like to request a banner of the university home page, contact your account manager well in advance. Subsite banners produced from home page banners (only need resizing) cost $10.50.

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. 

Design formats: 

Text only - 



Text with photo - 





Custom design - 




Edit tab Direct link
When used strategically, Web graphics can improve traffic flow on your website and enhance the user experience. Below are standard button sizes that work well on the OU template and complement the OU brand. When looking at the costs, keep in mind that this price is for the first button to be designed. Additional buttons ordered at the same time that follow use the same background or artwork with different text are only $10.50 each after the full cost of the first button. 

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 Ato nowhere
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 home page. This size does not work well in the additional content area. 

Dimensions: 
144px by 175 px

Cost: 
Text only: $31.50
With photo: $42
Custom: $63

Example: 

Step 1: Get info about OU, admissions events, academic programs and important datesStep 2: Apply online now for free and save your login and PINStep 3: Step in on the status of your application.

Design formats: 


Button Size Bto nowhere
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. 

Dimensions: 
220px by 50 px

Cost: 
Text only: $21
Custom: $63

Design formats: 


Button Size Cto nowhere
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. 

Dimensions: 
220px by 25 px

Cost: 
Text only: $21

Design formats: 


Button Size Dto nowhere
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. 

Dimensions: 
220px by 80 px

Cost: 
Text only: $21
With photo: $42
Custom: $63

Design formats: 



Button Size Eto nowhere
Button size E fits four across when the additional content area is used. They also fit two across in the additional content area. This small button size works well to feature links on pages that don't have a lot of content. 

Dimensions: 
106px by 60 px

Cost: 
Text only: $21
Custom: $63

Example: 

registration tutorial Registration DOs
common registration errorsfinancial tools tutorial

Design formats: 


Button Size Fto nowhere
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 site. It can also be used in the additional content area, but be careful not to overwhelm the page with large button sizes.  

Dimensions: 
220px by 125 px

Cost: 
Text only: $21
WIth photo: $42  
Custom: $63

Design formats: 


Button Size Gto nowhere
Button size G fits one across when the additional content area is used. This size works well as a "glorified" header or label, especially in the main content area above tabs. 

Dimensions:
448px by 50 px

Cost:
Text only: $21
With photo: $42
Custom: $63

Design formats:


Button Size Hto nowhere
Button size H fits two across when the additional content area is used. It works well on its own or in a grid with smaller button sizes. It also fits in the additional content area and serves as a "mini ad."

Dimensions:
220px by 220 px

Cost:
Text only:
With photo:
Custom:

Design formats:


Sample Layoutsto nowhere
Here is a custom arrangement using size F on the bottom to feature the bigger res halls and a slightly smaller version of size A to feature the smaller res halls. Rollovers were added for interactivity. Each button would link to more info about the res hall. 

Fitzgerald Househill housevan wagoner house
hamlin hallvandenberg



Here is a grid using size D buttons with rollovers to direct users to frequently visited pages and size A buttons for action items we want the user to do. 

Order business cards Order letterhead
Order merchandise Be on the marquee
Register for classescheck progress to degreewhat will transfer?




  • Fall semester entry — by July 1
  • Winter semester entry — by October 1
  • Summer semester entry — by April 1
Here we see size G calling attention to very important information. And below, four size E buttons sit on top of two size B buttons
registration tutorialRegistration DOscommon registration errorsfinancial tools tutorial
attend an info sessionrequest program info



Edit tab Direct link
Oakland University websites are generally maintained using the university supported CareWorks Content Management System (CMS) by individuals within that department. CMS training is required for each person who will have access to edit a department's website. Each department site needs designate one person to be responsible for the content on the site. 

New Website Development & Website Redesigns
All new websites 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 websites will use the "new template." 

Features include: 
  • "Top links" section below the website 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. 
Check out our sandbox site to read more about the functionality and standardizations we put in place. 

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 CareWorks 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 website. This functionality is typically not found in the standard CareWorks 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 conference websites, podcasting or faculty/staff organization sites. 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



Edit tab Direct link
When we create a new website or redesign your 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 sites 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. 

Every website needs a keeper. 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. For advanced assistance, check out our Sandbox website for additional support.   

Adding and Owning Content
Do not recreate information that exists on another site, especially if another department “owns” that information. For example, recruitment sites use “duplicate content” feature to pull in the English Proficiency Policy from the ESL Center site.

Decide within your division or unit what information you need to provide your audience. Then decide which department “owns” this content. That is the website it should live on.
  • Info owned by another department: Work with them so the content works for your audience and either pull it into your site or 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.
When using the “duplicate content” feature in the CMS and hyperlinks, information only truly exists in one form and can be easily maintained by the department that owns the facts. 

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

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. This includes formatting for tables as well as graphics such as banners and buttons. 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 website is a great way to showcase your department's services and further the OU brand. Make sure all your design elements go through UCM. 

Content Copyright
Developers must obtain approval in writing from the copyright owner before they publish anything to an official 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!

Visit your website regularly 
Make it a point to visit your website 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 website's administrator to facilitate those updates. 



Edit tab Direct link

AcademicsUndergraduate AdmissionsGraduate AdmissionsOnline ProgramsSchool of MedicineProfessional & Continuing EducationHousingFinancial Aid & ScholarshipsTuitionAbout OUCurrent Student ResourcesAcademic DepartmentsAcademic AdvisingEmergenciesFinancial ServicesGeneral EducationGraduate StudiesGraduation & CommencementKresge LibraryOU BookstoreRegistrationAthleticsGive to OUGrizzlinkAlumni EngagementCommunity ResourcesDepartment of Music, Theatre & DanceMeadow Brook HallMeadow Brook TheaterOU Art GalleryPawley InstituteGolf and Learning CenterRecreation CenterUniversity Human ResourcesAdministrationCenter for Excellence in Teaching & LearningInstitutional Research & AssessmentInformation TechnologyReport a Behavioral ConcernTrainingAcademic Human Resources
Oakland University | 2200 N. Squirrel Road, Rochester, Michigan 48309-4401 | (248) 370-2100 | Contact OU | OU-Macomb