THE INTERACTIVE CHRISTMAS TREE
Firstly, to give you some background of how this came about, in-short, I was actually thinking about an email that I could make that my daughter (Poppy) would interact with and enjoy. Poppy is almost 5 and has no real concept of what email is, or what I do do for living and I wanted to make something that she would be interested in, so i went with Interactive Christmas tree baubles!
I also thought if I can interest her, then perhaps it might give me some more insights in to something that I’ve also been thinking about. Something that people could share, or post socially.
Something that:
- Wasn’t made of the usual content, sales, or messaging, or welcomes.
- That might just engage the person who receives it to interact
with the brand perhaps in the way the usual social media channels do. - To show our clients that boundaries within email can be pushed, not just in code, but also in it’s approach.
- I also initially wanted to create something that had no images at all.
I don’t really feel like I achieved any of those things to any great extent, but it’s part of a larger body of work, and I learned a lot from creating it.
I think I wear my influences on my sleeve with this email, and it’s definitely a bit of a nod to them. Mark Robbins and TABLE TR TD are there for all to see. I’ve never really fully delved in to interactive email fully, I’m more of an CSS animation geek, so In fact I reached out to Mark, Camille and Miah (Table Tr Td) to get their input on it and they were kind enough to get involved. In fact the Humbug idea came from Camille, and I think it’s my favourite function.
I also took a lot of influence from Mike Ragan‘s work on pixel-art which always resonated with me somewhat from that point of view of focussing less on that ROI/stat based email culture, and thinking about that social sharing side of things. Mike said described his pixel-art as a “labour of love” and I certainly know what he means by that after making this. But I felt the idea of the email still functioning in the same way even if the user doesn’t download the images. That would be cool.
I then just tried to combine them all with my love and hate relationship with CSS.
it went through a few stages, before ended up as what went out.
Stage 1
As it was coming up to christmas, and Poppy likes colouring in. I started by simply making a Christmas Tree with the simple premise of colouring it in. It was made up of 105 checkboxes and styled with a preset colour in the CSS to be activated when checked.
Poppy loved it, it was a huge success. She also made me share it with her friends so I ended up sharing a web link with a couple of her school friends parents. Which was unexpected, but nice reaction. I guess the reaction wanted despite being from a 5 year old.
Stage 2
The first version (despite it’s success with Poppy) wasn’t really going to cut it from a professional perspective and it led to the main idea which was “Decorate the Christmas Tree”.
So I had the tree already coloured in a create a palette of colours that you could choose to colour in baubles and then apply to the tree.
The problem with this was I wasn’t able find a reliable way to have multiple bauble colours on the tree, triggered by the menu, without heavily bloating the code. Whatever you selected in the colour palette changed all of the baubles. So because of the menu of colours it inferred that you could have numerous colours, so when using it, you were actually left disappointed. When I tested this on Poppy she just got very frustrated, and told me “IT’S RUINED!”
Stage 3
The colour palette concept was ditched and set colour baubles to appear behind the checkboxes, by creating different colour styles for different classes and assigning them to the checkbox.
I then created a menu section which is similar to what exists now. The functionality changed to the baubles to christmas lights, and added the “Humbug” option suggested by Camille.
The lights worked well because they are change of colour animation, and when selecting each checkbox it starts from the beginning so it gives the impression of randomness.
The idea for the humbug option was initially a gif, of the tree burning down. Like when Wylie Coyote blows himself up after pressing the TNT plunger. I then changed this to a background sprite animation instead of a gif so that every time the button was pressed the animation played. (Thanks Mark for suggesting that change). Otherwise the user would have to go in and out of the email to make this function play again.
Stage 4
We then began work on the surrounding design. We wanted to keep things simple for this – so we just targeted webkit and and everything none webkit got the fallback version. Which was very much that.
Anyway we had these constant frustrations with it, and that was:
- The Baubles couldn’t be controlled by the user.
- When selecting lights the baubles would changed to lights, and the lights were much better. You couldn’t have both.
- If you selected your baubles and then pressed ‘lights’ they would all change and be on the same animation timeline. We didn’t have the desired affect.
So we changed it again. To how it is now.
Stage 5 – The Final Version
For the final version we just went with the variation of lights. This helped keep things a little simpler and work better simply because all that is now happening is that the different functions are a different CSS animation.
The only real problem I had was that in making the web version (which wasn’t just targeted to webkit and didn’t have any fallbacks etc,..), even when specific creating -moz- targeting in the animations for the mozilla, all of the animation colours for the lights were initially made up of a a skew and scale change that had varying gradients with box-shadows. However when i tested the menu functionality options Mozilla didn’t like the gradients, and wouldn’t display them, instead just displaying nothing with a box-shadow around it, and after spending a few hours trying to fix it, I decided to simplify a little. Time was pressing. So I reverted to simpler hex codes for that instead as it appeared to have problems with the linear gradient.
To Conclude…
I was particularly pleased when Kevin and Jason made it the “Email of the Week” on the Litmus Email Design Podcast
Here is the code for each version. I’m sure it could have been lighter and cleaner but it was largely all born from adapting the build at each stage.
Email Build
Web Version