Browsed by
Tag: kinetic

In space no one can hear you scream: An Email Tribute to ALIEN

In space no one can hear you scream: An Email Tribute to ALIEN

 

Hello!

This is a rough write-up (apologies for grammar and spelling, it’s really not my strength in case you hadn’t figured that out already. As usual I am rushing through it). If anything doesn’t make any sense get in touch, and any code you can grab from the builder link at the bottom of the blog.

So I made this

Before I go on – please be aware if you do look at the link do so in Chrome or Safari, as I’ve focussed on webkit – and although it’s largely fine in Firefox there are some CSS transitions that Firefox doesn’t like, such as the background sprite switching mid-animation keyframe. And I have not focussed on any targeting or fallbacks.

As a follow on from doing the Sonic The Hedgehog concepts, I wanted to have a play around with some other features. I wanted to do something a little more disruptive. I wanted to create something with a first person view, but also to have a desktop size and mobile size, still staying with the sprite animations. (For what it’s worth I did have a play around with a 100% fluid version, and will probably do that next-time around. But some of the assets didn’t really work well enough for it, so I’ll save that for another time). And I wanted to throw a few different techniques in there, and show some other little CSS tricks I quite like.

I initially wanted to try and ‘bring a movie poster to life’. I really like the Netflix emails where they animate, so I wanted to see where I could push that a little more. What’s great about the Netflix emails (this one) is they go against the norm, and are really fit for purpose. They do a great job of grabbing attention.
I wanted to do something scary, to see how that would translate, especially without sound.

I chose ALIEN mainly because it’s a great movie franchise (first 3), it terrified me as a kid when I saw it, It’s tense, and unsettling and I like that.
There are some great posters and fan posters out there, but also because of the ALIEN Isolation game, there were some good quality static assets already out there. So I could try and bring the two together. So it’s all a bit of a mash-up. Using whatever I could get my hands on to try and make something work.

I started with some sketches and started to roughly plan what I was going to do, but largely I just got stuck in.

diagram

diagram2

 

PART 1 – Start and Finish

At this point I’m really just working on the desktop version. The reason for that is I initially started working on both, both on mobile the space is very different. When I started by making it fluid the sprite of the setting would be small, so I decided it would be better to crop of the images and swap out the sprite with media queries. (I’ll mention the mobile version more shortly)

I started out concepting the setting, and the Xenomorph attack. And cutting out elements of it so I could “mess with the lighting” before I put the sprites together.
(initially I spent quite a while messing with these, but below this is some I created later at a bigger-size)

I was initially going for this setting, with messages falling down, and the lighting getting increasing more frantic, until eventually it goes to black, and the strapline message comes down, and then the Xenomorph comes along and gets you.
Once I made that I changed my mind and wanted more interaction, so I start again and focussed on the start and end and figured I could fill the the middle out afterwards. So Like Sonic I made 3 stages and then pieced everything together afterwards.

I probably remade or adjusted all the sprites about 3 or 4 times. Just to get something like what I wanted, and I probably could spend a lot more time on it, if I had it.

setting

The Xenomorph is a lot more like the Sonic sprites, where It’s runs through each frame step-by-step. This is a s really reliable way of doing these, as I’m letting the image do the work. CSS is great but I can be a real pain, and I’ve already mentioned the problem with Firefox earlier swapping images mid-way through, and for accuracy i find it just works better, and with less code. (Each to their own though)

alien_sprite

The setting at the start is a little like this too, but just built slightly differently, where the keyframe is more laid out with percentages of the timeline, and position changes are used a lot more, as this allowed me to move back and forth between sections, which I didn’t do too much, but would do more of later on in the build (I began to use this method more as I got frustrated editing the sprites). The benefit of this method is you can reduce the weight of your image. 

For example if you look at the image below, there are quite a few duplicates. I could have had one of each and used CSS to control the background position at each stage.

alien_seting_sprite

 

PART 2 – The Bit in the Middle

The part in the middle is a again more sprite work…. It’s no different to the other sections. But this time I switch images mid keyframe, and use CSS to move positions a lot more.

On mobile you’ll notice that this section is a little jumpy – and not as smooth as the desktop. It’s bit annoying to look at, but I’ve left it as it is as I think it’s a good demonstration as why your sprites need to be bang on, and taking the time to get these right wil save you time and headaches in the long run. I raced through the mobile sprite a lot more to get it done, and then started trying to see if I could fix it all with CSS (deliberate experiment). But it would have been quicker to spend more time getting it right.


PART 3 – The other bits

Once all my assets were sorted (to some extent) I began to bring it all together and think about animations etc.

The Title…
I have tried to copy the original poster, with wide spacing between each letter. I used letter spacing at set pixels, and then changed it at the break point. for a more fluid approach you could look to use ’em’.
I also have the text fading in an out. I initially had the text flickering, like a fluorescent lightbulb. But it was all a bit much. I actually think it’s better without the fading on the text, and it’s just solid, but I’ve left it in for now.

Buttons…
Obviously these are checkboxes which trigger the next step. I’ve used some CSS to do different things. I wanted them to seem like messages from someone, and use that to help the user through the email.

The Shakes…
When the attack happens, you make notice that the whole thing shakes. Initially I had this happen all the way through, to give the impression of breathing, and/or the setting juddering a little… but it was a little jarring, so it’s barely even there now. And just on the Alien attack.

What else was I planning for this…
1. I wanted to have a chase/panic scene. So just before the Xenomorph gets you. So you run through some corridors a little, and you see a little more of the  Xenomorph, and “your hands” appear on the screen, before the attack scene. This would be time consuming, and add more image weight. But the main problem I had was I didn’t want to just keep adding sections and it becoming more and more of a game.

2.  I was thinking about having a little checkbox pop-up on the “monitor screen”, or a light switch or something like that, like an extra transition. Initially one of my idea was to just have a dark email, a light switch, and when you turn the light on the Alien is there.

3. I wanted to make the mobile section a little better than I have. But overall there are lot’s of things I could have done a lot better, and time allowed I could.

 

So that’s about it… It’s not the norm or best-practice or gaming or even a good email. But it’s different. That’s what these have been about.
Not a gimmick. They are just exploring different ideas without conforming the rules. And if we don’t do that and see where it takes us, it all just becomes monolithic cardboard. Digital Cardboard obviously.

 

Is it scary enough to have an impact on the question “What’s the best time to send an email?”

 

 

VIEW IN CHROME OR SAFARI

VIEW IN LITMUS BUILDER

TWITTER: @joon82

 

Thanks.

Hope you like it.

Kristian

 

The Interactive Christmas Tree

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.

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

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”.

2

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!”

2a

 

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.

3

 

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:

  1. The Baubles couldn’t be controlled by the user.
  2. When selecting lights the baubles would changed to lights, and the lights were much better. You couldn’t have both.
  3. 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…

It was fun experiment and will lead to more, and it was a great way to launch our newsletter. Which you can sign up to here.

And 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

 

Thanks for reading.

Kristian