9 Tricks to Design The Perfect HTML Newsletter

Businesses often have product updates, or information on upcoming events that they’d like to share with their clients and one of the best ways to do that is through a nicely designed email newsletter.

We have compiled some fantastic tips and tools to help you design high-quality HTML newsletters. Even if you’re a newbie to the subject you’ll surely find some invaluable information to get you started in the e-mail marketing process.

Goals of a Newsletter

Before getting into the design aspects we should clarify your purpose for building a newsletter. Depending on the type of website you run, the information contained in your newsletter may vary dramatically from others, but the core purpose of a newsletter is to deliver convenient updates right to your reader’s Inbox.

Heavy Internet users are likely to check their e-mail more than twice a day. Even those who are constantly busy will take the time to go through their messages at least once a day.

This is the perfect time to capture attention even without requiring visits to your site. Even if nobody is clicking through your links, the information is still received, which is great for building a brand name.

Consider some of the topics you would need to offer in your design. Are you including links to signup for your service; possibly blog links, or most recently published articles on your site?

The layout of your newsletter will reflect how you wish for your readers to respond, but ultimately you are looking to drum up interest and pass around some interesting tidbits of information to the masses.

1. Utilize Tables in your Layouts

This may seem a bit contradictory towards today’s modern web standards, but e-mails are still archaic in their rendering engines, thus you have to build towards older models.

Unfortunately tables are the easiest way to get everything working properly among the various e-mail clients. Depending on your knowledge of building table-based layouts, this might actually come as good news!

You may also wonder why div and other block elements are not such a good idea. Most e-mail clients are built to strip away any extraneous CSS content. This means you won’t be able to use much of anything except for inline CSS (and even full support is shoddy).

Clients such as Microsoft Outlook 2007 and Google’s Gmail have very poor support for floated elements and direct positioning.

The best solution would be to nest multiple tables inside each other. Padding and margins are not set to a particular scale between many e-mail clients. This is a reason to stick to using width="value" on all of your table cell elements.

These will always display the same width no matter which e-mail client your readers are using, so it’s a lot safer and more consistent to set padding and margins using empty table cells.

2. Fixed-width positioning

You have a few options when building the drafts of your newsletter layout, however the best option to follow is to set fixed widths for your containing table.

There are many varying monitor resolutions — you won’t be able to please everybody. If you don’t have particular elements with static widths, you could always use width="100%" on your containing table. This will allow your content to fill the entire width of all e-mail clients.

However, for many this method is a little too lax. Constructive newsletters will require a fixed width in most cases, especially if you’ll be using banners and images set to a particular size.

I recommend working with 500px – 600px maximum document width. The horizontal screen size of the iPhone and some BlackBerry models are limited to 320px, so even at 500px your e-mail template will be scaled down to fit properly.

Considering that many mobile users choose to view e-mail without HTML anyways, this shouldn’t be a huge problem. Users of desktop and webmail clients will likely experience a similar setup regardless of the Operating System they use. When in doubt create a few template designs and choose the ones you like best!

3. Pixel units

Unless you’ll be using fluid elements in your newsletter it’s likely that you’ll need to size a few things. Try to keep it in pixels (px) rather than in another type of unit.

Percentages can easily get mixed up with the many webmail clients and software windows. With fewer page elements, fluid layouts can come out unscathed, albeit with a few bugs.

But pixels are always a sure thing. Working within the 600px max width limit, you can actually fit a lot of content inside. Exposure is easier if you split your layouts into two or three columns, and always write your sizes in pixels.

The only exception may be to font sizes where ems can support your readers better, but em sizing will differ in a similar way percentages would – so for simplicity’s sake, stick to pixel-based alignments.

4. The possibilities with CSS

It may seem like e-mail design is out to destroy the use of CSS styles. Although there are a lot of unsupported features, CSS is still perfectly acceptable in many cases.

Campaign Monitor has a beautiful table of supported CSS properties listed by e-mail client. All will support the basics like font-family and font-style, so you can skip over the <font> tag if you wish.

Be cautious about your font styles as to not push the boundaries too far. If you do feel uncomfortable with inline styles, it’s always possible to use the HTML font tag even though it’s been deprecated.

If you’re a CSS designer, you don’t need to quit the system, but any shorthand CSS coding may result in buggy designs. As an example the font: 12px/14px Arial,sans-serif; shorthand can help save a lot of space, but it isn’t fully accepted for e-mail design, even when it’s used with inline styles.

Even your color choices should be written out longhand. Hex colors such as #ccc or #e3f must be written in full as #cccccc or #ee33ff, respectively. If you can build what you need without CSS I would recommend that path, but don’t completely shy away from CSS in e-mail designs because contrary to popular belief it is supported in most cases.

5. Anchor links best practices

You’ll surely want to include some links into your newsletter. These could be outbound links to other pages around the web, or maybe links leading to the most popular pages on your website.

Additionally most footers will contain an unsubscribe link for your readers to opt out of the e-mail process, but how should you handle all of these links in your design?

