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.

Posted by Ros Hodgekiss

10 Comments

  • Ben Carver
    1st November

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

  • Nicki Snoblin
    1st November

    You people are amazing! Thanks for another great tool.

  • Igor
    1st November

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

  • elise
    1st November

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

  • Leo
    4th November

    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
    7th November

    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
    7th November

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

  • Ros Hodgekiss
    7th November

    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
    8th November

    Hey, thanks for the response.

    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.

  • Stig Morten Myre
    8th November

    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.

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account