Big bad ugly blue links

One of my biggest pet peeves with designing for email, is how some email clients automatically take some text, such as "wibble@test.com" and turn it into a link without asking first. If you've gone to the trouble of adding color: #cc0000 to all of your text links, why overlook just one more? Perhaps you didn't want it to be a link but didn't consider how a client like Outlook 2007 would take the initiative?

Let's take a look at a disclaimer / unsubscribe message as an example. Whichever system you're using to send your mails, you should have some kind of pre-population available. So your unsubscribe message could look like this:

If you no longer wish to receive emails from Monkey Widgets Ltd, reply to this email with 'remove {email}' in the subject line.

Where {email} is the recipients email address.

Outlook 2007 would do this:

If you no longer wish to receive emails from Monkey Widgets Ltd, reply to this email with 'remove jo@bloggs.com' in the subject line.

Rather than leave the personalised text open to interpretation by those pesky email clients, just turn it into a link and force the colours you want. In this example, you may just want it to look like part of the text around it, in which case text-decoration: none is your friend. Just match the colour and away you go.

<a href="mailto:{email}" style="color: #666666; text-decoration: none;">{email}</a>

Nothing groundbreaking, just something to think about! This is something I now do for every client where they don't have a specific unsubscribe page set up (but have a system in place to capture unsubscribes from replies) more for the sake of completeness than anything else.

It's the little things that count after all!

Using inline styles to spruce up alt tags

Every designer out there should be aware of the fact that not every recipient of your emails is going to have images enabled by default, the net result being that a viewers first look of your deliciously gorgeous email could instead be littered with those hideous broken image place holders we all know and love.

On the plus side, there's a way around this assuming your viewer is using a web based email client such as gmail and certain browsers (but there's really no excuse to not do it anyway), gmail applies inline styles to alt tags, so you can set font size, font family, etc. and know that in place of images, it'll display your alt tags as an alternative in a style you can control.

I think a few examples would serve to show what on earth I'm going on about here, take this hastily created email template:


This is how it would look with all the images displayed, but as we already know, this isn't likely to be how most people will first see it.

This, however, is:


See what happens? We've kept the padding-left: 10px; intact but beyond that, there's no other styles set up on the holding table cell.

So, what happens if we add the following: font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #ffffff; font-weight: bold;

Well, this happens:


You can see how the alt tag on the image has been styled using inline styles on the holding table cell.

Hopefully that gives you a few ideas to work with and hopefully you'll find that there's no reason why your emails shouldn't look good without images.

Blogger I'm not, enthusiast I am

Hello one and all, a quick overview of what this blog is about and what right I have to be writing it is in order I guess.. for starters, I'm what I'd call a Web Designer, but the truth of the matter is that I'm a bit of a jack of all trades / master of none... except 'master of none' sounds a bit crap if I'm honest... how about 'master of a few things and an eager enthusiast of the rest'?

I got into email marketing purely by chance, looking for work as a middle-weight web designer, I found a job advert describing the kind of work I wanted to do, turns out it was for an email marketing agency based in Manchester. Turns out they were as interested in me as I was in them and they promptly hired me.

I've now been working as an email designer for a little over 2 years and I figured it's time to share some of the tricks and tips I've learnt. Don't expect any ground breaking material, just content from someone interested enough in the subject to scribble their thoughts down for others to read. I might occasionally dabble in a little bit of discussion about new developments in the world of email marketing but for now, I'll just stick to the technical crap.

On the list of things to do... put together a new template for this here blog, I love the standard templates but they just scream...well... 'standard'... and what better place to have a little dabble in design than your own blog?

Lastly... the title of the blog, I'm open to new ideas as 'an idiots guide to email design' isn't the most inspiring blog title but on the other hand, it does exactly what it says on the tin. Can't complain with that really.