Blog: Tips & Resources

In recent weeks, a couple of our customers have contacted us to report that links in their email campaigns have suddenly reverted to a default blue color in Gmail. Upon discussion with these customers and a little testing on our part, we found that any link with either style="color: #000000;" or a { color: black; } applied was having the color CSS property stripped from their code - therefore allowing Gmail's default stylesheet to go to town with their design.

While it's annoying that Gmail should make this rather arbitrary change, thankfully there's an easy fix. Cool customers Wilbert Heinen and Benjamin Kinzer both came up with the same solution - use a link color that's black, but not quite black. For example:

Alternately, you can use color: #000000 !important;, which oddly enough, doesn't get stripped out of the code.

In wondering what Gmail holds against the color black, we turned to Spinal Tap for answers:

When it comes to links in Gmail, anchor links can be 'none, none more black'.

Thanks to Wilbert and Ben for these fixes to a rather kooky new email rendering issue. If you see any further changes in Gmail, be sure to get in touch with us.

Remember that Pizza Express email that we featured in our 'Image blocking in email clients' post? The one that displays an impressive pixel-art fallback when images don't load? Well, our friends at Email Fail have found another impressive example from Mac. Check it out:

Images on:

Images off:

Given the amount of work put into this fallback, Becs at Email Fail is right to ask:

"I wonder if the general public will ever appreciate this as much as us email designers?"

Perhaps this is a clever shout-out to folks like us - an easter egg to those who intentionally turn off images in the inbox, a maker's mark amongst makers. To the Mac email designer, we tip our hats to you. Your efforts have not gone unnoticed.

For those wondering, this fallback is achieved by adding carefully cutting the image, assigning the pieces to individual table cells, then adding a bgcolor="" to each cell. Style Campaign has a free app for automatically converting images to HTML pixel-art to create a similar effect.

Thanks to Email Fail for sharing this full-of-email-win newsletter design with us!

We've posted a few general tips on how to avoid looking like a phisher, but this one is quite specific to senders using a @gmail.com or Google Apps-managed "From: address"in their campaigns. Recently, emails with @gmail.com From: addresses which did not send from a Gmail mail server have been flagged with the following warning in the inbox:

"If you're sending Gmail messages from anywhere other than Gmail itself, they may look like phishing attempts."
-'Stop Looking Like a Phisher in Gmail', Lifehacker

Soon after a customer mentioned seeing one of these scary messages, Lifehacker posted an example, explanation and fixes in their post, 'Stop Looking Like a Phisher in Gmail'. While this information is relevant when sending from a regular email client, there's only really one way to avoid these warnings when sending from an email marketing service like Campaign Monitor. That is, use an address other than an @gmail.com address. Or any webmail address, for that matter.

Walk away from webmail addresses

This warning is only one example of how webmail clients are trying to protect their customers from spam and web threats. After all, phishers very commonly use fake From: addresses / spoof mail headers to masquerade as legitimate senders. Gmail has good reason to look dimly upon email that's labelled as coming from them, but isn't being sent from their own servers.

We encourage our customers to avoid using a webmail address as their From: email address. Undoubtedly they will trigger warnings like this and potentially, deliverability issues in the future. Instead, we highly recommend purchasing a domain name from a registrar like Namecheap and setting up a you@yournewdomain.com -style email address. It's still okay to have this domain forward inbound mail to a webmail address, or alternately, you can use Google Apps to send and manage email from this domain directly. Note that Google Apps domains have also been known to throw similar warnings - to avoid this, it's a good idea to setup email authentication, which we'll go through in the next bit.

Don't forget to set up email authentication

Finally, we'd like to remind one and all to authenticate their sending domain in their accounts, especially when using Google Apps to manage their email. In essence:

"All the large ISPs are using email authentication as an important layer in their spam fighting arsenal. By setting up this system as an authenticated sender, you can instantly bypass certain filters, giving your campaigns a better chance of arriving in the destination inbox... Many ISP's like Yahoo! and Hotmail will flag your email as authenticated, which helps to build trust between you and your subscribers and improves the chances of your emails being opened."

It only takes a few minutes for you, or your technical team to setup email authentication, but ensuring that your subscribers and ISP's know that your campaigns are definitely from you is well worth the effort.

Finally, If you have any questions about email authentication, get in touch with our team - we're here to make sure your campaigns not only look good, but make it into as many inboxes as possible, too.

I know what you're thinking - just as we're coming to grips with optimizing our email newsletters for mobile, suddenly we have tablets like the iPad and Kindle Fire to make things interesting again. So here's the good and the bad news. The good: if you've already created a responsive design for the iPhone, then adapting this for the iPad and similar devices is dead easy. The bad: it still requires extra testing, coding and sooner-or-later, it's going to be what all your clients are asking for.

Before we provide any solid answers on whether or not we should all be optimizing our email campaigns for tablet devices, lets look at their uptake and some basic techniques for adapting your design for small, yet not-so-small screens.