Well it should be noted first that e-mail clients are very finicky with their designs. Many will choose to overwrite your link styles, even with inline CSS. A neat trick is to include both inline color and an additional span tag within the anchor element.

If the color and styling of your links are important to the overall design you’ll want to take the extra precaution. I’ve added a small code example below:

<a href="https://www.google.com" style="color:#3147ca;"><span style="color:#3147ca;">some link text</span></a>

Hover effects are not supported in Outlook 2007/2010, Gmail, iOS or Android. You may still want to include the a:hover style for all supporting clients: Outlook 2000/2003, Hotmail, Apple Mail, and Yahoo! mail.

However, personally I don’t see much benefit in the partial user experience, since the anchor selectors aren’t heavily supported I recommend just offering 2-3 link colors to use throughout your design.

As a presumption users will also expect your links to open in a new tab or window. Ideally the target="_blank" attribute should be enough for all browsers to recognize this functionality, and the inclusion of this attribute on your anchor links shouldn’t negatively effect e-mail software such as Lotus Notes, or Outlook either.

6. Test in all major clients

A recent study of most popular e-mail clients (done by Campaign Monitor) shows ten of the most popular e-mail clients in the past year. It may seem a bit tedious but designers should get into the habit of checking their newsletters on all major e-mail clients, at the very least on some of the more common clients such as Gmail, Hotmail or Yahoo! Mail.

This doesn’t include webmail solely, but also operating software on both Mac OS X and Windows. Also according to their diagram iOS Mail and Android have both rocketed into the top 10 list over the past few years.

In fact iPhone, iPod Touch, and iPad Mail ranks the #2 most popular right under Outlook! Unfortunately there isn’t a way to test these without owning one of the devices — so you’ll have to settle with other options.

One bug with the mobile support comes in many iPhone and Android models. Mobile e-mail rendering will often resize the text inside your template. This may not affect your design very much, but it can be annoying to some readers. Using the CSS -webkit-text-size-adjust: none;, will ensure an even default text size throughout all parsing engines without needing to test it.

If you know any friends or colleagues who use alternative software, you may wish to ask for their help on testing the newsletter. You can either send them a copy of the e-mail to check on their device or borrow the device to actively clear out coding bugs.

Luckily Outlook does offer a Mac install version so you won’t need to track down a Windows user for those optimizations, but when it comes to Lotus Notes or Windows Mail, you may be out of luck.

7. Always offer web-based views

Readers won’t always be able (or be willing) to view your e-mail natively. Offering another version somewhere on the Web will give a sense of ease and compatibility. This process can’t be completely automated unless you’re looking to include a plain text version.

This way, you would strip all HTML tags from the newsletter layout. You wouldn’t be able to include links or styles for anything. All content would simply be laid out as a plain text file for readers without the rendering capabilities.

This is certainly a good alternative, but when you offer a full Web version of the same newsletter it takes away the damage done by any rendering bug. Most readers will be running an up-to-date Web browser which you can style and build your newsletter on and to perfection.

How you set up the page is entirely your choice. Some websites will dedicate an entire blog post to duplicating the e-mail’s content, maybe with some additional information.

Others will create a separate page off the main website without any direct links in the navigation. This method can be beneficial since readers won’t be distracted by your main website template or sidebar content.

8. Adding image content

Images are another reason to offer your readers a web-based solution. By default, e-mail clients are set to strip images out of the content. If your address is added to a safe list, all images will be displayed by default, but the user has to accept this setup so it’s certainly not a guarantee.

Just make sure images aren’t required as part of the main content, but included as an extra topping for page aesthetics.

Once you get to exporting graphics there are a few tips to building images specifically for e-mail. You’ll want to always set both width and height attributes on your img tags.

Without these specifications in order, some clients will distort the image content. An alt tag will also prove useful, so visitors will know what the image content contains before it’s loaded.

As mentioned before, positioning the images in your e-mail can get tricky. Avoid using floats at all costs! The image align="left" attribute will work much better, or alternatively map out exact table cells to fit your images along the top, left, or right side of your newsletter.

You won’t be able to get a perfect match-up with so many clients out there (especially mobile clients), but optimize your images and keep file sizes small for best results.

As for image storage, it’s recommended that you keep all files in your own Web server. This is the better option instead of using another image host, or by uploading the files to an online newsletter service.

Additionally you should separate the content for your newsletters away from the rest of your images in a folder structure like so /img/email or /img/email/2011.

9. Avoid the spam folder!

This can be difficult to hear, but not all e-mail clients are friendly towards newsletters. There are billions of e-mails sent every day and the majority contain spam or malicious content, thus having these security measures built into the Inbox is clearly for safety precautions.

However, when it comes to Internet marketing, you can easily be discouraged to see your latest newsletter end up with the junk. To reduce the chances of this happening you should clean up your design for simplicity. Don’t make annoying images or blow up your title text with hundreds of keywords.

Also try to keep your content brief and on-topic. You don’t need to include full content for all of your articles or pages. Try adding a sentence or two with an alternate link out to your website in place of a long listing. The more brief your e-mail looks, the more likely it’ll pass spam inspection.