5 reasons Email design is different to Print DM design

aka How to provide perfect design PSDs to an HTML email developer.

What do you think about this article? please add your comments below!

More brands than ever are transforming their traditionally printed direct mail activity into email marketing campaigns, and as a result direct marketers and their designers are having to learn new skills designing for email. One of the most common ways that email campaigns lose their effectiveness is when they’re not designed for the channel, and they’re simply a DM campaign that’s been dropped into HTML, so here’s our tips for making kick-arse email direct mail campaigns.

Put down Illustrator

Whilst you may use Illustrator to create initial assets, particularly on cross channel campaigns, final email creative should be artworked in Photoshop (Or a equivalent bitmap based program) at 72dpi in RGB colour. When it comes to building the design into HTML, the HTML developer will require access to different layers, so ensure they’re not flattened. As a rule of thumb, emails should be maximum 600px wide. And don’t do everything in Illustrator and save it out as a psd, we’ll know!

Email rendering isn’t precise

Barring gremlins at the print house, when producing print assets we can almost guarantee how the resulting artwork will be displayed, right down to the smell of the stock. Unfortunately when designing emails we don’t have this luxury (although scratch & sniff is but a USB dongle away). Email code renders differently on different operating systems, different devices and in different email clients – Consequently the fold will move around for different recipients (it’s typically 400-700px), and the real estate that a paragraph of body copy takes up will vary due to differences in line height and font size rendering.

But, Email rendering is precise

Having said that, things like text and images are held within flexible tables, as opposed to more rigid text boxes and bounding boxes. So when changing copy and images for use in an HTML structure that’s already built, remember that any extra copy or larger images will stretch out and “break” the design. It’s worth setting precise image dimensions and copy limits, but also consider designing around this; common issues include two columns – one text and one image, when extra text is added there may be extra space created underneath the image to compensate. As a rule of thumb it’s easier to guarantee horizontal alignment and accept that vertically things may shift slightly.

Postman Pat goes postal

Whilst the Royal Mail and/or a postman chasing dog may sometimes get between us and the recipient, they don’t usually open each mailing, read it and either mark it as junk or just throw it out. Unfortunately email is different, and the chances are you’ll have to jump through some deliverability hoops in order to get to the inbox. Spam filters don’t look too kindly on all image emails, for example, so it’s worth getting some web text in your design somewhere (that’s standard web fonts like Arial or Verdana). Likewise some email clients will disable images by default, so think about how the message will look without images turned on – we can use alt-text to replicate in-image copy, but it’s not ideal – again, consider using web text and using things like the Johnson Box.

And Finally, Less Is More

I think this is the same in print and really it’s borne out of the client wanting to pass on too much information – but thanks to screen’s lower resolution and the recipient’s tendency to skim read or even skip large paragraphs, we have even less room for large chunks of copy than in print. We do, however, have only a simple click between us and the web, so it’s worth thinking about using the email as a teaser and putting your main/large content on a landing page. A good text size for body copy, by the way, is about 11 or 12pt, 10pt is ok for terms and conditions but don’t go any lower (also ensure point sizes are whole numbers, it breaks the internet if they’re not).

Follow @iamelliot and bookmark http://www.emaildesignreview.com/ for more hints and tips designing for email.