Home Resources Blog

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.

  • Ben Carver

    Excellent, Ros! Glad to see these tools hosted on CM proper!

  • Nicki Snoblin

    You people are amazing! Thanks for another great tool.

  • Igor

    This is very good! But tracking code doesn’t work in “v:roundrect” element. And it’s bad for click rate analytic.

  • elise

    I can’t believe how much you give to the community. Thank you so, so much.

  • Leo

    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?

  • Stig Morten Myre

    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.

    I’ve written a bit about how to work around the tiling/repeating issue, and we’re always happy to help try to figure out how to code specific designs, either in support or the forums.

  • Pierre

    Any chance to see the button and background generator available within the template editor?

  • Ros Hodgekiss

    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 :)

  • Leo
  • Stig Morten Myre

    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.

    Getting the background image to stretch in VML is as easy as replacing type=”tile” with type=”frame” but as you said, background-size has poor support in email client.

  • Gray

    These buttons work for me in Gmail, but in Outlook there is no padding or width to the buttons. The background color and border will render, but the size of the button is the size of the text.

    Also, if I click Outlook’s view in browser, they appear like they should.

    Good buttons (Gmail): http://imgur.com/4XTGJUg
    Bad buttons (Outlook): http://imgur.com/j4YCGup

  • Davida Fernandez

    Hi Gray,

    The buttons.cm VML code is designed so that the width will be rendered correctly in Outlook. A quick test on my side shows that the code is working correctly – here’s Outlook 07/10: http://d.pr/i/6UQg

    If you send us the code to support@ we can take a look at your code and see if we can spot where things are going wrong! :)

  • Diego

    It can break the link tracking in Outlook!!

  • Paul West

    Hi Diego, when this was first setup, you’re right that it wasn’t possible to track the links in some versions of Outlook.

    We have been able to find a solution however and when using buttons.cm with Campaign Monitor, the links will be tracked as normal.

    If you are running into problems there, feel free to drop an email to support and we can help out!

  • Jamie

    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.

    Any thoughts?

  • Paul West

    Hey Jamie, from what you’ve described, it sounds like you may be trying to use the buttons.cm code when creating an email in Outlook 2010, rather than when sending an email to Outlook. Is that right?

    This method isn’t really designed for sending from Outlook, but you may be able to find a solution by adding your own HTML directly to Outlook, there is some help on this here.

  • Jeff

    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.

  • Ros Hodgekiss

    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.

  • Frankie

    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.

  • Ros Hodgekiss

    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!

  • Frankie

    Hi Ros,
    No trouble at all!!! Thanks for your reply and suggestion!!!

  • Eric

    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?

  • Ros Hodgekiss

    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. :)

  • Hamish

    Hi Ros, we’re having problems centering the buttons inside a content area with Outlook 2007+. I tested using one of the Campaign Monitor canvas templates as well – inserted a left aligned, right aligned and centered button. But they’re all rendering left aligned in Outlook.

    Have you seen this problem as well? Any ideas?

  • Frankie Nardi

    Hi everyone,
    “Quick question” … I’ve been using the bulletproof background solution for quite some time now. I’ve even posted to this thread earlier and received a great response.
    I’m currently trying to use it again, and it is working great for me, but I’m having a terrible time with Outlook 2007, 2010, and 2013. Strangely everything works perfectly in Outlook 2011.
    My problem is the background renders as expected, but the content I have above it seems to be getting cut off.
    I have 2 tables nested within the initial table. The right aligned table is being pushed to the very left of the screen and left table is being pushed below it. But that ONLY happens if I add this line …
    <v textbox=”” inset=”0,0,0,0″> … If I don’t include that first style, the copy filled table does not appear.
    I’m really at my wits end on this issue. I hope somebody can help, I also hope I explained myself correctly.

  • Ros Hodgekiss

    Hi Hamish, if you could kindly send us details, we’d love to take a look at your campaign here. It’s likely that there’s a little something in the code that’s causing the alignment to be not as desired, but we’d have to take a look to be sure.

    Frankie – would it be possible to post a sample of your code in the Email Design & Coding section of our forums? We’d absolutely love to help you with this, but will certainly need a little more context. Thank you so much!

  • mandy

    dosnt work in office 365

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free