10 Valuable Tips and Tricks for Designing HTML Emails • Inspired Magazine

Email Direct Marketing Campaigns (EDMs) are becoming an increasingly popular method of communication and, assuming you are not a business selling male enhancement products, they can be very effective. But before you start coding an HTML email, there a few things you should be aware of.

1. Scrap Divs, Tables are back.

You have probably spent your web design years hearing of the evils of table layouts, and have been (rightly so) using divs to achieve layouts in your web page. But in HTML email you will need to use tables and sometimes tables within tables to achieve the desired design.

2. Limited CSS support

Unfortunately a lot of CSS is not widely supported by the popular email clients, for a list of which browsers do and don’t support what click here.

3. Inline CSS

As well as the limited CSS support the other CSS annoyance you will come across in HTML email is that you will have to define CSS the hard way. For every ‘p tag’, for example, you will have to define your font size, colour and line height and so on.

4. There is a white gap between my images

You should add style=”display:block” in the image tag for those images you want to display border to border.

5. There is still a white gap between my images

Define the width and height of both your images and your cells. Where the cell height may vary, such as cells containing text, height=”auto”

6. Keep Thin

Think about how people will be viewing your email. Once you account for the pixels used by email clients and their menus and ads you don’t actually have a lot of width left to use in your design, especially for users with a small size screen. As a rule keep you the width of your layout around 600px.

7. Don’t only use images

With all of these coding complications and design considerations it may be tempting to make the whole email an image. But actual text should be used where possible as it will be much quicker to load. It is also important to use actual text because many email clients block images by default and a purely image based email will just render as grey boxes.

8. View it in browser link

When you are done with your design, upload it and then add a link to the top of your email, that way you can ensure that your design can be viewed the way you intended.

9. Subscribe and opt out

Continual unwanted emails will give your company a bad name and could very quickly become an legal issue. To start off with make sure the list you are emailing have opted into receive such communications. You should also always provide a means to unsubscribe/opt out at the bottom of the email.

10. Track your campaign

EDMs are only a cost-efficient means of communication if they are effective, and you can only start to know if they are effective if you track and analyze their results.

Tracking email open rates and click-throughs maybe a feature of the email marketing software you use. But if they are not, bit.ly and google analytics are free and provide statistics about click rates on specific links.

header image by bubblefriends

Bio
Latest Posts

Matt Nieass

I am a senior web & digital designer and based in Sydney, Australia. In my free time from my role as a designer, I surround myself in the creativity of the design community through my blog and twitter.