CSS

Adding bulletproof background images and buttons to your email newsletters

By January 24, 2013August 16th, 2014No Comments

While it’s possible to get background images to display in (almost) every email client, for many the techniques involved have always been considered ‘too tricky’ to code into email newsletters. However, our talented (and handsome) Stig has decided to change all that with two new code generators.

Like most of you, I’d rather undertake practical studies in Mayan torture than ever have to write a line of Microsoft’s VML code. Same goes for testing background image support across finicky clients like Outlook, Gmail and Hotmail. So it’s with much joy that we’ve embraced the latest from Stig’s lab, a ‘Bulletproof Email Background Images‘ code generator. And by joy, we mean the bitter memory of countless hours spent coding and testing by hand, when we could have beendrinking PBR and swaying moodily to Ratatat. That’s how I spend my free time, anyway.

As the techniques for applying background images to entire email campaigns vs. table cells are considerably different, there are options for generating code for both scenarios. A word of warning in regards to the former, though – Outlook 20xx has been known to crash when a background image has been deemed ‘too big’ (either in file size or dimensions), so make sure you test your campaign in a real, live copy of Outlook before going for gold.

… and bulletproof buttons, too!

Not satisfied with simply releasing one highly-useful piece of email kit, Stig has also come good with emailbtn.net, a code generator for creating bulletproof email buttons. These buttons are great for adding a call-to-action to your design (eg. Read More, Buy Now) and don’t look shabby, either. Simply opt for plain-color buttons or use a hosted background image, tune up your styles and woosh, out comes the required HTML/VML code. If you have some HTML coding experience, you’ll be adding bulletproof buttons to your email designs faster than a cat in freefall.

Source: http://www.campaignmonitor.com/blog/post/3920/bulletproof-background-images-and-buttons-email-newsletters