Browsed by
Author: admin@two-uk.com

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

Backgrounds for email: Part 3 – Vector Markup Language (VML)

Backgrounds for email: Part 3 – Vector Markup Language (VML)

There are a lot of things you can do with VML, like word art, shapes and all sorts of things, but unless you’re doing something really quirky just for those Outlooks, and unless you have a lot of spare time, then why would you?

I’ve covered off sections relating to VML Considerations in part 1 and part 2, but this was related to background images. In part 3 I want to highlight an alternative by looking creating VML gradients.

Why would you bother?

Recently I have been working a lot with a brand that uses a lot of background gradients in their designs, and in certain circumstances I’ve used background images (perhaps where there is one gradient section), and in other circumstances (where there have been numerous),  I have simply created the CSS gradients in the embedded style to keep things simpler and lighter, which i prefer.

Because I’d started moving towards more lightweight solutions for these templates, and the client had a large Outlook customer base, I figured if I could create these solutions in CSS, I should create then in VML as well as I knew it was possible.

Create the Gradient

It;s pretty much the same as adding a background image, or creating a VML gradient for a fallback button. In this example I have recreated a simple vertical gradient, running from one colour to the next. The crucial bit is all in the V:fill section. You set your two colours and then you toggle with the angle and the focus to create what you want.

<!--[if gte mso 9]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" 
stroke="false" style="width:600px;height:338px; padding:0px; margin:0px; 
display:block;" inset="0,0,0,0""><v:fill Type='Gradient' 
Angle='0'  Color='#007fcc' Color2='#003196'  Focus='0%' />
<v:textbox style="v-text-anchor:bottom;" inset="0,0,0,0">
<![endif]-->

Angle
Angle is self-explanatory. You change the angle according the reflect the gradient direction you require.

Focus
Focus is the starting position. The default is 0, but values range from 100% to -100%

grds

 

What else can you do?

If you feel like experimenting with these a little more you can take them up a level, and looking at some of the sigma gradients.

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" coordsize="21600,21600" style='width:600px;height:350px' fillcolor=#446674>
<v:fill method="linear sigma" angle="45" color2="#000000" focus="100%" 
focusposition=".5,.5" focussize="0,0" type="gradientRadial"/>
<v:shadow on="t" Offset="0pt, 0pt" />
<![endif]-->

The code for these is a little different, but they’re quite interesting to mess around with. For these the ‘method’ changes to linear sigma, I have a ‘fillcolor’ set, and then just a ‘color2’. Again you can adjust the focus, and the angle as before, but with these you can create some interesting effects by using ‘focusposition’ and ‘focussize’

Focus Position

Like with Focus this is about the starting position/centre position for the gradient. But with radial gradients you can set two positions. from the left and from the top.

Focus Size

The values are fractions of the width and height of the shape. The first is a percentage of the fill to the right edge of the shape and the second is a percentage of the fill to the bottom of the shape. The default value is 0,0.

radials

I’ve mocked up a few examples, but it’s worth having a play around with them as you can create some nice textures and effects with them. You can also use these in ’roundrect’, and add in ‘v:shadow’ as you can see in the code below.

<!--[if gte mso 9]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" 
xmlns:w="urn:schemas-microsoft-com:office:word" style='width:600px;height:350px' 
arcsize="4%" fillcolor="#446674">
<v:fill method="linear sigma" angle="270" color2="#000000" focus="100%" 
focusposition=".4,.8" focussize=".4,1" type="gradientRadial"/>
<v:shadow color=#333333 on="t" Offset="10pt, 10pt" opacity="40%" />
<![endif]-->

Give it a try, let me know if you come up with anything cool, or anything to add.

You can access the @litmusapp builder file here

Kristian

@joon82

Background Images: Part 2 – Full Bleed Emails, VML, and OWA

Background Images: Part 2 – Full Bleed Emails, VML, and OWA

litmus

Following on from Part 1 of my blog post on background images, part 2 focusses largely on the considerations behind full-bleed backgrounds, and just finishing on a couple of other frustrations with VML and OWA you might want to be aware of.

Full Bleed Backgrounds

A simple method for adding more texture and depth to your designs, and break-away from the usual containers is to use a background image that spans the entire space of the viewing pane. I explained at #LitmusLive that my key considerations for this are:

  • Have as smaller image as possible in terms of weight.
  • Ensure that image is designed to repeat well if required.
  • Don’t base your entire design around this. Use it for enhancement.

Using backgrounds in this way becomes very simple, and doesn’t take long to implement. Much like the Litmus example above, which illustrates this point perfectly. There are a couple of quick ways to do this.

