2012/13 saw the redesign of the University web templates into a responsive design suitable for both central University and departmental use. We chose to be as responsive as possible and (finally) took delivery of a set of templates only a couple of months later than planned. We used a studio for the design process that had some expertise in responsive design, but was that enough to give us what we needed and is it resilient enough for day-to-day use? I'll be telling you about the theory and the practice, and how delivery of complex templates affects the community of users in the University. All and any mobile devices are welcome!

1. Parallel session A3:
How responsive do you want your
website?
University Computing Service
IWMW, 26 June 2013

2. http://www.ucs.cam.ac.uk/
Handout and slides
The handout and slides are available from
http://web-support.csx.cam.ac.uk/iwmw/iwmw13/iwmw-responsive-workshop-a
http://web-support.csx.cam.ac.uk/iwmw/iwmw13/iwmw-a3.ppt

3. http://www.ucs.cam.ac.uk/
Abstract
2012/13 saw the redesign of the University web templates into a responsive design
suitable for both central University and departmental use.
We chose to be as responsive as possible and (finally) took delivery of a set of
templates only a couple of months later than planned. We used a studio for the
design process that had some expertise in responsive design, but was that enough
to give us what we needed and is it resilient enough for day-to-day use?
I'll be telling you about the theory and the practice, and how delivery of complex
templates affects the community of users in the University. All and any mobile
devices are welcome!

4. http://www.ucs.cam.ac.uk/
Introduction
Our environment:
•Central server hub
•Over 800 web servers, mostly hosted individually
•CMSs
• Computing Service provision of a Plone-based service (which at the start of
this project hosted about 80 sites)
• Clinical School Computing Service (which hosted about 30 WordPress
sites)
• Central Admin Computing (which hosts some 15-20 sites in a custom
system)

5. http://www.ucs.cam.ac.uk/
Where we started
We started assembling the specification in late 2011, at which point responsive
design had been around for a while, but the first major site was Ethan Marcotte’s
work for the Boston Globe, which went live in late winter 2012:
•Boston Globe - http://www.bostonglobe.com/
Our initial design brief (January 2012: Appendix A in handout) was pretty long and
painstaking and we were quite pleased about all the things we’d thought of. With
responsive design being so new to mainstream, we didn’t know enough about
using navigation, images, image carousels and video and using tables across
devices to know that these were really difficult and undecided areas of responsive
design.

6. http://www.ucs.cam.ac.uk/
What we thought we could have
A look at our specification shows that what we wanted was a set of templates that
was
•fast,and efficient
•easy to use by our non technical people and web managers
•fully responsive
What we didn’t know then was that there is a disconnect between the first two and
the last of these items.

7. http://www.ucs.cam.ac.uk/
The design process
Success:
•rapid iterative meetings about code requirements
•designers came up with many ideas and presented cases to support them
Problems:
•Over-ambitious schedule meant some decisions were made ad hoc.
•Designers did not allocate enough time to solving the technical problems thrown
up by creating the templates. They had worked on responsive templates before but
underestimated the number of complex problems that were part of our project.

8. http://www.ucs.cam.ac.uk/
The delivered templates
The delivered templates had some features that we hadn’t asked for in our
specification and a few problems/issues:
•Typekit font for heading
•Complex alternate colour schemes
•No initial namespace for template attributes
•Very complex code
•Minimal javascript for responsive design, but still more than desired

9. http://www.ucs.cam.ac.uk/
Installing the templates into a CMS
Two CMSs into which the templates would be installed:
• Plone-based CMS already hosted 80 or so sites (live and in development), to
be migrated into the new templates. There was a system upgrade to undertake
and a move to a new template management strategy, so we bought in
specialist help to build the new site model and troubleshoot template
installation.
• The Drupal-based system was built from scratch by a contractor after much
familiarizing with the developing templates and the requirements both for the
core site and a departmental site.
WordPress version of the templates not used centrally but there was neither the
effort available nor the money to create this straight away.

10. http://www.ucs.cam.ac.uk/
Explaining the templates
The basic template is created in 12 columns – these are usually grouped either as
4 groups of 3 columns, or combinations of these (3/6/3 for a content page with left
navigation and content in a right column). As you look through the screenshots you
will recognize the patterns.
Responsive breakpoints
We elected to have only two main visual breakpoints, one for mobiles and small
devices (<767px) and one for larger screens – there are some small intermediate
differentials for varying the intermediate behaviour of the global navigation bar.

11. http://www.ucs.cam.ac.uk/
Navigation
Looking at http://www.cam.ac.uk and http://www.ucs.cam.ac.uk
• Global navigation and footer, and site footer – different desktop and mobile
views
• Site header
• Site navigation bar
• Content navigation (left-hand in desktop view)
• Content navigation (locating into site navigation bar)

12. http://www.ucs.cam.ac.uk/
Responsive tables
The designers came up with a selection of different ideas for tables. Some of them
are clever but have the disadvantage of needing additional coding to make them
work.
•The first three, listed in the live styleguide -
http://may.csx.cam.ac.uk/Release-4.2/components/inpage-components/tables.html
•and a vertical stacking table.
•A standard table with 100% width has been used in most instances

13. http://www.ucs.cam.ac.uk/
Images
In most contexts images (including those in carousels) are responsive, so that they
will resize to fit the window available. There is no substitution of image sizes, so
the filesize doesn’t vary. Examples are the carousel on http://www.cam.ac.uk and
the image on http://www.ucs.cam.ac.uk/about-us/
A style has been created to enclose an iframe and make embeds responsive – this
will only work when the enclosed iframe content will respond – for example see
http://www.ucs.cam.ac.uk/about-us/where.

14. http://www.ucs.cam.ac.uk/
Accommodating the features and fixing issues
• Images
• Reverse engineering and combining styles
• Github for template management
• Making the navigation work
• Making the page height work
• IE9 compatibility
• Typekit problems
• Shifting CSS and jvascript issues

15. http://www.ucs.cam.ac.uk/
What we provide, now and future
• A central site running on Drupal, with 13 additional separate central sites
running variations of the same code.
• A content management service running approximately 35 live sites(**) in the
new templates, and 55 (**) development sites – with and additional 5-10 sites a
month being added.
• The templates available via Github to developers that can manage them – 4
static live sites have been launched via this route
• A Drupal site object and theme in a late development stage for use by sites that
have sufficient skill to be able to create and manage their own Drupal site.
• A WordPress theme is being produced – unlikely to support all the functionality
so will almost certainly be a look-alike suitable only for small sites.

16. http://www.ucs.cam.ac.uk/
Example sites
• http://www.cam.ac.uk
• http://www.ucs.cam.ac.uk
• http://www.hist.cam.ac.uk
• http://www.infectiousdisease.cam.ac.uk

17. http://www.ucs.cam.ac.uk/
Supporting users
• Run more workshops for content creation and CMS use
• Support for choice of migration route.
• Live style guide needs rewriting and expanding – see
http://comms.group.cam.ac.uk/Project-Light/
• Plone-based content management service comes with help site,
introductory courses and others for current users running every month.
Planned migration of all sites into new templates by October.

18. http://www.ucs.cam.ac.uk/
Problem areas and observations
• Depth of header
• Left-hand content navigation in desktop view
• Use of images and carousels
• Page weight
• Site indexing
• Complexity of code
• Uncertainty in community of template users

19. http://www.ucs.cam.ac.uk/
Going forward
• Six-month review of usage and feedback
• A major review after one year