Ian Hoar – Passion for Technology – Geeking Out - Technology, Web, Toys, Games, Design, Entertainment, Gadgets, & Geeking Out

Do your email newsletters look right in Gmail?

Gmail logoThe world of email clients is constantly changing, especially when it comes to webmail. Google recently updated Gmail and it’s pretty cool. The UI is super clean, and you can set themes which have different backgrounds. I’m a huge fan of Gmail as a user, but it’s not always fun to build email newsletters for it. The newest issue is due to the semi transparent background which allows users to set backgrounds. It looks great, and really allows us to customize our email experience, but it can leave you email newsletters looking a bit odd if you have not taken the right steps.

Keep Reading 

Creating email newsletter margins with tables

Creating email newsletter margins with tablesThis may seem painfully obvious to some, especially the more seasoned old school table based web designers out there, but I’m still amazed at how many email newsletters don’t render properly in my inbox. Remember when it comes to email newsletters tables are king and web standards go out the window! It sucks, but that’s the way it is, so lets move on.

Keep Reading 

Outlook email newsletters and the AutoPreview pane

Cranking out email newsletters for Microsoft Outlook can be a pain, but if you are in the web business you may have to crank out the occasional email newsletter, and of course Outlook has a major market share. If you use Outlook you may know of the AutoPreview feature. This is a preview pane below the actual title that gives you the first few lines of content within the email. In many email newsletters you will get something like “View the online version of our newsletter”. This is probably not what you want to show up in the Outlook AutoPreview, and the way around it is quite simple. It’s also another chance to entice your audience into opening your email newsletter.

Keep Reading 

Creating OFT templates for Outlook 2010

I wrote an article a few years ago on creating OFT files for Outlook. This was written for Outlook 2007, and since then, Outlook 2010 has been released and things have changed. The ability to view web pages within Outlook 2010 has been removed and the UI has also been redone, but fear not, the ability to make OFT files still exists, although it’s not as straight forward as it used to be.

Keep Reading 

Email newsletters in Lotus Notes and table width

Lotus NotesLotus Notes, or Locust Notes as some of my colleagues like to call it is probably the hardest email client in wide use to code for. Depending on which version you are trying to support, you may be in for a real nightmare. I recently marked up a very basic email newsletter that had to work in Lotus Notes 6.5 and I still had a lot of trouble getting it to work. The same rules apply to Lotus as that of Outlook 2007, build your emails with a slew of tables and spacer gifs and use as little CSS as possible, this is especially true for older versions of Lotus notes. I wanted to share one particularly nasty bug that I squashed, and that is how Lotus deals with table widths.

Keep Reading 

Outlook 2007 losing font-family declaration

Email clients are one of the pinnacle frustrations for web designers. The limitations are far greater than those of web browsers and you can always count on Microsoft’s Outlook 2007 being at the forefront of compatibility problems and bug issues. If you create emails that have to support Outlook 2007’s wonky Word rendering you may have noticed on occasion that your specified font-family disappears. There’s a few ways to fix this, but some are better than others.

Keep Reading 

Anchor links in Gmail and email newsletters

I usually recommend against using anchor links in email newsletters; the reason for this is twofold.

First, when someone is viewing a newsletter their attention span is probably extremely short. They probably want to get onto their next email, but something has triggered their interest in your newsletter. Why waste that interest on jumping them further down the email, this is your chance to grab their attention and hook them into your website. It may be your last chance before they click onto their next email and your website is probably a much richer web experience anyway.

Keep Reading 

Space below images in Firefox and email newsletters

FirefoxOne thing that is consistently presented to me by other web designers and users is space below images and usually in Firefox, but it can also happen in email newsletters. You will usually notice it when you need images to vertically butt up against each other. This results in a white line or whatever the background colour is set too appearing between two vertically stacked images. Fear not, the fix is extremely easy and you have two good options.

Keep Reading 

Outlook 2007 borders and 1px padding on table cells!

Anyone creating email newsletters on a daily basis will tell you how hard it is to get them to render properly in all email clients, but getting them to work in Outlook 2007 can be maddening as any quick Google search will show.

Today I came across a bug that left me fuming. I could not figure out why every single cell in my table heavy layout had a 1px padding around it and in some cases I was even missing my table borders. For those of you working in the sane world of web design, tables are a thing of the past, but in the world of email, tables are back with a vengeance.

As I became more and more disillusioned I started trying anything and stumbled across the fix. I knew I had to share this, so if you are experiencing any of the above, here is the fix and it’s a simple one.

Here’s an example of what a two cell table with an image and text would look like before the fix. Notice the 1px white border/padding around the table.

And here is how it’s supposed to look after the fix. No white border / padding.

And the fix?

table td {
    border-collapse: collapse;
}

I don’t think I’ve ever even used this css before, but once I started grasping at straws I began to fiddle around with the CSS border attributes and tried it. I’ve never seen any browser or mail client except Outlook 2007 do this to table cells.

Here’s the full HTML from the example, and thank you Microsoft, for delivering the worst email rendering experience yet, we all thought Hotmail was bad, but you really stepped up to the plate!

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Outlook 2007 Test</title>
  <style media="all" type="text/css">
  table td {
    border-collapse: collapse;
  }
  </style>
  </head>
<body>
  <table width="200" border="0" cellspacing="0" cellpadding="0" style="border:solid 1px #48463b;">
  <tr>
  <td width="80"><img src="http://yourserver/graphic.gif" width="80" height="40" alt="graphic"></td>
  <td width="120" style="background-color:#c1beb1; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:11px;">Another column<br>
  plain text.</td>
  </tr>
  </table>
</body>
</html>

You may also want to check out my other entries on this topic.

Outlook — creating OFT files for email newsletters

OFT files are Outlook Templates, also sometimes called Outlook File Templates. You can make email templates from them, but as with most Microsoft products the quality can be quite flaky if you are not careful. I have had to create many OFT files for clients and if you go back in time and code to 1996 web standards you can get them to look pretty decent.

UPDATE: Using Outlook 2010? Check out my updated article.

There’s too ways to create OFT files. One is to save the email from the Save As menu and select OFT under the Save as type: drop down. This means you already have the email in your inbox, which means mailing the html with a 3rd party program.

There’s an easier way to do this which will allow you to skip the step of sending yourself the email. The OFT process could even be handed off to the business people that need the OFT.

Top menu go to,

View / Toolbars / Web.

You should now have an input field at the top that says something like outlook:Inbox

Here you can type / paste any web address and it will load the page in Outlook. Once this is done, in the menu go to,

Actions / Send Web Page by E-mail

Now you will see the page in a new mail window. If the webpage was not to complex and created using tables, it should look okay. Pure css and more complex designs will not work at all and really shouldn’t even be considered for any email deployments. I’m a strong supporter of web standards, unfortunately some major email platforms are not.

The next step is to save the email as an OFT. Go to,

Giant windows bubble (AKA Office Button) / Save As

Select OFT, name the file and save.

You should now have an OFT file. You can test this by double clicking it which will open Outlook. You can now edit the text and send to other people. OFT files can be a cheap internal alternative to full blown email deployments. I would only recommend OFT files for small internal newsletters. OFT’s may not work properly on other email clients and are proprietary.

12