Tech Talk: Kinetic Elements and Hotspots in our 2018 Holiday Email
It’s become a yearly tradition for our holiday email to showcase the latest trends and innovation we’ve been working on over the past year.
Following last year’s success with kinetic elements, we wanted to take an even bigger step up this year. The development from the initial idea to the final design changed significantly in approximately three weeks, with both the Content and Digital Design teams putting their heads together to create something truly different.
Inspired by layered pop-up style holiday cards, a festive scene was created to represent different traditions and demonstrate how each of our three operating regions celebrates over the holidays. Each design included well-known features and styles specific to that region for further personalization. Each object inside the house was silhouetted out, enticing users to click and interact.
The Digital Design team decided to incorporate two kinetic modules together: an interactive carousel with added hotspots linking to great case studies, social media posts, and the antics of the mischievous Adestra elf over on our website!
Our team was keen to push the boundaries by combining two kinetic elements in a single campaign.
We started with a basic prototype which allowed us to ensure that the concept would work before adding the design elements.
The carousel was made using hidden “input” HTML tags, controlled using hidden “label” elements overlaid on top of these. The inputs are styled using CSS, which in our example shows the background images of our three different locations and controls the position of them within the email.
The hidden labels are wrapped around the arrow buttons which you can see overlaid on top of the images, each selecting the specific input it has been assigned to within the CSS when clicked or tapped.
As for the hotspots, we decided to have three per location. These were created using content wrapped inside “div” tags and styled, animated and positioned using CSS. We chose to add a pulse animation to each hotspot to give the user a subtle hint to interact.
The content of each hotspot is hard-coded into the HTML and hidden using CSS. Using the CSS “:hover” selector allows the audience to reveal the content of each individual hotspot when hovering or tapping on it.
We then tested the prototype across various email clients and mobile devices to ensure it was working as expected before adding in the actual content.
As with most kinetic elements, they are well supported on mobile but not so much on desktop. Therefore, we had to create a fallback version of the email to compensate for any clients where interactive elements are not supported. We used a combination of CSS and Outlook-only MSO code to hide the interactive elements of the email and instead display a static image. We linked this image to the web version of the email, which opens the email in a browser – so no-one missed out.
To add an even more personal touch to the email, we wanted to make the first frame of the carousel representative of the region where the user was based. To do this, we added several conditions to the code – so our APAC audience were first presented with the beach scene on opening, for instance. This also applied to the fallback version which had the same conditions applied.
On the back of this email, we’ve created a kinetic module based on this concept which can be used within the Email Editor on the Adestra platform. We look forward to seeing the creative ways in which our clients will use this in their own communications this year.