The Museum’s new strategy to 2031 has been announced, with a call to arms to take action against the current environmental crisis facing our planet.
In the lead up to the announcement, the Connect product team in the Digital Media department were tasked with a brief: to deliver an impactful “takeover” of the Museum’s homepage which grabbed the attention of the user while not only conveying a sense that urgent action was needed, but delivering a message of hope for the planet’s future, not despair.
Relaying to the user a message of urgency and hope in a potentially life-threatening situation for some was a challenge and we spent a long time trying to find the right balance. Each element and its emotive impact were carefully considered. The primary elements of this takeover were:
Size: We opted for a full screen experience. By taking over the user’s full screen at their point of entry we were sure to grab attention.
Fonts: We decided to use a very large title font, larger than any font used on the Museum’s website before; the title needed to scream importance.
Text: The text was kept short and to the point, creating easily digestible content for maximum readership.
Colours: Colours were carefully chosen for a feeling of hope as well as accessibility.
Call to action: A button that simply reads “Act now”.
Animations: We wanted the animations to be not just eye catching, but calming and hopeful.
When we refer back to the brief:
Impactful / Attention grabbing: Full screen experience, large text, animations, short and focused message.
Urgent action: Short and focused message, encouraging call to action button.
Message of hope: Smooth and calming animations, carefully picked colours to symbolise hope.
Tackling this takeover from a development standpoint meant a number of things needed to be considered, including how, if at all, will this component be used in future? The Natural History Museums primary website uses Adobe Experience Manager (AEM) for managing it’s components and content.
We decided to make this component as reusable as possible, something that could be used for all major announcements at the Museum. For this reason it was important to make as much of the component editable as possible, while still keeping the integrity of the design. The final editable fields were for:
- Background images
- Title
- Sub title
- Body text
- Call to action text
- Four gradient overlay colours
- Text colour
- Call to action background colour
- Call to action text colour
All colour inputs were set up to allow all accepted CSS colour modes, including alpha colours which would in future give us the the option of running semi-transparent gradient colours across the top of images for greater design flexibility.
The design meant we were able to create a huge amount of flexibility with a relatively small about of HTML or in our case HTL (HTML Templating Language), an Adobe Experience Manager supported language used to insert pieces of content into the rendered markup, and HTML5 data attributes to define statements over blocks of markup.
<section class="headline-banner ${properties.style}">
<div class="headline-banner__overlay">
<div class="headline-banner__text row">
<h1 class="headline-banner__text-title large-5 columns">${fragment.titleLine1}<span class="headline-banner__text-title--sub-title">${fragment.titleLine2}</span></h1>
<div class="headline-banner__text-body large-7 columns">${fragment.text @ context='html'}</div>
</div>
<div class="headline-banner__cta">${fragment.buttonText}</div>
</div>
</section>
Of course, none of this explains the flexibility we were able to achieve with our colours. For this, we were able to take advantage of standards introduced in HTML5.2 – Style tags within the Body tag. In-body style tags meant we were able to take advantage of component-specific colours while keeping our HTML mark up tidy. In our case because our component is designed to be used no more than once a page we were able implement this in its simplest form, however if you were to use this technique on more than one of these components on a single page, you’d need to prefix your component and CSS with a per-component key class. This is because unfortunately, planned support for scoped style tags was dropped and therefore, without a unique key, all instances of the component would display the style of the last instance in the DOM. Here’s a snippet of the inline style tags:
<style>
/**/
.headline-banner {
background-image: url("${fragment.imagePath @ context='uri'}");
}
.headline-banner__overlay {
background: linear-gradient(-45deg, ${properties.color1 @ context='styleToken'}, ${properties.color2 @ context='styleToken'}, ${properties.color3 @ context='styleToken'}, ${properties.color4 @ context='styleToken'});
}
/**/
</style>
A prefixed version may look like this:
<style>
/**/
.component-instance--one .headline-banner {
background-image: url("${fragment.imagePath @ context='uri'}");
}
.component-instance--one .headline-banner__overlay {
background: linear-gradient(-45deg, ${properties.color1 @ context='styleToken'}, ${properties.color2 @ context='styleToken'}, ${properties.color3 @ context='styleToken'}, ${properties.color4 @ context='styleToken'});
}
/**/
</style>
The gradients were an integral part of this project and the animations were key to creating a hopeful and calming call for much needed environmental action. The colours themselves played an important role but equally important was the animation of the colours. We were able to achieve this animation entirely in CSS, with just a few lines code.
The first task was to create the keyframes for the animation:
@keyframes headline-banner__color-flow {
0%, 100% {
background-position:0% 50%
}
50% {
background-position:100% 50%
}
}
In these keyframes we request the keyframes to set the background position of 0% on the X axis and 50% on the Y axis at both the beginning and the end of the animation. Beginning and ending animations at the same point avoids any skip or jump. As our animation plays, we request that our background moves slowly towards and then away from X: 100% and Y: 50%. We could implement an even greater range of colour by requesting our keyframes tween from X: 0, Y: 0 to X: 100%, Y: 100%.
For our gradient animation element we need the following styles:
.headline-banner__overlay {
height: 100vh;
width: 100vw;
background-size: 400% 400%;
animation: headline-banner__color-flow ease-in-out 10s infinite;
}
We set element width and height before setting our background size to 4 times that of the viewport, allowing us to move the background in and out of the confines of our screen by calling the headline-banner__color-flow keyframes on our animation property.
In the gradient flow example we animate the background position, as opposed to the transform property used in all other animations within this component. This is something to consider refactoring in future because unfortunately, browsers cannot animate background position as cheaply as some other properties and therefore cannot achieve the silky 60fps that we can with:
- transform: translate(x, x)
- transform: scale(x)
- transform: rotate(x)
- opacity: x
The team is happy with the results and we have learnt a lot along the way. We look forward to reviewing how our users receive the work and continue to give them a more engaging experience while promoting Museum values.