HTML Email Design: 10 Golden Rules You Should Follow

This article was last updated on July 19, 2018

HTML email design gives you the freedom to experiment. It also increases your chances to get noticed with an attention-grabbing email design. People love visuals, indeed. So, if you bet on HTML email design, you will certainly make your campaigns look more attractive. While you escape the boring text-only messages, there are certain rules to follow, though. Here they are: 10 golden rules you should know about your HTML email design.

Rule No.1: Keep it simple.

The purpose of an HTML email design is to help the message get across. Complex design with too many elements in it may confuse your recipients. Therefore, you may not reach the desired effect. Keep the design simple and concise. Leave only the essentials, so it can serve its purpose and enhance the message effect.

Rule No.2: Focus on one call-to-action button.

This is the most valuable email design element, the reason your email marketing campaign was created. With this being said, you simply cannot neglect your call-to-action button. Moreover, you should design your template in a way that it leads to the call-to-action button. There are a few tricks that will help you get there:

• centered CTA button,
• arrows pointing at it,
• negative space around it,
• contrasting color,
• person or a cartoon character pointing or looking at the button and even more.

One more thing: always write a clear and crisp CTA copy. The user should know exactly what follows after clicking the button.

Rule No.3: Trim down the text.

Too much text may make your recipients back up. Keep your message short and intriguing.

If you are promoting articles, lessons, videos or other content, give your recipients only a little piece of information and then navigate them to your site for more info.

Rule No.4: Cut back on images.

A research by Constant Contact studied how the amount of images and text impacted the email click-through rates. After examining the results from 2.1 million emails sent, the team found that email campaigns with 3 or fewer images received the highest click-throughs.

Too many images may make your HTML email design look more cluttered. As a result, the recipient may get lost. Also, too many images may make your HTML email design heavier which would increase the loading time on some email clients. Not to mention that some email clients will simply block your images.

This example by GraphicMama uses just one image to promote Adobe Character Animator puppet templates and the effect is boosted by using contrasting colors.

Rule No.5: Add Alt tags.

A must-have rule. We already mentioned that some email clients block the images in received emails. When you give your images alt tags, you ensure that the recipient will know what the image is about. Otherwise, they will just see a blank field.

In addition, avoid setting fixed width and height to your images. If your recipient’s EPS blocks the email images, your email design will be left with huge blank areas which will simply not be pleasant to the eye.

Rule No.6: Set the width to 600px.

Some desktop and web email clients such as Outlook, Yahoo, AOLmail has set the standard for email width to 600px. They simply won’t display wider email templates properly. Due to these restrictions, 600px width has remained the standard for quite some time now and you might want to stick to it. Also, have in mind that people with lower desktop screen sizes might also not be able to see the HTML email template as it is.

Rule No.7: Fill the footer with info.

If you’ve read 60+ Little Email Marketing Tips for Your Big Email Marketing Success, you already know that abiding by the CAN-SPAM rules will help you stay out of your recipients’ spam folders.

According to the rules, you must include an Unsubscribe option, as well as info for your company, such as your physical address, contact information, etc. The footer is the perfect place to put all this information. Some brands go far and include a whole lot of information just to stay safe.

Rule No.8: Go res-pon-sive.

Many emails these days are opened on mobile devices or tablets, so being responsive is a must-have rule for your HTML email design. A research by MailChimp clearly shows that responsive email templates generate higher click-through rates than non-responsive templates. And according to a research by Litmus, 56% emails are opened on mobile devices.

If you want to learn more about responsive HTML email design, head over to The 6 Best Practices for Responsive HTML Email Design.

Rule No.9: Stay away from ‘heavy’ html email design.

There are plenty of reasons to avoid heavy HTML email design but probably the most important one is: Gmail is clipping emails exceeding 102kb. Being the most used webmail client, you simply cannot overlook this rule. According to a recent research, Gmail is accounted for 59% of email opens. So, if you want to make sure your email will be seen as it is, read Why is Gmail Clipping My Emails? and learn what you can do about it.

Rule No.10: Never skip testing.

There are significant differences between email coding and HTML for web. Unlike the latter, there aren’t universal rules and standards for email coding, yet. This is why your HTML email design needs to be tested on as many devices and clients as possible. This is the only way to ensure that your HTML email design will look good when opened in your recipients’ inboxes.

Luckily for you, there are online services which save you tons of time and allow you to do this testing in a matter of minutes. To learn more about email testing, check out What is Litmus Email Testing and What are the Alternatives?

In conclusion,

Using HTML email design is a great way to get your message across. The possibilities are endless but it turns out we need to abide by certain rules to have a successful campaign. Crossing fingers that this article was helpful for you. You are welcome to share your comments below.