MindComet

Background Colors Can Help Improve Your Open Rates

Take a look at this example from Simple Shoes.

The default background colors alone—not the alt text—compelled me to display images. Which is not to say that alt text isn’t important… this email has alt text within the main call to action, which reads “Collect: Our Friends Over At Good Magazine Took Over Our Blog And Left Us With Some Really Great Stories. Check Out What They Have To Say About Water Waste, Music And Earth Day.“ but this was too long for most email clients to render. Another lesson learned in brevity with alt text.

Regardless, this email succeeds where most fail in terms of readability and eye-catchiness in email clients who block images by default.

I received this in my Gmail inbox and after testing in other major clients, this email looks the same in all but ONE email client. Can you guess which one doesn’t display correctly? Give up? Ok…

Outlook 2007:

Can’t win ‘em all, I guess.

Not every email campaign or brand can get away with using color this liberally, but most can at least try. Always remember to test your email with images off, as the majority of desktop and web clients don’t render them by default.

View Comments

Posted by Bryan Quilty on May. 03, 2011

Outlook 2007 Can Now Render Background Images

For the past 3 years, designers and marketers alike have been trained to avoid implementing background images into their email’s designs. This was due to Outlook 2007’s inability to display such images. We all just kinda accepted Outlook’s faults and our collective emails designs were held back. But, alas, we will be deprived no more!

It has recently been discovered by a user of CampaignMonitor that background images can indeed display in Outlook 2007! But not without some hacking, of course.

First you have to add xmlns:v=“urn:schemas-microsoft-com:vml” to your html tag.

Secondly, within your style tag, add the following selector:

v\:* {
  behavior: url(#default#VML);
  display:inline-block;

Then, within your table cell, you must add:

<td width="600" height="402" valign="top" bgcolor="#000000" background="images/yourimage.gif">
  <!—[if gte mso 9]>
  <v:image id="image" style='position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="images/yourimage.gif"/>
  <v:shape id="text" style='position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:2;'>
  <![endif]—>
  <p align="center" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:18px;">This is the text in front of the background image.</p>

<!—[if gte mso 9]>
  </v:shape>
  <![endif]—>

Believe it or not, the combination of the steps above allows for background images to render in Outlook 2007. Try it out yourself. I'll be testing this all day today, if I come up with any issues, I'll be sure to update this post. If you find anything, please share them and comment below or on the original thread at Campaign Monitor.

View Comments

Posted by Bryan Quilty on Jul. 15, 2010

Arial Unicode MS: Your Safest Bet For Consistent Foreign Language Display

If you’ve ever had to manage and develop international email campaigns, you may know how frustrating getting the text to display consistently across all major email clients is. With multiple languages and their vast character sets, it’s difficult to find one font that can support so many foreign characters.

Recently, we have been developing email templates specifically for Chinese users. During testing, everything was going smooth until we began testing for Outlook ‘07 (no surprise there).

From troubleshooting and tweaking the code, we determined that if you’re going to code an email for Chinese users, make sure the text renders using the Arial Unicode MS font.

This is the most forgiving and widely-accepted font, especially for Chinese characters. It contains all of the characters, ideographs and symbols defined in the Unicode 2.1 standard. It is distributed with Microsoft Office, it is automatically installed with Vista and XP and is also bundled with OS X 10.5 and later. Unfortunately, it does not ship with Windows 7. You can find more on this on Microsoft’s Unicode Support Page.

Microsoft owns AUMS, which is no surprise why anything other than the sans-serif font would work in Outlook ‘07. Oh, and Outlook ‘07 is stupid and doesn’t know how to search for similar fonts unlike every other email client on the market. Just sayin’.

So if you’re sending out emails that are encoded for UTF-8 which use fonts other than AUMS, the likelihood that all of the characters will display is slim.

View Comments

Posted by Bryan Quilty on Jul. 01, 2010

Body Background Images Can Add Depth To Your Email

If you’ve followed this blog for the past couple of years, you know that I’m a big proponent for the removal of background images in email design. This is all due to the popularity of unsupported clients such as Outlook ‘07 and even Gmail to a certain extent. Although, sometimes a series of events will take place that will lead you to change your whole perspective on things.

In this case, that perspective-altering event was visiting Dylan Boyd’s killer Email Wars blog. The post that really piqued my interest included a screenshot of a BEEEAUTIFUL email from Columbia. The forest-landscape background totally threw me for a loop. As far as background images go, they usually consist of a gradient or repeating image, but rarely do I ever see photo-realisitc backgrounds in the bodies of emails. It caught my attention to say the least.

I then remembered that the geniuses at CampaignMonitor discovered a method of getting background images to display in the body of an email. So even this email could be displayed as intended in Outlook ‘07. Win.

I think this should be an example for creative online marketing and advertising departments to stretch their email designs out a bit. Try incorporating big, sweeping background images. I think most B2C email campaigns could benefit from at least testing this.

Have you seen any other brands using photo-realistic background images in the body of their emails? Provide examples in the comments.

View Comments

Posted by Bryan Quilty on Oct. 07, 2009

YOU FIX

The Email Standards Project by way of Campaign Monitor is pleading with the developers at Microsoft. Microsoft are insisting on keeping the Word HTML rendering engine (most recently used with Outlook 2007) in place for their next release of a predictably disappointing and bloated email client, Outlook 2010.

For anyone who has designed and coded an email in the past three years knows how big a pain in the butt Outlook 2007 is to work with.  There has been an outcry from day one about it’s drawbacks, as it has done nothing to push the flexibility and growth of email forward.  It’s done quite the opposite, I’m afraid. For starters, it doesn’t allow background images and it has crap support for CSS. See Campaign Monitor’s example here:

Microsoft wants to continue their reign of mediocrity, and I for one, have had ENOUGH.

If you go to fixoutlook.org you can use your Twitter account to send a clear message to Microsoft:

“Wow! @msofficeus is breaking HTML email by using Word to display emails in Outlook 2010. See http://fixoutlook.org and RT”

The site displays every Twitter user who has included “fixoutlook.org” in a tweet. As of 9AM this morning, there have been over 10,000 tweets.  This is an incredibly effective way to help our pleas resonate. It puts face to the name for the petition, which I’m not sure has been done before. Hopefully, this will force Microsoft developers to second guess their decision… Hopefully it will make a difference.

So let’s show the fatcats at MS what the mob mentality can accomplish.  Let our voices be heard!

View Comments

Posted by Bryan Quilty on Jun. 24, 2009

Conditional CSS Comments for Outlook 2007

The team at SitePoint have recently implemented the use conditional CSS comments in email, targeting Outlook 2007 specifically.

Conditional comments first made their arrival to target specific versions of Internet Explorer.  With these comments, you can write specific CSS rules for any internet browser.  Check out some quick guidelines here.

The code to target Outlook 2007:

Now you wouldn’t use this code all that often.  Campaign Monitor gives us an example of using it with unordered lists.  Apparently, ULs (with bullets) don’t appear with bullets in Outlook 2007, so in this case, it would be a perfect time to incorporate a conditional comment.

If you start using this technique, comment below and tell us your thoughts.  We’ll start employing this technique as well so check back for any further developments.

View Comments

Posted by MindComet on Jul. 23, 2008

Body Background Images In Outlook ‘07

We all know that background images don’t display with Outlook 2007—which consequently sent designing HTML emails back 5 years or so.  Well low and behold, that’s not the case anymore.

The incredibly talented and resourceful blokes at Campaign Monitor recently stumbled upon a bit of CSS that can remedy one instance of blocked background images; specifically for the body.  The effective CSS is below:

background-image: url(‘http://www.abcwidgets.com/bg.jpg’);
background-repeat: repeat-y no-repeat;
background-position: top center;
background-color: #d9c092;

The key to the code above that seems to please Outlook 2007 is the ‘repeat’ property. Evidently with BOTH repeat-y and no-repeat, the background image shows up.

Try it for yourself and comment below!

But until somebody stumbles upon a way to make background images display in divs or tables, you can find me in the corner resenting Microsoft.

View Comments

Posted by MindComet on Jul. 08, 2008