.bg {background: url('yourimage.png'),
     linear-gradient(-25deg, #262e45 0%, #222635 100%);
    }

The easiest way is to simply host the image, and add it to in the <style> of the <head> of your email. This has limited support, and won’t give you support on “Those Outlooks” and Gmail for example, but it’s a quick and easy way of providing an extra attack on the senses without having to spend too much time on it. Where the method is not supported it simply won’t appear and will gracefully degrade back to a flat background colour.

Speaking of which, you may have noticed that Kevin used a transparent PNG, and then applied a CSS gradient behind it, which also will fallback to flat colour where unsupported.

The inline method is somewhere which will offer you a little more support. You can use backgrounds.cm to set this up for ease, and this will save you the hassle, and will provide you with VML required to make it function in “Them Outlooks”

Keeping it Simple(r)

The reason I tend to stick to the 3 bullet points as rules, is to keep it simple(r) (and I have Outlook users to consider). I still believe for ideal user experience layout images (rather than content images), should still be used in this environment (unless you really know where your audience is going to open your email). This way you’re not chancing key pieces of content, key imagery, not displaying and affecting you’re overall build.

There are many fine examples of beautifully designed emails that feature a full-bleed content background images. But they are not without their issues, such as “Them Outlook versions” and “Those older Outlook Versions” squashing the images, or not rendering consistently on opening, or zooming in, or the image potentially adding significant amounts of weight to your email (if you’re not treating them right), as you’re likely to need something around 2000px wide.

If you’re looking for more my favourite approaches to full-bleed email background I’d suggest looking at Campaign Monitors and Taxi For Email’s newsletters. Key thing for me is they have chosen their images wisely. It provides them with flexibility.

The biggest issue you’ll find is in Outlook Web/365/.com (whatever it is right now).  The lack of support for “style” in background images in Outlook Web means you can’t control it, and depending on how the big/wide the viewing pane is, the content that sits on top will be in the wrong position (like below).

robot_owa

In my opinion if you are going to start diving in to full bleed emails with content; know your audience, plan ahead, think about the overall weight, but think about the overall user experience. How does it render in version of Outlook(s) at different sizes of viewing pane. You can’t just rely on your testing subscriptions for this, you need to do more thorough testing on devices and inboxes to be fully confident of their functionality. If it doesn’t render quite how it’s supposed to is the content still accessible.

You could however think about having an outlook fallback that is a restricted width. I have seen examples of this. (See the Taxi for Email Newsletter)

That being said if Outlook isn’t much of a consideration, or you have some flexibility that it doesn’t have to render perfectly to plan everywhere, then go for it.

Hopefully if the web versions of Outlook perhaps get some bugs fixed, this sort of issue will  start to go away and will be a significant step in the right direction.@litmusapp @caithartMSFT

Using ‘Cover’ and Full Bleed Backgrounds with content images

Other than some of the versions of Outlook, what else needs to be considered if you are to start thinking about using content images as full-bleed backgrounds.

Gmail

(please note that since writing this, Gmail has started supporting ‘background-position’ and ‘background-size’)

One thing I mentioned in part 1 of these blogs, was that Rémi Parmentier @HTeuMeuLeu discussed briefly at #litmuslive that background-size:cover was supported in gmail if it was set-up as shorthand.

The one thing I tend to stress with using ‘cover’, is that it will full the space and zoom-in/crop off the sides in order to fit the space (also mentioned in part 1). So depending on height of the space that it is filling, you’re going to need to still plan ahead with the images you use, and experiment back and forth to achieve the results you want. 

For this experiment I used an image that is 2000 pixels wide in a 600px hero section. You can see below that this methods works in Gmail app and the Yahoo Mail app.

robotcover

(Please remember that a non-gmail account on the gmail app will not render a background image).

<td bgcolor="#000001 " valign="top" background="yourimage.jpg"
height="auto" style="background: url(yourimage.jpg) 0 0 / cover; 
background-size:100%; max-width:600px; background-repeat:no-repeat !important; 
background-position:center top;">

Taking this to the next level and using the image as a 2000px full-bleed background, we have to change things a little. I’ve added what I did here, feel free to have a look at the code (it’s not the tidiest of code, lightweight code, or the most precise, it’s a bit over-coded, but I will go over the key parts).

The first thing is the set-up of the image itself. Again I’m sure I’ve probably over-coded this, but it’s just a dummy for testing.

<td class="yhoofx bg_cov owaoff" bgcolor="#000001" valign="top" background="http://kristianrobinson.co.uk/was-looking-mr-robot-fullw.jpg" 
height="auto" style="background: url(http://kristianrobinson.co.uk/was-looking-mr-robot-fullw.jpg) 0 0 / cover; background-size: 100%; 
background-repeat:no-repeat !important; background-position:center top;" >
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;background-size:cover;background-repeat:no-repeat;"padding:0px; margin:0px; display:block;" inset="0,0,0,0">
<v:fill type="frame" src="http://kristianrobinson.co.uk/was-looking-mr-robot-fullw.jpg" color="#000001" position="0,0" />
<v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;">
<![endif]-->
<div>
<div style="font-size: 0; line-height: 0px; mso-line-height-rule: exactly;">

 

Yahoo

As we know from the gmail test, the shorthand version of ‘cover’ works for the mobile app, but doesn’t for the desktop web browsers. Thankfully I didn’t have to do too much digging for this either as @ericlepetitsf and @stigm kindly mentioned the fix for it recently in a discussion (thanks for that guys, saved me a good chunk of time).

You’ll see in the class of the TD that ‘yhoofix’.

@media screen yahoo {
.yhoofx] {
background-size: cover !important;
background-position: center top !important;
}
}

 

