Designing for email? It’s just web design from the 90’s!

3 minute read

90s

So you’ve imported the HTML you’ve spent hours on, it’s browser compatible and W3C compliant, so why is your email campaign all screwed up?

The issue here is that although, yes, emails are designed in HTML and CSS, things are not as they seem in the world of Hotmail, Gmail & everyone’s favourite Outlook.

So first things first, get out your 90’s get up,  reach for a can of jolt cola and forget almost everything you’ve learned in the past decade: it’s time to design for email.

There are loads of tips and tricks, exceptions and conventions, so I’ll start with the main ones and we’ll see how we go.

Forget Divs in the 90’s (and email design) – tables rule

nestedTable

Tables are the single most important feature of email design – forget tabular data these babies are for layout. Nested tables form the basis for your layouts, whether you stick with the basic header/body/footer design or go deeper and add sub tables, these will be the building blocks of your email.

pencil Nested tables (new tables inside cells) display much better in email clients than splitting rows and columns


Just like the 90’s you can’t have any style on your head

No CSS declarations in the <head> of your emails. Well you can but most webmail clients like Hotmail strip that straight out, so you should declare your CSS inline.

Wrong:
<style>

.heading  {font-family: Arial, Sans-Serrif; font-size: 14px; color: red;}

<style>

Right:

<p style="font-family: Arial, Sans-Serrif; font-size: 14px;">Heading</p>

pencil Separating your headings in table cells means you can apply an inline style to the cell and freely change the text via a WYSIWYG without deleting the style


Java was just a type of coffee

youtubeexample

Back in the early days there was no fancy Javascript, no YouTube videos or Twitter feeds, it’s the same in the email world.
So sit back with your favourite cuppa and don’t worry about all that fancy stuff, it’s not going to work anyway.

pencil A clever way to get forms or videos into your campaigns are use screenshots that link to the actual content hosted on your site or on YouTube.

pencil Rather than sending an attachment, much better to host that file on the web and link to it. Not only does this allow you to track who views that file, but attachments often trigger spam filters so you’re more likely to reach the inbox with a link.

Tags: , ,