Skip to content The Open University
  1. Home

OU online style

The Open University has a set of online design patterns, components and templates so we can provide our users with a consistent user experience. We call this OU ICE.

OU ICE is a front-end framework of HTML, CSS and Javascript to enable rapid development of accessible, brand compliant Open University websites. This documentation covers the current version: OU ICE v3.

OU ICE

  • enables rapid development of usable, accessible and brand compliant web sites
  • provides foundation visual and behavioral layers upon which distinctive and unique websites can be grown
  • makes a web designer's job easier.

OU ICE is

  • the “Look and feel” of Open University websites for full screen, mobile and print versions
  • the layout, fonts, colours and graphics of Open University websites
  • a“front-end”, “client-side” framework
  • a CSS framework for Open University websites
  • a set of HTML markup patterns
  • visual design components and patterns
  • a visual language for Open University web sites
  • web content management agnostic.

OU ICE is not

  • a Content Management System (CMS) -- That would be Drupal, Wordpress, MediaWiki, Assisted Publishing System, Adobe Contribute
  • a PHP development framework
  • an ASP development framework
  • a database system
  • a programming language
  • the Online Services team.

Why OU ICE?

Consider these questions:
  1. How do I create an OU website theme?
  2. How do I make sure my website is on-brand?
  3. How can I make sure my website meets the OU accessibility requirements?
  4. What should appear in the OU header and footer?
  5. What’s the official OU logo for use on OU websites?
  6. What’s the process for adding the OU header and footer to my site?
  7. How should I style a bread crumb trail on an OU website?
  8. What fonts should I use for headings on my website?
  9. How can I make my website look good on mobile phones?
  10. How can I make a print version of my web pages?

OU ICE answers all these questions and more.

Consistent user experience

Plenty of people build websites for the OU. Staff across various departments and external providers all contribute to the OU web site, but until now there has been no effective way to help everybody use the same user interface elements. There have been plenty of attempts at documenting standards and procedures yet still the OU website is difficult to navigate. There are so many different solutions to the same problem that our students have to re-learn different interfaces as they move from OU home to StudentHome to the Careers Advisory Service to the Library to the VLE.

In the past there were standards for fonts, colours and headers and footers. Now there are design patterns and components for all sorts of commonly used web elements like video players, search forms, FAQ lists, tips and info boxes. There are plenty of layouts and colour schemes to satisfy the needs of the most demanding client. OU ICE is about designing for a consistent user experience whilst encouraging innovation and diversity.

Collaborative problem solving

OU ICE is a regularly released collaborative effort, facilitated by Online Services. Everybody can submit problems and solutions to everyday web design issues. OU ICE will grow with the demands of the evolving web. OU ICE will help us be more productive, reduce duplication of effort and make it much easier to commission work form external suppliers.

Using OU ICE is easy. Simply download the core HTML template, configure it to your requirements and add the code snippets you need. OU ICE is fully documented and benefits from a regular release cycle. When new features are released they are immediately available to all OU ICE sites.

OU ICE is the default OU Drupal theme but it is not exclusive to Drupal. In fact, OU ICE is CMS agnostic. It works just as well on Wordpress, MediaWiki, Dreamweaver and many other types of website. The only requirement is a web server running either PHP or ASP.net.

OU ICE lets developers focus on making great site-specific features without having to worry about thinking about how it will look in print or on a mobile phone.

This website

  • demonstrates all of the visual design patterns and components within OU ICE
  • is the place to come when you need an HTML code snippet for a particular style
  • provides you with the raw code you need as the basis of your web site template

Who to contact

  • Guy Carberry (Lead user experience designer / visual design and behavior)
  • Antony McEvoy (IT Web designer / visual design and behavior)
  • Tammy Alexander (LTS representation / Moodle + Drupal integration)
  • Stuart Crouch (IT representation / Drupal integration)
  • Steve Bannister (IT representation / .net integration)
  • Steven Price (Student Services representation / Contribute and other CMS integration)
  • Sarah Allen (OU ICE managing group chair)

Feature requests and bug fixes

Previously available versions of OU ICE

Please note that version 3 of OU ICE introduced the "ou" prefix to all HTML element classes and IDs. To upgrade your site to OU ICE 3 you will need to update your site templates and any HTML code used on your pages.

OU ICE tutorial

If you're new to OU ICE you might find this quick step by step tutorial useful.

This page was last updated on Monday October 07, 2013