The Common Web Design (CWD)

In April 2010, Alex Bilbie, an undergraduate student working part-time in ICT, began to develop a ‘Common Web Design’ for the university’s web services. At that time, Alex and a recent graduate, Nick Jackson, were developing http://posters.lincoln.ac.uk , a repository and showcase for posters displayed around the university. The decision to develop this service came out of a student focus group about improving student communications. The Online Services Team recognised that the development of http://posters.lincoln.ac.uk provided an opportunity to develop a ‘common’ platform for a new HTML/CSS presentation framework that would gradually unify the look and feel of all internal web offerings.

Challenges and development

At that time, the university’s desktop platform was Windows XP/IE 7, so it was a requirement that the new framework should meet this baseline. However, we did not want this to prohibit the development of a modern, flexible, accessible framework that worked across platforms and devices.

The initial design of the CWD was built on some previous work developed for our Marketing and Communications team, who were looking for a new presentation framework for their own web offerings. As a result, the CWD was chosen for other services, and it gradually gained widespread adoption.

We have had five major versions of the CWD (major version means HTML changes are required in order to upgrade), and we are on our second design. The original design can be found at https://cwd.online.lincoln.ac.uk/2.3 and the new design can be found at https://cwd.online.lincoln.ac.uk/3.0.

We have also tried to bring a lot of the design principles in CWD back into our offline/print materials so there is a consistency to our overall presentation and communications.

The CWD is now part of our Online Services ‘toolkit’ that allows us to rapidly prototype and implement new services, being used as a presentation layer on top of APIs available on http://data.lincoln.ac.uk and uses extensions available via our new in-house OAuth 2.0 Single Sign-on System.

Technical details

CWD is written in HTML5 and CSS3 and is marked up to WIA-ARIA role attributes. We also make use of HTML5 forms and HTML5 semantic tags. In order to offer a ‘common’, resilient and rapid deployment across all websites, the CWD is served centrally from an external content deliver network (Rackspace Cloud Files). Therefore changes made once are deployed across all CWD enabled websites.

The CWD is built on the following principles:

1. Responsive design. The CWD automatically re-sizes with any display size, including mobile devices. We do this using CSS3 media queries.
2. Graceful degradation. The CWD gracefully degrades to back to IE6. We have extensively tested across a wide range of browsers on different platforms.
3. Personalisation. The CWD makes use of our single sign on platform, allowing for users to remain logged in across CWD-enabled sites.
4. Accessibility. As well as using WIA-ARIA markup and semantic HTML5 tags, we intend to implement roaming accessibility profiles in the near future, allowing users to select distinct accessibility profiles, which will ‘follow’ them across different university web offerings.
5. Location aware. The CWD makes use of browser geo-location features, which enable us to develop location aware services. We also have server side generated JavaScript, which is able to convert internal network IP addresses into building and latitude and longitude data.

In current development are:

1. Components for HTML5 video for use on our MyPlayer streaming media service.
2. The use of web-sockets, allowing us to push messages in real-time for use in student communications.

Design Principles

The CWD designs have always been about block colours, strong typography and bold icons.

We have spent considerable time trying to overcome problems with font renderings across different desktop and mobile platforms. Our headings font-stack is Helvetica, Helvetica Neue, Arial, sans-serif. Our body font-stack is Helvetica Neue, Arial, Helvetica, sans-serif.

We have bought licenses to all three Pictos icon sets by Drew Wilson and these are used both online and offline.

Areas of use and impact

Our implementation strategy has been to switch all new and re-developed services to the CWD.

Over the last year, the CWD has been gradually deployed across the university: e.g. The university Gateway, Posters, it is the default theme for the university blogs , the MyPlayer streaming media service, Print from My PC, My Calendar/Total Recal , Jerome , Linking You , lncn.eu URL shortener , the staff directory, the mobile gateway, our in-house mobile Blackboard app, our internal access control website for student halls, Student as Producer, and the university Careers website . The CWD has been of particular benefit for our mobile/blended learning project, providing a ready-made mobile presentation framework for us to rapidly develop with.