Mastering Email Newsletters

A well designed and successfully implemented email newsletter is a great way of keeping in touch with your customer base, and as a designer its also a fantastic service to be able to offer clients. That is if you can do it well. In this post I’ll cover some tips for building great email newsletters.

Use a Fixed Width No Wider Than 600 Pixels

If you’re used to designing websites you’ll be optimising your designs for 800×600, or even 1024×768 pixel resolution screens, but its a bit different when it comes to email design. This is because most of your recipients will be viewing your email in a ‘preview pane’ rather than double clicking the message and viewing it full screen. Bearing this in mind your email design should be 500-600 pixels wide. You’ll also want to make sure you use a fixed with, rather than percentage based layout. The name of the game with email newsletter design is simplicity in terms of structure. You shouldn’t let this make you feel limited in terms of design though!

Background Images

I think its a common misconception that you can’t use background images in your email newsletter designs or you should really try and avoid images all together. You most certainly can, but you kind of need to rig your HTML to do so. Most email clients strip out your newsletters <head> and <body> tags and replace them with their own (because your email is displaying inside their webpage after all), which does make sense. So, as a result you can’t add your background images using CSS between your <head> tags. What you need to do is wrap your email in a huge table thats 100% wide and 100% high, just like you would have done back in the day! Then I recommend using the old ‘bgcolor=’ and / or ‘background=’ to set your background color and image.

<table style="height: 100%;" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#000000" background="http://www.yoursite.com/images/image.jpg">

Use Inline CSS

This is totally frowned upon in web design, but in email newsletter design, its a necessity. Lots of email readers apply their own styles to emails to make them render in a particular way. By adding our own styles ‘inline’ we over ride these. Here’s a quick example of some inline CSS styling a paragraph;

<p style="font-size:14px; color:#000;">My Paragraph goes here</p>

Sometimes I have found however that it is necessary to add some styles into the <head> section of your newsletter design. One particular instance of this is for reseting margins and I always add link styles here (as well as inline) just to be on the safe side.

Make your email is readable without images loaded

By default most email readers don’t load images, the user has to click a link to load them. Because of this you need to make sure the main message of your email is still readable with images turned off. The best way to do this is to descriptively label your ALT tags. You can see in the above example from PixMania that the main message ‘£10 off when you spend a minimum of £200’ is still clear. This is why its so important that your whole email newsletter doesn’t just consist of images.

Use HTML Tables for Layout

If you’ve been around the industry for any length of time you’ll know that you need to revert back to tables for layout. The guys over at Campaign Monitor recently wrote a blog post about how many tables you could nest inside other tables and your email still display properly. The generally consensus was that you can go 15 tables deep! This reinforces the fact that tables for layout in email newsletters is the best bet.

Test, Test and Test

Hotmail, Gmail, Thunderbird, Outlook, Yahoo – you get my point. There are a fair few email clients out there and you’ll need to make sure your email displays properly in all of the major ones. As long as you’ve adhered to the main points of this article you should have much to worry about, but its better to be safe than sorry!

Include a link to view in browser

What happens if after all your testing, for whatever reason your email looks dreadful? Most of the time It will get deleted. Thats no good. You need people to realise that they can easily click a link to view the same email in their browser window where it will definitely render how it was intended to. My tip would be to always get into the habit of adding something like ‘Doesn’t look quite right? Click here to view this in your browser’, and you’ll be making sure that no one misses out on what you’ve got to say.

And finally, Follow the Campaign Monitor Blog

These guys know what their talking about. They run the hugely successful, (and bloody brilliant might I add) online email newsletter software ‘Campaign Monitor‘. Out of all the ways you can send HTML emails online, Campaign Monitor is by far the most intuitive and best I’ve used. If you’re serious about creating and sending email newsletters then you need to subscribe to their blog. Lots of their posts address questions from the community and also announcements about new features their software offers, plus updates from the fight to introduce some form of standards to email newsletter design.

Conclusion

I hope this post has helped you, or maybe got you more interested in this medium. I know its something that interests me, and something that I’m always keeping my eye on. I’m sure one day these tips will become redundant, and I really hope that they do – but for now the way in which we build email newsletters is quite archaic to say the least. If you fancy reading up I highly recommend you download this FREE HTML newsletter design guide from the guys at MailChimp. Enjoy! You might also find these links useful

Subscribe to our newsletter

Get access to all our guides and resources

Would you like to be notified each time we post new digital media?