(The ‘owaoff’ class is just to turn the background image off in OWA – it’s not necessary, but I thought I would share that hack for those that don’t have it)

OWA Style for Backgrounds. (lack of)

While we’re bringing up the subject of OWA/Outlook 365 not supporting background style this then means you can’t prevent repeating.
In the example below where the idea is that if content overflows beyond the background image size, the flat background colour (set to the match the very bottom of the gradient) colour expands beyond the space. (Which in theory should be a nice idea for self service templates). We can’t stop the image from repeating.

backgrepeat

What can you do for Outlook 365/.com/OWA?

The only solution I have managed to find for Outlook 365 using the [OWA] .foo hack are is to turn off the background. In this instance that isn’t such a big deal. But for the Mr.Robot full-bleed you are removing a content image.

Of all the Microsoft platforms, Outlook 365/OWA seems like something that Microsoft could be looking to fix quite easily and quickly.
So please submit the request for OWA to start supporting styles for backgrounds by emailing outlook@litmus.com
(remember to show example use cases of why background style needs support)

VML

Vile Malevolent Language* Or VML  as it’s more commonly known, is not exactly what anyone wants to be using, but in certain circumstances it is unavoidable.
If you have a heavy Outlook audience to consider I’m sure you’ll have had more dealings with VML than you care to remember and this might be something you’ll want to consider.

Sticking with the same theme, I had been working with VML where I wanted to use a background image, but wanted the height to be variable. With VML I had removed the height and instead used “mso-fit-shape-to-text:true;”.

The problem with not having a height in the VML is that in inboxes running on PC with Outlook using the VML, is that the preview pane truncates the content. This then resolves itself on opening the email an downloading the images.

The main issue is that I know many Outlook users will only ever use the preview pane to view their emails. I am one of them. I couldn’t find any way of resolving this other than adding the height back in, which I was concerned will ruin the flexibility. However if you keep a height in as well, you may need to adapt what the height setting is in testing the preview pane, but what I found is when you open the open the email, the “mso-fit-shape-to-text:true;” will sort it out for you.

*This is not what VML stands for.

trunacting

 

2013 extra spacing

If you find when using VML that you get extra space added on platforms such as Outlook 2013. You can reduce spacing like this by adding this extra ‘div’

extradiv

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" 
stroke="false" style="width:600px; padding:0px; margin:0px; display:block;"
inset="0,0,0,0"><v:fill type="frame" src="yourimg.png"
color="#b4db0a" /><v:textbox style="mso-fit-shape-to-text:true;v-text-anchor:bottom;"
inset="0,0,0,0"><![endif]--> 
<div>
<div style="font-size:0;line-height: 0px;mso-line-height-rule: exactly;">

 

Follow me on twitter @joon82

Thanks for reading.

Kristian

 

Background Images: Part 1 – Content Images as background.

Background Images: Part 1 – Content Images as background.

Backgrounds Title Header

