Advancements on the Faux-Video Method. Electric Dreams Email.
At CACI Email Studio, we created this email to promote the release of the Philip K. Dick’s Electric Dreams series on Channel 4 and All4. We used the basis of the original experiment I created for Faux-Video that I covered in a previous blog post. So in this post I’ll cover what are the main differences were in the build. No big write-up… just a quick explanation.
(This email is from September/October 2017)
Here is the email
(Open in Chrome or Safari as it’s webkit only)
We were basing the faux video on this particular trailer.
Animation of the background images.
In the Women’s Euros email the animation was a single timeline/keyframe, on a single cell, which during the animation would swap the between a variety of different background images, with a static button sitting on top. So fairly straightforward in technique.
The Electric Dreams approach differed because in this method I nested each individual background on it’s own <div> and controlled each one with it’s own keyframe animation.
The positives I found from doing this were that I had more control over each animation and it was easier to control, and build/design it “on the fly”… I could also make the animation much longer, without getting in to very complicated percentages.
The main negative was that as they were all operating on different timelines I couldn’t then loop it as a whole.
So in hindsight — it would be a good plan to think about your aiming all of your animations to total time (20 seconds for example) and have each animation running to that amount of time.
The other thing added to the background was these little glitches throughout. These were pretty simple… just rapidly changing the background position in keyframe, so it was incorrect and showing parts of two or three sprites at the same time.
The extended time does also mean increased weight… more sprites in total. And I did my best to keep these down. It did help load up to have a preload element in their too, which is just CSS and a div with background images loading, but no height or width to them.
The Content on Top
The content on top of the Women’s Euro Email was just a static CTA that had a slight opacity to it. So for this I wanted to see where else I could take that.
I wanted any copy to be live-text and sit on-top of the background. However if you have seen the trailer, you’ll see that the text animates, and has quite a glitchy effect to it etc… as an ongoing going theme. So I wanted to and bring elements of that in to the animation.
The opening text is a position thing. Just text on three lines that is positioned and then using hidden overflow we can control which lines of text is displayed at any time.
The “Philip K. Dick” text simply scales very slowly, and then has a rapid skew change, and that is also applied to the CTA further down the email as well.
You could go really far with this, and start to use SVG, and a load of other nice CSS tricks, but I wanted to keep things as simple as I could for this, as it kept things easy to change if I needed too.
It was interesting to build. At first I absolutely loved it. But actually pushing that step further has given me some new problems to solve.
What I did like is that the show gave me a bit more of an excuse to be ‘deliberately jarring’. The more I see it though, the more it seems too long. Without the sound I don’t know if it drags on too long.
Senior Email Developer
CACI Email Studio