MindComet

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

DPI Settings With Outlook 2007

The geniuses over at Bronto have uncovered yet another flaw with the always problematic Outlook 2007.  By testing to different computers using Outlook ‘07 at the their office, there were always glaring inconsistencies with two specific machines.  Yet, the two computers that always had issues would always break in their own special ways.

Through diligent research, it was determined that the two computers had separate DPI (dots per inch) settings.  The default DPI setting on Windows machines is 96.  One of the computers was set to 120 DPI (the large setting) and 82 DPI (a custom setting).  The former would blow out the images, causing breaks and the latter would shrink the images also causing rendering flaws.

Basically, only Outlook 2007 (and not any other desktop email client such as Thunderbird) will break any email with a setting other than the standard DPI setting of 96.

This doesn’t sit well with me considering that no matter how meticulous you are when testing emails it still might end up broken when it reaches some users’ inboxes.  The only remedy that comes to mind is to spread the word and awareness through Email Standards Project.  If there’s enough outcry from the community maybe, just maybe, developers will wise-up and listen.

View Comments

Posted by MindComet on May. 05, 2008