Browsed by
Tag: Digital Marketing

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

 

Can you put a hedgehog in an email?

Can you put a hedgehog in an email?

Taking the classic question all email geeks will be familiar with. “Can I put a video in an email?”, I decided to replace the word ‘video’ with first word that sprung to mind at that moment, ‘hedgehog’. (That is not true)

*I feel at this point I should point out that this is purely an experiment and not a real email, this is all part of personal research project, I’ll be receiving no financial recompense. It’s just for me and the #emailgeeks.*

I’ve been on a bit of a mission recently trying to explore “gaming” in email, and it ties in somewhat to some of the things I was looking at when I created the Interactive Tree. I feel that “gaming” in it’s true sense can obviously be limiting. For example what if the situation arose where we try and promote an actual game… could we do that justice with interactive email? (like Sonic The Hedgehog for example) how far could you realistically go with it? and what could be a good way to do it?

We’ve already seen some innovation in gaming emails in the past with Mike Ragan’s Transformers Pixel-art. But other than that I don’t recall seeing much worthy of remembering.

I started to think about HTML banners, CSS animations, and those interactive/animated adverts you get here and there, and how perhaps a simplistic nod to the game might work, and began to sketch out ideas. I chose Sonic largely because as a boy I was Mega Drive kid, and loved Sonic 2. I also felt that the platform simplistic nature of the early versions would work (it really could have been anything though… Mario, Dizzy, Chuckie Egg. I must again stress that in no way have SEGA or Sonic The Hedgehog been involved in this, I used the theme of Sonic purely for experimental purposes).

So first up, I made a list of key Sonic traits and these were. Running, jumping, rolling, spinning, and moving fast, collecting rings, landing on spikes, drowning, quirky 8-bit music. Awesome. I then started sketching some VERY rough ideas. Below are some of the later sketches.
Beautiful right?! (and a textbook mug of tea stain)

sketches

 

I then went on the hunt for assets. Thankfully there are loads of sprites out there for this sort of thing, so I found one suitable and easy to work with and then went on the lookout for assets to create the setting/background.

The first thing I had to do was to start setting up sprites, choosing sizes, this was all pretty easy, but creating the backgrounds for Sonics “Green Hill Zone” was one of the most time-consuming parts of all this. Sonic’s worlds are not flat, and I wanted it to be flat/level more for my own ease, and to keep things simpler, so I began slicing up sections and trying my best to merge them together to create a flat version. Here’s part of it.

green_hill

 

I went in to this knowing full-well I’d be targeting Webkit and using Absolute position in this which if something like this were sent it would give Samsung Native apps some problems, but I can target that, so didn’t hold back.. But obviously being an experiment it wasn’t a problem.

I decided to initially break what I had planned in to three parts, and build each section individually – and then try to connect them up in one html afterwards. So I made the first section. The Entrance, and this would largely create the settings for the rest as well.

diagram

 

Entrance


The Entrance

For this section I wanted Sonic to enter the frame from off-set, as you can see above I still have the initial sketch I did for planning the layout for the whole thing, (I’ve gone over the key bits for the first frame in Pen). It was all largely straight forward. The key was having the Sonic animation, and the container around Sonic. So then each element could be controlled individually. The container moves to it’s position from off-set and the background sprite plays while it happens.

The main thing to be aware of here was really with the title. From what I can tell you can’t go from “Display:none” to “block” and vice-versa in a keyframe timeline. So I got around this with the title by setting it’s height and width to zero, and then changing that in the keyframe.

Once I’d done this I was a little torn with what to do from here, as it would take me in a direction. I didn’t want to try to define controls and have him move around at the users will. I felt this although quite a cool option, this would fail in the expectations of the user. I’d considered it for a while but in the end I stuck with my initial plan.

The Entrance section didn’t change from my first version.

 

Original Run Sequence

Run

From here it was largely straight forward…. Press run, hide the ‘entrance’ stuff, show the ‘run’ stuff. Key difference is Sonic’s container no longer moves, but the background moves instead, and the new sprite plays. I then created the sign to drop down in the keyframe timeline and programmed a jump button to appear, where the “run” button was previously.

 

Jump

Jump

Again this was similar to the ‘Run’, I swapped the background to one with spikes, and the key difference is in the timeline is getting the sprite set-up correctly was a bit fiddly, I even remade the background and moved the spikes around a few times as I worked it out. And then making Sonic’s Container move up and down, along with the sprite animation to jump over the spikes. It was largely lots of back and forth.

Not Jump 

So this is where I had to rethink things and go back. Throughout the process so far I’d been using  ” #foo:checked ~ * .foo{” (so when the box is checked, make this happen).
My plan for “if they don’t press jump” seemed simple enough, ” #foo:not (:checked) ~ * .foo{“. (Seems obvious now)
I didn’t pre-empt that during the entire animation that the “Jump” checkbox would not be checked, and as I started to bring all the pieces together I quickly realised this, and that things like the the sprite of  Sonic running in to the spikes would be showing throughout. I tried to find a way around it, but nothing was working well enough.

I know the obvious thing to from the start would be to have a long-timeline in which you press run, and eventually at the end of it Sonic would run in to the spikes if you didn’t press jump. This is what the final thing ended up being. But I was aware this was going to have to utilise a lot of images (the ratio and weight, goes against my better judgement). This method mean’t I’d need “a big old background” for the run section.

