For many of our clients’ email needs we use Send Studio, a web-based email management tool. It’s got some really nice features and handles large email campaigns with aplomb. Although we’re fans, recently we’ve run into some quirks with the What You See Is What You Get (WYSIWYG) HTML email editor and we figured out some work arounds which we thought we should share.
This post is a bit techy – so read the full article only if you’re wearing your propellor hat 
Some of the following tips aren’t exactly elegant but they seem to work for us, so if anyone has some insight into these issues drop us a line in the comments.
WYSIWYG HTML editor
Most of the quirks are to do with creating HTML emails using the WYSIWYG editor. For the most part the editor is a really handy way of creating HTML email templates from scratch, or modifying pre-existing templates, without having to deal with the “behind-the-scenes” HTML code.
Some issues of the issues we’ve come across include:
- The layout of HTML emails changes, with additional whitespace being inserted throughout the template, in Internet Explorer 6 & 7. We suspect this is due to the handling of empty table cells (unfortunately a necessity with the current state of email client HTML support)
- When using Firefox the editor will convert all Hex colour values to RGB values. Although this isn’t a major issue for many browsers, it’s still problematic.
- The editor will place a
<br>within empty table cells, e.g.<td></td>. Inserting a does not fix the problem, you need to use an <img> tag and a spacer GIF (what year is this again?!) - Images in the HTML emails with a filename “logo.gif” will display Send Studio logo unless absolute paths are used (we use a rebranded version of Send Studio, and it may be the custom logo causing this issue).
- As far as we can tell, there is no common image access when creating HTML emails via the Templates or the Email Campaigns menu – i.e. uploading an image with a template does not make that image available when editing an individual email campaign.
- I’m not sure if the following problem is a WYSIWYG editor issue or something else, but I had trouble creating a template from the “Upload File” option. In the end I had to create a new template using the WYSIWYG editor, edit the HTML using the source view and then copy and paste the HTML from my local file into the source editor. Once the HTML is pasted in the source view click save for the WYSIWYG editor to render and preview it correctly, then click Save and Exit. This occurred in a couple of different browsers. Also – editing the HTML in the WYSIWYG editor or HTML source view doesn’t always save properly – thus the need to create a new template each time. (This is really a “behind the scenes” issue for us as we are managing templates on behalf of our clients, but is still an issue)
- When sending a campaign, the “attach images” is selected by default which means any image used in the HTML email will be included as attachments on email clients – this is not best practice and can cause issues with emails being blocked as spam. It would be handy if you could adjust the default settings for sending email campaigns so that the default is off.
Outlook 2007 and the background attribute
One small tip that came up during one of our last mail-outs was using CSS to allow for graceful degradation of background images. The idea is to use inline CSS style attributes for background-image and background-color for clients that don’t support the TD background attribute (Outlook 2007, we’re looking in your direction). Example:
<td style="background-color: #FF9999; background-image: url('IMAGE-URL');">
This technique also degrades gracefully for email clients like Gmail also – that is, Gmail will strip out the background-image attribute, but acknowledge the background-color one – however, in most cases email clients will support TD background="http://myurl.com/myimg.jpg" – so it’s not needed.
Other tools
Just a quick “notable mention” of TamTam from Mad Mimi (as profiled by Campaign Monitor. It’s a tool that takes your CSS from between <style> tags in the header and creates inline styles for all the relevant HTML in the body so that it’s easier to create HTML emails using standard CSS, and then have that converted to support more email clients (many email clients don’t support the <style> tag). Especially handy for more complicated HTML email templates.
2 Comments...
Another thing I’ve just discovered is that the WYSIWYG editor is not displayed when editing in Safari – and it all seems to save etc. properly when using the raw HTML edit facility in that browser.
I’ve had problems with the html not saving too and having to make new templates. Right before we were about to send out an email blast, making new templates stopped working as well. It was terrible.
Also, we tend to want to paste in large blocks of pre-written text without going into source but it seems practically impossible to do and still keep the inline css styles.