What is The Common Design Language?

The Common Design Language (CDL) is a consistent visual language for the BCU web experience, which can be used to build layouts and components by a variety of different developers, safe in the knowledge that the corporate brand is upheld, IT principles are adhered to and a consistent quality user experience is delivered to all audiences.

Why do we need the CDL?

As a large organisation we offer a large variety of online services, often designed and developed by a number of internal departments and external suppliers. As such, there can be a tendency for significant variance between these online services in regard to presentation, function, compliance and quality.

This variation can often lead to a disjointed user journey, resulting in confusion and frustration with the users of these services, damaging their user experience and reducing the value they receive.

The CDL links these online services into a ‘family’ of BCU products, with commonality of presentation and function. It offers a method of providing a more consistent user experience across these services, enhancing consistency, enforcing compliance and introducing high quality standards.

How does the CDL work with the Brand Guidelines and IT Principles?

The CDL does not replace the BCU Brand Guidelines. Rather, it extends certain aspects of the brand guidelines for the web, to allow designers and developers to work more in a more agile and proactive way.

Similarly, the CDL does not replace any of the IT Principles. Rather it extends, complements and provides context to a number of the core IT Principles.

How do I use the CDL?

The CDL should be used as a set of guidelines for how to design and develop your web application. As the CDL provides a complete set of CSS and JavaScript files, as well as several HTML templates, it can also be used as a resource to assist in your development.

Where can I get more information about the CDL?

If you have any questions or feedback please contact webteam@bcu.ac.uk.

Best Practices

Usability

Usability is a quality attribute that assesses how easy user interfaces are to use. It focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. Usability best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services. It is essential that users find value in what you are providing to them.

Usability and the user experience should be at the forefront of your mind when you are designing and developing your application. For that reason many of the CDL guiding principles are focused on usability.

Accessibility

As many of our public facing applications provide a service to the general public, we are required to abide by the Equality Act 2010. This means that no user should be excluded from accessing content on the basis of disability. We should always strive to ensure content is made accessible to everyone, including users of assistive technology such as screen readers.

Furthermore, as an educational institution, we are required to abide by the Special Educational Needs and Disability Act 2001. This means that any content or service provided by our applications should be made accessible to all students, including those with special educational needs. As a starting point, all applications should aim to meet Level AA of the Web Content Accessibility Guidelines (WCAG), should be tested in a range of assistive technologies and by users with special needs. For further guidelines please refer to the online style guide.

If you would like to read further on Accessibility you can find excellent resources at:

Responsiveness

Your application should adhere to the principles of Responsive Web Design. This approach suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.

As the user switches from their laptop to iPad, for example, the application should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the application should provide an optimal viewing and interaction experience - easy reading and navigation with a minimum of zooming or panning - across as wide a range of devices as possible.

Browser Support

We highly recommend to users that they use the most up to date technology when bropwsing the web.

The styleguide supports:

  • Microsoft Edge
  • Internet Explorer 11
  • Internet Explorer 11 (compatibility mode)
  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Opera

Coding Standards

The coding standards which all web applications should adhere to are described in the relevant IT Principles. To supplement the principles, all web applications are expected to:

  • Use modern web mark-up technologies such as HTML5 and CSS3, making sure to appropriately separate content mark-up from structural and presentational mark-up. The appropriate doctype and character set should be used, making sure that the HTML and CSS code validates.
  • If JavaScript is used in the application, then commonly available libraries – such as jQuery - should be used wherever possible. The application should be free of any JavaScript errors across all browsers and devices.
  • The application should ‘degrade gracefully’ in older browsers, or use progressive enhancement techniques to ensure all types/ages of client software and devices are supported as fully as possible.
  • The site should be free of broken links, offer customised error messages, use friendly URL’s where possible, seek to reduce page size and perform well in terms of speed of download and page rendering.

Quality Standards

When we talk about quality standards we are referring to the content, functionality and presentation of the application. We ask that developers and designers fully appreciate that:

  • Users of the modern web expect a high quality experience, that consistently delivers value with as little effort as possible on their part. Moreover, they expect this quality of experience as the norm, not as an added bonus, across the entirety of the application. If this level of quality is not delivered consistently then their experience is diminished, leading to a reduction in confidence that BCU, as an organisation, can deliver what they are looking for.
  • Though it’s difficult to put exact parameters around what constitutes high quality - ‘quality’ can often be subjective, meaning different things to different people and is difficult to measure in an objective way – experience has shown that if developers and designers use the resources provided in the style guide and work with the relevant teams in IT and Marketing, an appropriate level of quality can be achieved relatively easily and consistently.

For further advice and assistance in regard to coding or quality standards, developers and designers are asked to contact webteam@bcu.ac.uk.

Quick Links