Graphic Design in Outlook HTML Emails

Question

At the moment we are creating artwork in Word and saving it as an HTML file. Opening up a new email, clicking insert on menu>clicking ‘File’>Selecting HTML file and choosing insert as text. The word document is then embedded into the email and we can create HTML links from there.

The problem with this method is we are limited to what we can create visually in Word. The artwork just does not look professional enough and we find that sometimes the headers or footers do not appear or do not stay in their correct position.

What I would like to do is to be able to start in Adobe InDesign (the graphics package we use). So far I have been able to create artwork in InDesign and create buttons and hyperlinks in InDesign>Export it as a pdf, maintaining the hyperlinks>Save as HTML document>Open new email>Insert HTML file choosing insert as text.

The problem with this method is that the images move about, the text is all different sizes, but on the plus side, the hyperlinks have been retained. So I am almost there, but not quite. Can anyone suggest what I need to do to get the design to display 'correctly' in Outlook.

Solution 1

Sadly, Outlook has notoriously bad support for HTML in e-mails, and it will only get worse.

What you can do: try to cope with Outlook's way of handling HTML and CSS.

A good guide to understanding the do's and don't's can be found here:

• http://www.campaignmonitor.com/blog/post/2533/a-guide-to-css-support-in-emai-2/
• and here: http://www.campaignmonitor.com/css/

Solution 2

HTML email support is limited to a small subset of inline CSS.

InDesign is not a web design tool, you should be using a workflow of design in photoshop > slice up then build in dreamweaver if you are using the Adobe suite.

Premailer is your friend. This is one of the tools that campaign monitor uses in it's products. With premailer you can built your webpage normally and then upload it to premailer. It will process it and tell you what is wrong, and produce new files for you with inline css.

Definitely worth a look. Then test, test, test, and test.

Comments

[e100]

Campaign Monitor also have templates you can download and adapt, even if you're not using their product: campaignmonitor.com/templates