Why optimize for tablet devices?

The skinny is that tablet devices are getting popular. I'm sure you know of more than a few people who begged for Kindle Fires for Christmas, then got slipped a Motorola Xoom by Santa instead. Or snapped up an iPad 2 the moment they were launched. Our friends at Return Path collected the hard numbers in a recent report, citing:

"In our last study we reported a 15% increase in iPad use relative to iPhone use... What we find is that the use of iPads has exploded – with an increase of 73% in email views on iPad devices between April and September of 2011. Email views on the iPad jumped by 12% between March... and April, then continued the steady climb upward."
- 'Mobile, Webmail, Desktops: Where Are We Viewing Email Now?', Return Path, 2011

In June 2011, we found that iPad usage accounted for almost 15% of opens tracked on mobile devices and 3% of email opens overall. Given Return Path's recent findings and our own observations, this is rapidly growing and potentially cannibalizing iPhone market share while it's at it. We'll be sure to provide usage stats for other tablet devices as they come to hand, so watch this space.

Adapting mobile code for slightly larger screens

As mentioned earlier, if you're already in the habit of optimizing your campaigns for mobile screens (or have exported a template from our template builder), then you've already done most of the legwork. What's remains is the addition of a slightly different @media query, targeting the display dimensions of tablet devices. Here's a typical @media query for mobile devices, followed by the adapted equivalent for the Kindle Fire, iPad and Xoom:

The good team at Email on Acid have a brilliant summary of all the different @media query combos you can use to target specific tablet devices (and orientations), however for the sake of brevity and maintenance, it's probably worth focusing on 2 generic ones like in the sample above.

If the above is a bit of a mystery, I highly recommend reading our 'Mobile Email Design in Practice' post, as well as creating and exporting a template from our template builder to see how it all clicks under the hood.

So, should I rejig my email design for tablet devices?

Ultimately, this decision should be made by consulting the email client usage report in your Campaign Monitor account. For example, 4.9% of all opens for our recent December newsletter originated from an iPad. In March (when the iPad 2 launched), this figure was 2.7%. In 9 months, the iPad's share of opens has nearly doubled. That indicates to us that even if the iPad is a minor player in the email client scene at present, it's probably not going to remain that way for good. Either way, having the know-how when it comes to optimizing your email campaigns for tablet devices is going to become an increasingly sought-after skill in an email designer's stable, so it makes good sense to test out these techniques now, before your clients force you to.

Do you optimize your designs specifically for tablet devices? Do you have any great tips? Let us know in the comments below.

You know what I love about the beginning of a new year? Things like resolving to try something new, the sense of turning a new leaf and the desire to start something fresh. So I thought we'd round-up a couple of our favorite emails around the theme of 'new beginnings' - let it be the launch of a new site, product, or moving to a new space. Lets get started.

Cabedge: Putting personality into it

A few months ago, our great friends at Cabedge launched a radically new company site. So radical, that they decided to send this proactive campaign in anticipation of what their subscribers would say. They're a funny gang and know it - the 'Top 5 beefs' does as much in the way of sharing their identity and brand of humor as inducing people to visit their site. Ten points for personality, a lovely layout and nice use of type, I say.

Alertful for Business: Graceful in all conditions

Talking about uplifting, here's a great example of a launch email that sure may look detailed, but comes back down to earth gracefully when images are blocked. The use of 'backup' calls to action (note the red 'Click here to try the service for free') is a technique we don't see enough of - but undoubtedly does its part in pushing response rates sky-high. Great work by the Email Spring team!

Flexibits: Focused on one task

When it comes to email designs, we've always said, 'keep it simple'. The Flexibits campaign designed by Komodo Media is a perfect example of this in practice, with its easy-to-skim message and a single call to action ('Grab a Free Trial!'). There's absolutely no visual clutter, or confusion as to what the email recipient should do after receiving the message - which I'm sure was their goal to begin with.

Different Projects: Picture this

Now, I know what we say about images in email (ie. be careful, they often get blocked), but this campaign by Different Projects has added some really eye-catching ones to great effect. The text-boxes tacked on top of the illustrations give visual depth to the design. As they contain actual text, won't disappear when images are turned off.

All around, a great way to announce a move, while wowing clients with a little creative flair.

Virb: Getting the message across

Finally, I wanted to showcase a corporate-style campaign. One that carefully balances copy with visual elements to communicate detailed information. If only to prove that such a thing exists. Duly, I came across this email announcement by Virb, which has a serious side, but doesn't forget to have a little fun while it's at it.

In appearance, it's totally austere - all clean lines and shades of business-like blue. But the text is full of personality, easy-to-read and is complimented by images of their upcoming product. It's almost the opposite of what many of us imagine a corporate email to contain: stodgy layouts, stock photography and endless columns of teeny-tiny text.

Hopefully you've enjoyed our brief round-up. If there are any particular themes you would like to see us cover (eg. emails for hotels, charities etc), let us know - we'd be happy to shine the light on some great examples for you.