Email Design Best Practices for Newsletters & Templates


A pre-header is the small line before the HTML of your email starts. It has been used for years to combat the issue of email providers blocking images by default in most cases. Obviously everyone has seen the old standby of “If you are having trouble viewing this email, click here.” or some other version of that pre-header. At the very minimum include this in every HTML message that even has a single image.

Of course you can get a little more creative and make the most of that real estate, considering it is often times the first thing that your reader will see. Consider using that space for a line with more of a call to action instead of just an aid for those having issues. Some pre-headers to consider might be “Don’t wait! View all offers now in the online version.” This will appeal to those who could be in a hurry and to those who can’t see the message images.

This could also be used in newsletter style emails in which you would direct them to the archive on your website. Once they are on your site they may be more likely to read other editions of the newsletter or share interesting stories with a friend, thus increasing your engagement. That’s a far cry from just offering them help if they can’t see that one specific email.


Most people wonder if they should match their email navigation to their website navigation. We do want to convey the same credibility and context of your company in your email design that you would want from your website. However there are a lot of differences between an email and a website. You have to take into consideration the smaller size of course. Also people generally spend less time in an email than on a website and your navigation is not as essential to the user experience as it is on a website. In general the same look and feel, but an abridged version, with fewer options, is ideal.

One way to make the most out of an email navigation is to highlight the piece of navigation that is most important to you in this message. Are you focused on a clearance sale in your current message? Maybe you are offering a discount on shoes and that is a navigation item. Whatever it may be, if you highlight that section of your navigation in a stand out color or bold text you will dramatically increase your click through rates to that link.

If your email is more informational or has a lot of content, always consider a secondary navigation at the bottom of your message so your readers don’t get lost or lose interest and close the email. It gives them one more chance to end up on your website and become engaged


According to Smith-Harmon’s survey of 47 popular retail emailers, the average width of a retail email is 600-650px and around 650-700px for more informational or newsletter style emails. This size keeps your email on the screen without the need for a side scroll bar, and keeps it from being so narrow that your information scrolls down to the point of the reader getting bored or the email reader snipping your message. There isn’t a lot of wiggle room in this arena, you want people to see your message so stick to the standard sizes and spend the rest of your time on design and messaging.

Text / Image Ratio

For a business-to-business communication or an information-filled newsletter, it may make sense to keep the content fairly text-based and keep images to a minimum. In general however, for most retail newsletters, an equal balance between text and imagery is the best bet. This keeps the newsletter from appearing intimidating and potentially time consuming or pointless with too little content.

The rules of course change in the promotional email styling, however you do want to keep some text content so that rendering doesn’t become an issue for you. You would always avoid a single image email with no text to compensate.

Article Placement

According to a study by Smith-Harmon there is a direct correlation between the placement of an article/item in the layout, and the number of clicks each article or item receives.

It is of course not surprising that the most important placement of an article is in the very first position. It makes sense being that the first item is usually the most important to the sender, and the reader, and is often called out in the subject line. The interesting thing however is that there is an increase in click through rates on the last article or item in a mailer. It is an idea to consider saving something for that position that is not the most, but not the least, important to you and your subscribers.

Preview Pane Issues

We all know that no two subscribers view your email in the exact same way. Between different monitor sizes, different preview pane options in email readers, and the header choices either provided by the reader, or customizable by your subscriber, it’s anyone’s guess what they’ll see when your message arrives. For this reason you can’t just rely on your subject line to get people to open your message anymore.

The good news is that when you take a look at all the options your readers have you can narrow the most important piece of your email down to the 250 x 250 pixel “Opportunity Box”. Yes, that small of a box to get the reader to open and click through on your message. It’s not a lot of space so make the most of it.

Some ways to do that are to include your logo so they instantly recognize the message. Don’t leave too much space around it, which would be a waste. Include a great pre-header and include some information that will get their attention like “10 Tips” or “3 quick topics”. Make sure the words can be clearly read in that box, and in an informational message include quick links or bullets to give them an idea of what’s in the message.


When it comes to designing your layout there comes into question the option of one column or two columns. There are so many pros and cons to each one that most people don’t know where to start. The best way is to decide which of the benefits are going to mean the most to your subscribers.

For instance with a one column design you get an easy to scan, mobile friendly, and simple layout. If your readers can easily scan through your message to the most relevant information for them they are more likely to keep opening your emails in the future. The same goes for your mobile readers. They have to spend much less time scrolling about their screens on their mobile devices if you don’t include a second column of information that has to fit in the window. As always a simple design is better for rendering in any email reader so you’ll have less formatting issues coming through to your readers.

In a two column design you are able to incorporate quite a bit more into your message. Quick links, secondary content and ads are a great use of a second column. It is also good if you have a lot of information in your mailer, like you would in a newsletter-style layout.

You can utilize quick links at the top of your message, or in the sidebar, which are treated like a table of contents for users to quickly jump to different parts of the email message. This helps users from getting lost in lots of content. Secondary content, like a tips section or employee spotlight, would be separated from the main section of your email as to not take away from the feature; this is great for a two column layout. Finally, if you plan to do any sponsored emails in which you sell sections of your message to sponsors relevant to your readers; you have a place to put image ads without taking away from your message.

Leave a Comment

No Comments

More from our blog

See all posts