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

By Ros Hodgekiss on 31st October 2013

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.

23 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.

  • Gray
    15th May

    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
    15th May

    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
    2nd July

    It can break the link tracking in Outlook!!

  • Paul West
    2nd July

    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
    2nd September

    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
    3rd September

    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
    25th October

    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
    1st November

    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
    9th December

    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
    9th December

    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
    9th December

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

  • Eric
    23rd January

    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
    23rd January

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

Got something to add?

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

Create an account