final_run

Rebuild the Run Section.

So the Run section was rebuilt and slotted back in, and became a long section, and the background image was much longer and bigger.
I knew this would have an affect on load up time, on the press of “run” so I added them in to the body of the email and covered them over with flat colour so they start loading up from the start. Which seemed to help, in a similar way to a pre-loader. I also lowered the quality a little and ran them through optimisation a few more times than I would have liked.

gameover

Ending signs

This is pretty simple. They are images that are the size of the frame, set inline as “a tags” with IDs, and in the embedded style for the control of them. They are both set on a timeline to drop down over the frame after a certain amount of time. In the case of ‘Game Over’, it will drop down after 11 seconds after pressing the run button, and in the case of the ‘Play Sonic on your phone’ it drops down 4 seconds after the jump button is pressed, and if jump is pressed the ‘Game Over’ doesn’t happen.

The plan would be to link “Game Over” to the online version of the email, and link “Play Sonic on your Phone” to the app store.

Conclusions and other things

There is still plenty to do with it, but as it’s just an experiment I’ll gradually pick bits up here and there as I go along.

  1. It hasn’t felt as smooth as I initially had it and I guess that is largely  down to weight, and timelines, but some of that I can’t afford the time to fixing. I partially feel like I was as happiest with it when I had it at a point where it was really simple and Sonic just kept running until you jump… The whole thing worked well and although simple, it was quite nice.
  2. Mike Ragan, pointed out to me that the ending wasn’t right and that Sonic should Jump through the big golden hoop like he does in the game at the end of a level. This idea I really like, and now it annoys me a little that it doesn’t do this, however I couldn’t really spend too much more time on this and I could probably quite happily keep working on it forever if I had the chance. So I’ve left that out. (sorry Mike)
  3. I think one of my biggest frustrations with that I haven’t really sorted out yet is the ‘Jump’ button. Again because timeline doesn’t support transition between display:none and block. It’s always there, but the opacity changes. So I want to work out a better way of setting this up when I get chance, probably utilising the same height adjustment method I used previously.
  4. The other thing is, it’s pretty tiny outside of mobile and of course it’s largely all images. But as an experiment I’m pretty pleased with it. I like the fact it’s still an advert, and promotes the game. It doesn’t distract from that end purpose. Which in my research with the Tree and this, I think it’s a different approach to a similar idea.
  5. Oh and -MOZ- doesn’t support background animation in a keyframe as far as I’m aware… Obviously the build is for webkit. however for view online I’d have to have a look at the “jump countdown”  This could easily just be a .gif or change the messaging perhaps.

Give it a go. View it here 
(Open it in  Chrome or Safari)

So that’s really it, still a few bugs to work out but that’s about it. All it needs now is fallbacks, and any surround/fallback design, hacks putting in for Samsung Native Webkit and then it’s a functioning email.

We’ll be making more fun things, that we might send out so sign up to our emails here

Thanks for reading.

Kristian

@joon82

 

sonic_die

THE GREAT FLASH CRASH

THE GREAT FLASH CRASH

It was the summer 2015 that saw Mozilla FireFox withdraw support for Adobe Flash and in doing so begin the irreversible move towards HTML5 within the advertising community. Up to that point most agencies had done their upmost to avoid adopting this new technology, siting investment costs and lack of perceived support across browsers. It was considered that HTML5 was only really necessary where Flash couldn’t be used, such as mobile advertising, where Apple had a huge market share.

In truth, people felt safe within an encapsulated environment that ran consistently across all browsers and had done so for a decade.

We couldn’t say we didn’t see this coming, Apple were lambasted for their refusal to offer Flash support on any of their iOS devices due to a perceived security risk, eventually conceding after petitioning by Adobe to allow app development only via Flash Air publishing which was considered more secure.

The whole reason for the shutdown was Adobes admission that at least three unpatched Flash exploits had been used by a group in Italy to steal around 38 million usernames and encrypted passwords. FireFox and Google soon after decided enough was enough and shut the plugin support down. Between them we are looking at around 50% market share globally of all browsers so this was always going to be big.

The chain reaction was huge, agencies desperately trying to find resource that not only knew how to code in HTML5 but also understood development for advertising which comes with it’s own set of rules and idiosyncrasies…

6 months previous to these events, TWO had been approached by a key client to look at producing HTML5 content for mobile advertising. Traditionally they had only deployed animated GIFs to this platform on the advice of their advertising agency, but being leaders in their particular sector they were looking to break new ground and so approached TWO to explore the possibilities as a global digital partner. After some period of R&D a frame work was developed along with a development methodology. In all this took around a month to perfect. In the coming months we were also invited to produced two campaigns in Flash off of the back of our willingness to support HTML5.

When the news came through about Flash our hard work of the previous few months paid huge dividends, as we were able to support our client and their advertising agency in transcoding more than 150 ads in the space of a month, ensuring maximum engagement whilst many competitor brands had to revert to animated GIFs for the interim period.

Today HTML5 plays a huge part in our business offering, and we now offer an interactive platform free of charge to our clients that allows them to amend content live on their published ads and collect live data.