Image swapping on mobile done easily

Standard

Just a quick post, a way of changing images without much hassle.

This uses a CSS pseudo elements. We hide the desktop image and simply use the a:after pseudo element within the media queries.

Stick this into your media queries (Also have a method of hiding images on mobile)

#swap a:after {
content: url('mobile image link');
}

Add this to your HTML.

<span id="swap"><a href="##" style="text-decoration:none !important;"><img alt="alt tag" border="0" src="desktop image link" style="display: block" class="hide"></a></span>

I’ve only briefly tested this on iPhone, let me know how you all get on!

Hidden preheaders – save screen real estate

Standard

There’s been a lot of talk recently about mobile emails. Specifically subject line length, preheaders and how to leverage them both for maximum results. Subject line length varies across mobile devices, as highlighted in this excellent infographic from Mass Transmit, but the one thing that’s for sure is the amount of characters you can use is a lot less than a traditional desktop-orientated email.

This is where the power of the preheader comes in, it allows you to continue your subject line and provides you with an extra chance to entice readers into opening your email. Here’s a random snapshot of my mobile inbox and how five random emails have setup their preheaders:

Preheaders

The negative side to preheaders is the valuable real estate they take up on the screen. For this post I’m going to be using the free mobile optimised template I created as an example. Below is a side-by-side comparison to how both the desktop and mobile version of the email look with and without the preheader.

mobile-preheader

desktop-preheader

Although the difference isn’t huge, it still takes up screen real estate.

A workaround

So, if you would like to use preheaders as a continuation from your subject line but don’t want them taking up space, the solution is simple.

Add this to your area:

<style type="text/css">
span.preheader { display: none !important; }
</style>

And set your preheader up as this:

<span class="preheader" style="display:none !important;">Preheader text goes here</span>

This will hide your preheader inside the email on both desktop and mobile clients while still displaying in the inbox.

The trick to working background images.

Standard

Backgrounds and the issues with them

When I first started making emails I was told categorically that we can’t use background images. It just wasn’t possible. Until one day I stumbled upon this blog by Elliot Ross which shows you how to get full screen wallpaper style background images working in all clients.

Perfect right?! Wrong!

The issue then comes with Outlook 2007 and 2012 which both choose to add a 15 pixel piece of padding at the top of their emails. This means that when you create your beautiful background image that looks all lovely and jazzy your actual content will sit 15 pixels below the background image, potentially ruining the design like so:

Broken Background

A fix, you say?

There is, however, an easy way to work around this which only requires a little extra effort on your part!

When saving your background image, move it down 15 pixels and save a second copy. You then add this snippet of code into your head tag:


<!--[if gte mso 9]>
<style type="text/css">

body {

background-image: url('YOURLINK');
background-repeat: repeat-y no-repeat;
background-position: top left;
background-color: #HEXCODE;
background-attachment: scroll !important;
margin-top:0;
padding:0;

}
</style>
<![endif]-->

This will tell your email to open up the background with the 15 pixel “buffer” at the top if viewed in Outlook 2007 or 2010. You’ll also notice that we have to set it to repeat on the y axis. If you do not set this, your background image will not load. Now, here’s the picture with the email working as it should!

Working background image

Things to remember when picking a background image for your email

Test, test and test again! – Test it on email-testing software such as Litmus or Email on Acid. Test it with test emails. Get a colleague to test it. I can’t stress this point enough!

Play it simple – Simplicity can be beautiful, background images in emails work best with a small texture or basic graphic. If you start to design a fancy 3D background with all the works on it remember to think about issues such as. Will the user see this in all it’s glory on a smaller screen? How will this look in the preview pane? etc.

Loading times – Wow, that’s an amazing background! However, does it take 20 seconds to load? If so, you’re not onto a winner there.

In conclusion

I’d love to hear about your experiences with background images and your thoughts on any points I’ve raised. I will read and respond to all comments.

Welcome, welcome!

Standard

Welcome to the grand (sort of) opening of the Team Email blog! I hope you’ll follow it and benefit from it. Here you’ll find all kinds of tips, tricks, resources and sarcasm as we fight to tame the beast that is email marketing. We’ll do our best to keep this updated. Be sure to follow me on twitter too!