Category: Digital Media at the NHM

Introduction

The final part of our series of WPY microsite technical posts, this will cover the implementation of the Digital Media and TS development teams’ first use of AEM Content Services  – functionality that integrates our current traditional CMS (Adobe AEM) with decoupled front-end JavaScript applications like this WPY React/NextJS application. This is a more modern web application architecture which aims to separate web page presentation (the ‘head’) from the underlying content stored in a CMS. 

The rise of JavaScript frameworks to develop decoupled web applications (often called the ‘Jamstack’ https://jamstack.org/what-is-jamstack/) is an example of a common engineering strategy to separate increasingly complex software systems into more manageable components and services (areas of expertise).

Last year, we had a big focus on accessibility – it’s vital that we are a diverse and inclusive organisation and it’s equally important that everyone can experience the Museum and what we offer. This is part of our strategic goal to engage and involve the widest possible audience. To meet this goal, we need to ensure our digital experiences are accessible to everyone.

In March 2020, we tested our website with real assistive technology users, funded by the National Lottery Heritage Fund as part of the Urban Nature Project. Following this, we released 25 separate changes to the main nhm.ac.uk website between May-September 2020, each one helping us get a step closer to meeting AA WCAG accessibility standards. You can read more about our work on digital accessibility here.

We could see from accessibility testing that the majority of our pages have the correct structure, and that where they don’t, there are only minor difficulties in navigating the pages. This led to me reviewing the document structure/outline of some of our pages on nhm.ac.uk as we knew they are not as optimised for accessibility – i.e. screen reader and keyboard-only users – as we would like. Continue reading “Semantic document outlines and heading structures”

With the platform and CSS approach covered in Part 1 (Link), I’ll go into detail about some of the key technical features and functionality we built out for the site (www.nhm.ac.uk/wpy). We’ll cover the core image gallery solution with it’s API filtering and Flickr style image layout. Then jump into the lazy loading and next gen image format topics, before finally covering the page routing architecture of this API-driven site.

Introduction

I’ve been involved with the Wildlife Photographer of the Year brand for as long as I’ve been at the Natural History Museum, which let’s just say is a long time. I’m still very proud and privileged to work on such important and inspirational content.

This series of posts is about the recent re-platform of our ageing WPY microsite. I’ll start by setting the scene for how the project came about and then dive into some of the technical decisions. Later on I’ll talk about some of the site’s key features and what we’ve learnt with the tech and working towards a more modern API-driven web architecture. It’s been great having something so rewarding to work and focus on during these strange and difficult times in lock-down. 

At the Natural History Museum, we’re looking for opportunities to increase the richness of the user experience of our website. So when the Museum of the Moon exhibition was in planning earlier this year, we had the opportunity to improve its exhibition page.

In this post, I’d like to take you through the Digital Team’s approach to creating and testing the new look page, and users’ responses to it.  Continue reading “How we created a dark theme for Museum of the Moon”