To follow-on from my talk at ‘The Litmus Email Design Conference 2016’ (#litmuslive) I’ll be doing a series of blog posts covering background images. They’ll feature key design considerations, prevent time consuming frustrations, some simple code solutions and some additional ideas for things like progressive enhancement.

Increase your Design Opportunities.

Background Images in email have a mixed reputation. Depending on your experience and approach, they can be a pain to work with, and many people find them too time-consuming, add too much weight, and/or restrictive. If this is the case I think it stands to reason that designers and developers when time is precious can potentially do what they can to avoid using them.

But if you use them in the right way there can also be some real design benefits to using them over and above just being to add live-text over an image, such as:

  • Create impactful designs without using too many images.
  • Help to frame content and add extra texture and depth.
  • Increases your creative options
  • It opens the door to more emotional design.
  • Can enhance the user experience with minimal effort.

We now know that we have that we have to be very focussed with our content, and that we have literally seconds to make an impact, something like a background image could be a good tool to have, and use in the same way as websites do to draw your attention.

Because email rendering can be awkward, and support can be sketchy my ideal scenario is to use backgrounds that are layout images, so if the background or the image is not supported you aren’t losing any thing from your content. You’re then not relying on the background image to deliver a message.

However probably the most frustrating part of using background images. Is when you have to use content images as backgrounds. Especially if that is a full width header image.

Content Images as backgrounds.

So with this situation I always aim for the same result. And I think I have a simple method of achieving this. The key thing to remember is that, email doesn’t have to look the same everywhere. So in that transition between desktop and mobile, regardless of the image, I aim for my content to remain the same size/easily readable on mobile. Immediately you then have another victory over “burning” the content in to the image. It also provides me with a simple mindset, and solution to aim for that I can build upon with very little effort.

To start, the thing to remember is that background images can be fluid. This is roughly the code set-up I like to use.

core_code

I’ve then set-up my image, and added inside the VML <DIV> the content to go on top, and forced it in to the position I want, at the foot of the screen.
For this I have used a top padding of 180px, but you may prefer to use heights instead.

NOTE: As a side note for anything horizontal I have spacing <TD> because there is a glitch with Outlook 2013 where horizontal padding has a habit of not working inside the VML fallback.

desk_robot

GMAIL APP

(please note that since writing this, Gmail has started supporting ‘background-position’ and ‘background-size’ on gmail addresses)

At this point I would test it in the Gmail App. To see what kind of result I get. Because if it’s not right in there. There is little I can do about it.
Thankfully it works quite well, but if not, I would go back to the desktop and try to find a workaround. Perhaps by repositioning the text, etc…

(Not featured in this example, but when setting the content up, I will often to start by setting things up in 2 floating table columns, even if one is blank. This give me a column that will stack on gmail and i can sometimes use it to my advantage to position things and then re-control on other mobile platforms.)

I’ve also set the position as ‘background-position: center top;” which shows the central portion of the image. This is made easier because the key area of the content (Mr.Robot) is narrow. However as you can see with the other example (Silicon Valley). You’re really looking to choose the ideal portion from either left, center, or right of the image when it’s a “busier” image.

You can however as Remi Paramentier (@HTeuMeuLeu) said at the same conference target the gmail app, and apply ‘background-size: cover;’ in shorthand and gmail reponds to that. So that might be something you want to work with and try out.

gmail_app_position

CALC and the GMAIL APP

UPDATE: This is now probably more relevant when rendering in the Gmail Apps on a non-gmail address.

If you’re looking for more precise positioning, you can always use CALC inline to reposition the background, and then use a media query to reposition again on supported mobiles.
The support for CALC has been fine for myself, however I have some potential issues on older Android devices. Worth looking in to though especially if you have a right-hand side image like the one below.

The one thing to be wary of here, would be to consider your text positioning. If you were to put text to the left of the image, it would just move behind it. So keep your text, above or below.

calc

THE TRANSITION TO MOBILE

So as mentioned, I have a straight forward formula for mobile, and although there are other options. I tend to always immediately aim for 1 of 2 solutions.

Because I have a flat background colour applied behind the image, I simply allow the image to shrink down on mobile to see how it looks, and more often than not, the combination of the image shrinking down and the content remaining not at this point will force that background colour to appear from behind the image. I then used media queries (often padding) to force to the content on to the flat colour.

(if this doesn’t work for you you can always apply and flat colour behind the content using media queries and see how it works out)

The second thing I do here is once I have that version right. I then apply background-size: cover !important; as a media queries style to see how it looks when the image fills the space. This can be hit and miss, often depending on the amount of content. But it’s a easy thing to try, to give you a different result.

For the really awkward scenarios

If you get really stuck, there is one solution I have gone to in the past. But it does tend to leave you forcing the desktop on gmail, or targeting it with other gmail hacks. You can use media queries to:

  • turn off your background image
  • remove any fixed heights or padding from your content. Leaving just the content
  • Apply a flat background colour behind it.
  • Turn on a mobile version image of the background image.

So that’s it for the first part. It’s a basic premise. If you have anything you wanted to add, please feel free to let me know.

 

Next time around I’ll be looking more at the other part of my talk. Patterns, Enhancement considerations, and Layering of content.

 

You can access my slides from Litmus here

 

Kristian Robinson
@joon82