The University of Reading Postgraduate web templates

Found in: Web & electronic publishing

The brief

We were approached by Cathy Olsen, web information manager at the University of Reading, to provide designs and HTML/CSS templates for the Postgraduate section of the University website. The designs had to fit closely with the existing University web templates, but take them forward and provide ways to deal with a range of different types of information. The templates needed to meet accessibility guidelines – ideally AAA compliance.

The approach

The planning stage of the project involved speaking with Cathy and identifying all the various types of pages within the new Postgraduate section. This would provide us with the extent of templates that needed to be built. We then designed on paper and screen all possible page options. Through discussions with Cathy we decided to retain the header and footer parts of the existing web layout, but redesign everything in between. We proposed a fixed right hand column for 'extra' information, which had previously been part of the main page content, and an interesting image. The benefit was a clear page structure for the user. We made the screen typography more consistent, provided styles for tables and forms and multiple column options for pages which did not contain continuous text. n agreement of the design for each page, we built XHTML templates with accompanying CSS files. These templates were tested across a range of different Operating Systems and web browsers (everything from modern browsers to Lynx). The templates were also checked for code validation and adherence to accessibility guidelines. Once complete the templates were sent to Cathy for integration into the CMS and further testing. As the Postgraduate section was populated we revised and amended the templates to suit the various types of information.

The outcome

The combination of the CMS and new templates has proved to be very successful. The new design shares many common elements with the existing University templates, but has greater consistency of display of information, as well as more visual interest. The use of the side column has allowed for important information to be 'pulled out' of the main text flow, and the image at the top creates some variation between pages.

Found in: Web & electronic publishing

Recent Projects

The University of Reading alumni magazine

See project report

Grainger Trust forms

See project report

London International Festival of Theatre website

http://www.liftfest.org.uk

See project report

Routes to Reading

http://www.theimmigrantsproject.org/

See project report

School of Biosciences display panels

See project report

Oxford Centre for Buddhist Studies identity

See project report