Stay Inspired

Our new button and background generators, taking the hard work out of HTML email

If creating beautiful emails is your calling, then listen in - we've just released a bulletproof background generator and button generator, as part of our whole new resource page. Yes, two tools for adding Outlook-ready email newsletters - and you don't even have to be a customer to use them!

Sending an email campaign that gets results across the most popular email clients requires both the right tools and a bit of know-how. So, while we've put our all into making Campaign Monitor a valuable service for designers and marketers, providing resources to help you make the most of your campaigns has always been a huge priority, too.

So, we're pleased to finally let loose a bulletproof background and button generator - alongside a huge bundle of resources - for everyone to use. Here's a quick overview as to how they can help you with your email designs.

Cut coding time with our bulletproof generators

If you've ever tried to code with Microsoft Outlook in mind, you'll know that frankly, it sucks. First of all, it doesn't conventionally support background images. Secondly, the VML code required to workaround this is something that no kindhearted individual should ever have to endure. But sadly, Outlook is still a highly popular email client, especially amongst our corporate friends.

However, our new generators are designed to take heartbreak out of making your call-to-actions and backgrounds look great. Simply provide the background images and colors you wish to use and we'll provide a real-time preview, plus code, ready to add to your HTML email campaign. We've hosted these generators on two new easy-to-remember domains, so you can share them with your team and fellow email coders:

If you know someone who needs to use emails backgrounds and buttons that don't break down in Outlook, pass 'em on!

Master email design techniques with our learning center

Which email clients support web fonts? How can I improve my delivery rates? And what is responsive design, anyway?

Anyone who's even remotely tinkered with email marketing knows that the initial learning curve is steeper than a San Franciscan street. We've been there, so we've come up with a fantastic collection of guides to explain email marketing fundamentals like permission, what techniques work and how you can improve upcoming email sends. All of them have been written in easy-to-understand language and have loads of practical tips that you can apply straight away - to any campaign, on any platform.

As we work to keep our resources up-to-date, we'd love to hear your comments and suggestions. Is there a guide or resource you'd like to see? Or do you simply have a pressing email question? Get in touch with us directly, or feel free to leave a comment below.

Thumbs up for the button generator. Finally a way to use border-radius in MSO. Now if only Yahoo would learn… .
The background assignment for Hotmail / Outlook Web in the button seems to be missing though.

Is the BG generator only able to do tiles? Will you add support for non-tiling BGs at some point?

Makes me very happy to hear that you guys found these useful – thanks for the great feedback!

Igor, that’s true – Campaign Monitor doesn’t track clicks on VML buttons at this stage, and I doubt any others do yet, either. I’ve added your vote for treating clicks on the HTML button and the VML button as one and the same.

You could always use manual Google Analytics link tagging etc. to track these clicks, but I understand if some prefer to avoid using these buttons until they can be tracked as accurately as regular HTML links. We should also look at adding a mention of this drawback somewhere.

Leo, I’m afraid some of those features are indeed ignored by certain email clients. The Compatibility list in the sidebar should be up to date.

Even when the rounded corners or background image are missing though, the goal is for these buttons to be a better alternative than using an inline image (which can often be blocked) in cases where you want more than a plain text link.

About background images tiling, VML background images can be set to stretch to the size of the shape instead, but that’s probably not what you’re after either. You’d likely also have trouble recreating this with HTML/CSS with consistent rendering in other email clients.

Hi there Pierre, that’s a great suggestion! While we have no firm plans to do so at present, I’ll certainly let the team know this is something you’re interested in. Thanks again and fingers crossed :)

About BGs & Hotmail - Putting a table around the <a> tag and moving the css specs (except for the display property) into the td, as well as adding background=”...” in the td should work. Or am I missing something?

As for the non-tiling BGs - I was just curious if you found a way to do implement the stretch BG, which could be great when working with small changes in text-size (e.g. different languages). I was having trouble getting a workaround for css background-size property in the webmail clients.
Non-Stretch Non-Tiling works fine. I’ll write a guide when i can find some spare time.

Good point Leo, you can indeed wrap a table around the link and move the background image and color there for Outlook.com support. The drawback is that when images are blocked, Outlook.com will show a grey placeholder background instead of the fallback color you’ve defined.

I have an issue with Outlook and VML buttons. I’ve used the VML buttons from the generator listed in previous comments and they look great. The problem is that when I ‘Insert as text’ into an email using outlook 2010, the buttons get converted to straight up images making them unclickable when you send the email.

The button generator is very helpful, thanks. Just a note: Lotus 8.5 breaks when inlining any “-webkit-” property. I would consider removing the “-webkit-text-size-adjust:none;” from the output source, or at least adding a note about this.

Hi there Jeff, thank you so much for making us aware of this - I think our best bet for now is to leave a note. Really appreciate you letting us know, we’ll be sure to do more testing in the coming week.

Hi everybody,
I was wondering if anybody else has noticed a problem with the bulletproof backgrounds and bullets. This is not a complaint because they work amazingly. But recently I have noticed that if I place the bulletproof button within a bulletproof background, the button breaks apart in Outlook.
Meaning it will usually place itself in the top left quadrant of the page, let alone the email. I’m not sure when this started happening because until recently I was able to insert bulletproof button code within the bulletproof background code.
Any advice as to what may have changed, or if I am doing something different/wrong would be greatly appreciated.

Hi there Frankie, at this stage, it’s not recommended that you layer bulletproof buttons on top of bulletproof backgrounds. We’ve had quite a few folks report issues like this and one day hope to have a workaround, but in the interim, we recommend using another button technique if your design requires bulletproof backgrounds. Sorry for the trouble!

This may be an issue with my implementation. Using Exact Target to send a test, the email comes into Outlook and looks great. But when I forward the email I get the html version and r.roundabout version side by side. One still looks fantastic… the other not so much… and I suddenly have two of every link. Any thoughts?

Hi there Eric, forwarding emails from your inbox is known to mess around with formatting - it happens quite often, actually! For that reason, we generally recommend you forward campaigns using a Forward to a Friend link, as this will preserve your HTML and CSS code. Let us know if you have better luck with this method. :)