Insight

What we think, say & do

3 September 2015
Creating a new, modern web for the Imperial War Museums

To provide for, and to encourage, the study and understanding of the history of modern war and 'wartime experience’” - the concise but far-reaching aim of the Imperial War Museums. Their role in educating the public about war is enormous, and of extremely high value, so when we were approached to help them build a new responsive website, it was very exciting.

They asked us to provide a modern delivery for their site: to present their information beautifully across all platforms, working with modern browsers and retina devices, and providing graceful degradation for older browsers. We supported and advised on changes to menu structure and information architecture, as well as user experience.  

The challenge

The IWM came to us with an incredibly content rich Drupal site. Thousands of articles, a huge archive of documents, photographs, films, art and military equipment, information about their five branches and their large list of events. They also had a very strong web team of designers, developers, content creators and managers.

They required knowledge of modern frontend development, and had never implemented a fully Agile workflow on such a large project before. The Cameron & Wilding team members involved were myself as frontend developer, one project manager, and latterly one automation tester and one manual tester.

Collaboration is key

Our goal at Cameron & Wilding is to be as collaborative with our clients as possible, so we were able to dive right into the project, working collaboratively between our offices using a shared online task board, setting up daily Google hangouts and quickly becoming one team, with our project manager advising and demonstrating C&W's working practices.

We started work on their new Drupal theme, with my aim as frontend developer to create something that not only fulfilled their needs, but was also extremely easy to understand and manage, using the best frontend tools available.

The challenges we faced were the type that naturally develop with such a large site over time - lots of types of content and templates and a frontend codebase that was difficult to manage. They had a great new design, but had reached the end of their old theme’s abilities.

Building a mobile-first responsive design

I therefore set to work building a theme that could support a mobile-first responsive design, flexibly changing its layout from small mobile devices to tablets and up to desktops.

Plain CSS can achieve this, but a faster and more powerful tool to use is a CSS preprocessor - a tool that lets a developer write complex styling functionality, but which renders into CSS. There are a few to choose from, and I opted for Sass.

Compared to simple CSS, it’s easier to maintain, and quicker to adjust. One example of this is the ability to break Sass styling up into ‘partial’ files - smaller, more readable chunks of styling - which was extremely useful on a site with so many content types. Rather than this ending up with lots and lots of CSS files, partial Sass files can be compiled into one master file, resulting in just one CSS file. This is significantly better for maintenance and readability, and allows developers to create a sensible system for authoring code that doesn’t result in loss of performance - I used SMACSS as an authoring system for my partials.

Some awesome tools were used

The theme makes use of a range of awesome tools, such as the Susy grid system, which I used for creating our Sass layouts. Other tools included:

  • Modernizr, for detecting browser capabilities and allowing me to write modern styling for browsers that can support it, and graceful degradation for those that can’t.

  • Fontello, for creating a custom set of site icons (being a font, these are infinitely scalable, and will maintain perfect resolution on retina devices).

  • Autoprefixer, for detecting and injecting browser prefixes into CSS, saving developer time.

  • Hologram, for documenting the theme’s styleguide.

  • Browsersync, a miracle of a development and testing tool - more info below.

  • Gulp, for running all my frontend tasks, from rendering Sass to CSS, pushing it through Autoprefixer, rewriting Hologram, then triggering Browsersync to refresh the browser(s).

Browsersync deserves special note, as a testing tool, and also an incredible time saver for developers. One task for a frontend developer is the need to regularly check different browser versions and screen sizes to ensure your work is having the intended effect.

What Browsersync can do is allow the developer to have any number of devices on a local wifi network (or even tunnelling in externally) see the site from their local machine. Then when a change to the site’s files is made, Browsersync can inject that change across all devices. What’s more, it can allow remote debugging, maintain page position on all the devices, and much more.

I used this in conjunction with my iPhone, a couple of tablets, a second laptop running older versions of Internet Explorer and device emulators in Browserstack, and multiple browsers open on my Macbook. Any change I made was immediately visible across all these devices, resulting in a well tested, more quickly developed theme, saving the IWM money on user testing and developer time.

Image removed.

Multi device setup controlled with Browsersync. All devices maintain the same position on the page when scrolled, and all refresh when the code is saved. Viewing an IWM exhibition page on multiple browsers at different sizes, an Android phone emulator, IE9, an iPhone and an iPad

Improving menu structure

Another challenge was menu structure. The IWM had multiple menus in different positions on the page, their branches had menu items that were worded differently from one another, and some cleanup was required. We were able to give advice on structural changes as well as visual ones, taking into account the user experience of new visitors to the site, as well as experienced visitors looking to drill down into the IWM archive.

Image removed.

Rather than confuse the user with header menus, sidebars, mini dropdowns and breadcrumbs, the new site adopts a simpler approach, with highlighted tabs items use of background menu colour to show multiple levels of navigation, all contained within the header

Testing

In the latter stages of the project, the C&W testing team became involved, creating a suite of Behat automated tests to verify the functionality and stability of the website. These tests included content creation and validation, page asset checks to verify that every asset loaded successfully, and visual regression tests to catch any styling issues.

Delivering above expectations

The project was able to be delivered before the expected date thanks to the project maintaining a well managed, fast pace throughout. It has fulfilled all the requirements set - a responsive site that works well across all manner of devices, a clearer and more pleasant user experience, and a very happy client:


"The quality of the work they produced was outstanding, and the project was run with great humour and with the spirit of one big team. But we got so much more than a helping hand and an awesome new-look site: we were all up-skilled by the experience and came out a stronger team with greater skills in many areas. Our developer, Baysaa, concentrated on the back-end Drupal work whilst Sam from C&W did the front-end, but they worked very closely together and along the way Baysaa was introduced to a variety of new technologies that have become embedded in our work, from Sass to Behat. Our department's fledgling agile processes were also brought on immeasurably through the collaboration, leaving us much fitter for our future work. I would not hesitate to recommend the Cameron & Wilding team, who have been a real joy to work with.” - Jeremy Ottevanger, Technical Web Manager, IWM