The interactive Christmas card we decided to produce in 2022 had to provide the same personal touch as physical paper cards, only this time it was through a screen. I fell into the position of being the designer and developer of this particular project because of a reputation gained in a relatively short time at Engage Web for making things move on a website. It all stems back to the very first website I produced with a slightly disturbing animated gif of my head turning to face the screen with eyes lighting up red.
After an initial brainstorming session, Darren and I got rather excited about the idea of something that looked old and dated (horrible basically) but integrated modern web technology to give visitors a fun and engaging experience. Think Austin Allegro with a touchscreen built in. The idea was to show the members of our team (via video) telling a joke or reciting a fact, akin to the sort of thing you would find in a cracker from B&M Bargains.
The first thing I did was find a photo (with no copyright) showing a 90s living room at Christmas. After removing the random lady sitting in a chair and getting over the initial shock of how long ago the 90s were, my next task was to establish whether the idea could be put into practice. One source of friction in any company building that builds websites is the creative people wanting to create something that the technical people cannot produce. Luckily, I was both of those teams rolled into one for this, so I only had myself to argue with. After much discussion between myself and I, it turned out that yes, it could be done.
Starting with a simple part, the gift tag in the top right corner is produced via pure CSS. I used a linear gradient background for the card and some CSS border radius to create the ring at the top where a thin white line appears to go through the hole. The tag moves from side to side gently because, remember, this is a 90s living room in winter, with lack of double glazing. A light breeze is therefore possible and that would make the tag move. A lovely handwriting font was used for the tag and it is called ‘Oooh Baby’. If you think I am joking, look it up. ‘Oooh Baby’ is a real Google font, available for anybody to use for free on their website (or anything else).
The logo has snow on it. This is added via a CSS. The snow itself is a transparent PNG-based base64 string (thank you vijender on CodePen) so it is all in the CSS. The snow is added to the remote control the same way.
The TV area is actually a separate DIV in the code with its own background. This is separate file-wise from the main page background, but is positioned so it matches up like a jigsaw. I did it this way because the TV itself needs an area where the video can show through and with that being a separate entity in the code, the background image for the TV needed to be a transparent PNG.
If I made the entire page background a transparent PNG, the file size would be big, hence splitting it up the way I did. Sitting behind that PNG background in the TV DIV is an iframe, sized to be the dimensions of the screen with a slight overlap all the way round. On the subject of size, I will point out that vw was heavily used as a unit for div sizes on this project, so that the ‘Christmas Card’ was responsive. In other words, so that it worked on all screen shapes and sizes.
In the iframe, a video loads from Vimeo with none of the controls, so that when you press the play button, it automatically plays. The initial video shows the classic ‘test card’ that we used to see a lot when the BBC screwed up. I found separate video footage of distortion and combining that with a few effects in Adobe Premiere, created that holding screen which looks like the test card has come on but the signal is also awful. Remember the look I was going for here – old and horrible.
We produced the other videos by filming everyone with a green or blue screen behind them. I then imported those videos into Adobe After Effects or Premiere (I forget which) and overlaid them over an appropriate background video. I was particularly proud of the one with John telling a joke where the driving instructor appears to actually react to his joke. That was actually just by chance that the timing fit perfectly. With all of the videos, I also added several layers including one that had a distortion to mask the whole thing and give that feel of it being the 90s before anybody even cared about having HD resolution, let alone 4K.
Next of course came the big part – getting those videos to play on the TV. I knew from my initial research (and previous experience) that Vimeo have a brilliant, very useful and diverse API. For anybody reading this without technical knowledge; firstly you have probably switched-off or gone on standby (pun intended) with the mention of base64 code, CSS and HTML. However, to quickly explain what an API is – think of it as using another company’s technology on your website without having to install all the workings of it where your website is based. Google Maps is a good example. You stick some code on your website and as if by magic, a Google Map appears. The technology making that show up is still based on Google’s computer servers though.
Now we know what an API is, I used Vimeo’s API for this project. When the site loads, it firstly loads the ‘test card’ video from Vimeo with parameters of controls=0, autoplay=1 & loop=1 (https://player.vimeo.com/video/779067277?controls=0&autoplay=1&loop=1). The first parameter hides any controls on the video – the timeline, play button, pause button, etc. The second makes it autoplay. The third makes it loop. It is actually a very short video but produced in a way that hides where the start and end are to make it look like a continuous loop when played constantly.
When you click or tap a number on the remote, it runs a function using jQuery. That function takes two parameters – the video ID on Vimeo and the name of the person or people in the video. It firstly brings up the name tag you see with the name displayed. Video-wise, it initially shows a loading DIV because, depending on the user’s Internet connection, the video loading speed may vary as it is being pulled in from Vimeo which is an external source. The reason we use Vimeo, by the way, instead of storing the videos locally on our server, is for bandwidth purposes. If the videos were stored in the same place as the Christmas card itself and loaded from there, we would be using a huge amount of bandwidth within a very short time.
The play function then progresses to firstly set the ‘loop’ parameter as false because we do not want the staff video that loads to be playing more than once. Darren’s translation of Happy Christmas in another language is quite enough as a one-off experience. At the same time, the Vimeo API is told to load the video with the ID stated and is then told to play that video via a 800ms delay in the code to ensure it happens in that order. It then listens for an API event which says the video is ready and beginning to play. At that point, the loading DIV is hidden and you see the video.
Finally, it ‘listens’ for another event from the API to say it is 99% complete. At that point, it fades out the video, reloads the ‘test card’ video, sets it to loop and we’re back where we started.
Tapping / clicking the power button skips to that final stage at any point and the play / pause buttons just tell the Vimeo API to play or pause! The buttons below the numbers may not have been noticed by a lot of people but can actually make it a lot more fun. They send a command to the API which speeds up or slows down the video being played. I recommend trying it with video number 5, which is Jonathon.
One of the last challenges I had was making this thing work with Apple devices and Safari in particular. Apple do like to change the way the world uses technology sometimes, with no good reason in my opinion. It’s a source of frustration for those of us building user experiences on the web, but it’s an area that Microsoft have also contributed to on many occasions during my time building websites. With the Engage Web Christmas Card, the biggest issue was CSS transforms and in particular; 3D transforms.
When you look at Apple products, they are all about innovation, but simplicity in their design too. They often opt for a ‘less is more’ approach, which is something the 90s was never really associated with. Look at The Spice Girls. Did there need to be five of them? Did the band Five need to be Five? It could have easily been Three but that would not have been the 90s way and I needed to ensure that my 90s-inspired Christmas treat portrayed that.
Back to the technical challenge, Apple’s Safari does not like 3D transforms in CSS. If you look at the Christmas Card in Chrome or Firefox on a PC or your standard Chrome-based browser on an Android phone, you will see the gift tag moves as described above. The remote control is placed at an angle, sort of pointing in the rough direction of the TV. It has perspective, to give that ‘real’ feel when using it. Neither of these effects could be used on Safari. The remote control is flat in line with the user’s screen and the gift tag does not move. When that code was left in for Apple devices generally (all browsers including Chrome use the Safari ‘engine’ on iPhones etc), the Christmas card looked like a bit of a mess. The gift tag was half cut off and something similar happened to the remote control.
The choice was made to have a tasteful fallback – 13 lines of CSS; an alternative solution for the people who made the life decision that an iPhone would be the best product to make phone calls on (maybe after watching Steve Jobs all those years ago). Something else Apple do not like is videos that ‘autoplay’. I understand the reasoning behind this with mobile devices because it can sometimes be to stop people using their data on a mobile network. With this project, it’s not an issue for that first video to necessarily play when someone first loads the Christmas Card because it looks good as a static image too.
To end on a positive note though; the HTML behind this is incredibly simple and could be produced by any reasonably competent web developer. There is no backend code to it. The whole thing is frontend HTML, CSS, Javascript and jQuery. It only loads two external JS files (jQuery and Vimeo), along with one other JS file which is under 100 lines long. It uses one reasonably small CSS file, Font Awesome for the remote control icons and Google Fonts for the two different fonts used. There are obviously a few images – the main background, the separate PNG for the TV bit and the Engage Web logo.
Overall – the whole thing is very lightweight. The HTML is only 70 lines long! I did it this way knowing that the video obviously needs to load from an external source (Vimeo) so I wanted to keep everything else as simple and light as possible.
The ‘Christmas Card’ can be seen at https://engageweb.co.uk/christmas.
- WordPress vs. WP Engine legal dispute – what you need to know - October 14, 2024
- How the Engage Web virtual Christmas card was made - February 13, 2023