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!

First Freebie Template

Standard

Hey guys!

As promised on Twitter earlier this week I have got a free email marketing template to give out today! It is not the most spectacular looking email as I’m not a designer, only a developer. However, I plan to give one of these out every week or fortnight depending on how busy I am so expect them to get stronger and stronger as I do more and more. I’ve also not built many templates for the general public so apologies if you get a bit muddled up with my some-what unconventional coding style.

This template is completely free to use, redistribute or do whatever you like with. All I ask is that if you do decide to redistribute don’t claim credit.

You can download the template here. It should render correctly across all major email platforms and is also responsive for mobile, if you have any issues with certain email clients write a comment at the bottom and I’ll assist you in any way I can.

It’s meant to be a basic welcome email template but can be adapted in any way.

Here’s how it looks (larger copies below)

Preview

Click here to see the mobile version
Click here to see the desktop version

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!