Five Design Tips for Optimal Email Deliverability


Posted on

Design has become increasingly important in creating an enjoyable, and even acceptable, experience for today’s average web user. This trend is not going away. On the contrary, as users become more savvy and accustomed to friendly design, the bar for quality design will continue to rise.

However, good design does not necessarily mean fancy graphics and never-before-seen user interactivity, such as that which we find in the always innovative Google Doodles. Design often hinges more so on simplicity and functionality, as is the case with HTML emails. The importance of email design is two-fold: first, design plays a big part in getting your email into your customers inbox; once that hurdle is cleared, design helps encourage the user interaction that represents your true end goal.

The challenge of email design is a significant one. Even the best-designed emails may still have trouble making it to the inbox. Assuming you do earn your way past the spam filters, poor design might inspire the recipient to delete the message, or worse, label it as spam.

Luckily there are some proven best practices to ensure recipients not only receive but also read and interact with your messages:

1. Don’t Rely On Images to Communicate Your Email Value Proposition. Often, email readers tend to turn images off by default as a security measure. Therefore, focus on the HTML code and use images sparingly to ensure your emails render properly in the various email readers. You can set up individual email accounts at the different service providers to send test messages or use a email preview tool to check how your email renders with images turned off before you deploy. In this way, you can ensure that you have enough text to entice the subscriber to display images and read your entire email.

2. Use the ALT tag & store images on a web server: Complete the alt tag with a description of each image so recipients will know what the image is that they are missing before they download. If the image contains a special offer, make sure the alt tag communicates that. You want the reader to download your full message and click on the offer. Also, don’t embed your images in the email but rather store them on your server and link to them in your email. This will prevent broken images or avoid triggering spam filters that categorize your email as junk.

3. Don’t use CSS. CSS support varies among email clients. Some strip it out entirely. Instead, use standard HTML despite the flexibility and ease CSS provides. If you must use CSS, link to it rather than embedding it in the email.

4. Double check your code. Make sure all of your tags are valid and closed. Spammers make mistakes. You should ensure that your code is a clean as possible to avoid triggering spam filters.

5. Include a browser link to your message. If all else fails, you want to give the recipient an easy way to access your message. Include a link at the top of your message so they can view your email in their favorite browser.

Bonus Tip: Always include an unsubscribe option. Whether you link to a preference center or a direct link to an unsubscribe button, make sure you make it as easy as one click for a recipient to remove themselves from your list. The alternative for the subscriber is to report your message as spam. Spam complaints are used by ISPs to determine future delivery of your messages. If your complaint rate is too high, your messages will go undelivered.

By following these tips and constantly upping your design game, you’ll enjoy better deliverability and encourage greater engagement from your customers, followers and subscribers.

Tags: , , , , , , , , , ,


Director, Developer Relations at @SendGrid. Passionate about bringing people together around things they love. I tweet at @TimFalls.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>