Creating Bulletproof Backgrounds and Buttons for Outlook 2007, 2010 & 2013


Showcasing 2 Fantastic New Developer Tools and our Interview with Stig Morten Myer!

If you’ve had the unique privilege of developing emails for Outlook 07/10/13 then you know what a challenge backgrounds and buttons can be. Fortunately, Stig Morten Myre has created a couple of amazing tools to help you with this unique challenge. We were curious about the wizard behind the curtain so we reached out to Stig for a one-on-one interview. Read his comments below for helpful insights into the ambiguous field of email design and development!

Bulletproof Email Background Images

Getting image backgrounds to appear in the body of the email or a table cell in these clients seemed to be impossible. Though there are some other tricks to get them to appear, the true breakthrough was using Vector Markup Language (VML), a deprecated, XML-based file format for two-dimensional vector graphics which is part of the Office Open XML standards. Using VML, one can define a shape and then fill that shape with an image or a tiled image. Of course, nobody wants to learn a deprecated language just to get their background image working in a few clients. Luckily for us, Stig created emailbg.net so that we don’t have to learn any VML!

emailbg.net

Bulletproof Email Buttons

Buttons, too, can be a pain in Outlook 07/10/13. Because these clients don’t let you display links as block elements or add padding to them, buttons always appeared shriveled and tiny. Luckily, a little VML magic solves this problem too. Check it out on emailbtn.net.

Bulletproof Email Buttons

Our Interview with Stig Morten Myre:

What do you love about coding for email?

Stig: “Just like with any medium, it has to do with the restrictions on what is possible, and the challenges that those restrictions present. Ultimately you’re just trying to arrange a bunch of pixels to form a specific whole. There’s often a number of different ways to achieve this, so the job is to find the most ideal solution. It’s a job filled with nerdy puzzles.”

“That, and it takes me back to when I taught myself to code table based web layouts as a youngen.”

What drives you crazy about coding for email?

Stig: “See answer number 1.”

“There’s such a wide range of email clients that drive me crazy, each in their own special way. Once you whack a bug in one of them, another pops up somewhere else.”

“Even code that you could swear hasn’t changed since your last test, will suddenly break in an email client which hasn’t changed in the last decade.”

How did you get into email design?

Stig: “I recently realized that I designed my first emails when I was 10.”

“My best buddy at the time had just moved to a different part of town, so we were no longer hanging out every day. Around the same time, the internet made its way into our homes, and my friend and I started emailing. Outlook Express had just been released with HTML email support, and once we had exhausted the pre-installed templates, I discovered that you could import HTML files of your own to send. I remember one of my creations was candy themed.”

“Slightly more recently, though, I worked at a travel operator a few years ago, where I ran the online marketing efforts. The company already had a fairly healthy subscriber list when I started, so it was an obvious area to focus on. Soon I came across the Campaign Monitor website with all its resources, and that became my education.”

What do you do at Campaign Monitor?

Stig: “For the past few years, I’ve been a proud member of the Campaign Monitor support team, alongside some incredibly clever and helpful folks. In addition to quick billing questions and feature requests, our support peeps assist our customers with things like API integrations and nailing down email rendering issues.”

“Right now though, I’m in the process of transitioning to an email developer position. I’ll be responsible for bulletproofing our free templates, our system emails, and more. I’ll also get the chance to give back to our library of HTML email resources (my alma mater, remember), with the very latest in 1999 style coding.”

Why did you decide to create emailbg.net and emailbtn.net?

Stig: “I had helped a number of customers implement the VML background image hack that Brian Thies had shared in our forums, and that he and Ros Hodgekiss had improved on.”

“So I had a basic understanding of how it worked, and of how little fun it was to hand code. And while working on one of those support tickets, I came across a couple properties which hadn’t been used for VML background images before. Specifically, the mso-width-percent property which lets you do full width background images, and the inset attribute for eliminating padding.”

“So in an attempt to share these findings, and offer an easy way for our support team, customers, and others to generate the most optimal background image code for their emails, I spent a weekend hacking together emailbg.net.”

“Having inhaled all those VML fumes, it also occurred to me that the href attribute on VML shapes was worth exploring. Before that, the only way to code big, clickable buttons that wouldn’t deflate in Outlook, had been to use an image. So after another weekend of head scratching, the sister site emailbtn.net was born.”

Which email client(s) do you use and why?

Stig: “I use Sparrow on my Mac. I know Google has acquired the team and abandoned the product, but the final version fits my needs and my workflow nicely. On my iPhone, I use the default Mail app, because who wants to set up their accounts on another mobile email client ever again.”

If Outlook 13 and Thunderbird were pro-wrestlers, which one would win in a fight?

Stig: “All I know is Outlook is the one I’ve personally gone up against the most times, and it’s got this low center of gravity. It’s a tough one to knock over.”

What advice do you have for novice email coders?

Stig: “Study all the excellent guides, templates and other resources out there, but don’t just blindly apply any of it. Your particular design probably doesn’t require every trick in the book, and half those hacks the others are using are for webmail bugs that no longer exist.”

“And if you’re fortunate enough to have control over both design and code, a simplified design is better than a complex workaround. Don’t write code more bloated than it needs to be.”

Why is email marketing so important?

Stig: “It’s such a versatile tool, it’s hard to even know where to begin to answer this question. Whether you want to make your service or product more useful to your customers, you’re keen to increase your repeat sales, or if you just want to spread warm fuzzies, email would fit into most of your activities naturally.”

“The ability to personalize, measure and test everything also makes it a super powerful channel.”

What’s the most important lesson you’ve learned about coding for email?

Stig: “Always keep testing your code, and ways in which you can simplify it.”

Do you see any big changes for email marketing on the horizon?

Stig: “Email marketing has always had a bias for the senders who do it right. ESPs are now amplifying this by giving more weight than ever to engagement, when deciding which emails make it to the inbox. The cool thing is that this forces marketers to be smarter.”

“If you put yourself in your subscriber’s shoes, based on everything you know about them, you can probably guess that the lady who opens your emails on her Android isn’t too eager to hear about your new iPhone app. Or that the chap with a shipping address in Norway doesn’t need to hear about your free shipping to US addresses. But beyond just not being blatantly irrelevant, there’s so much potential to send emails that the specific recipient actually wants to receive and act on.”

“The other major change these days is that most of your subscribers have started reading your email on their mobile. All the more reason to keep your campaigns clear, relevant and squint-free.”

If you could kill one version of one email client (causing all users to instantly upgrade to the next version) which one would it be?

Stig: “I’m actually going to go with Outlook.com. Now that the migration of Hotmail users has finished, it’s the webmail client with the highest number of active users, and the thing is riddled with email rendering issues. Some of which are inconvenient if not impossible to work around.”

“Plus, since it’s web based, an instant upgrade of all users to the next version is actually realistic.”

Thanks for chatting with us, Stig!

Stig We hope you enjoyed our interview with Stig. Were there any questions you’d like to have asked? Let us know in the comments down below.

Author: Alex Ilhan

4 thoughts on “Creating Bulletproof Backgrounds and Buttons for Outlook 2007, 2010 & 2013”

  1. These are not the best solution to background-images in Outlook.

    I’ve done some extensive research on using background-images in Microsoft Outlook and and it is in fact possible to define background-images which will display in individual cells. They can be made fixed-width, tiled, or even stretched across a full-width layout.

    You can view screenshots of my test and how to do so on StackOverflow where I originally researched this problem:

    http://stackoverflow.com/a/23346010/1922144

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies