Tips for Improving Your Email Layout

In our last blog post, we talked a little bit about how you approach your strategy when developing an email campaign (https://handysends.com/blog/handysends-creating-your-email-strategy/). In previous posts, we covered more of the nuts and bolts of setting up a campaign as well.  In this post, we’ll cover some of the technical features of creating an effective email that will help your messages reach your customers more effectively.

If you are familiar with SendGrid by now, you know that you can start building emails by using SendGrid’s built-in templates or creating or importing your own template using the built-in code or design editor.

SendGrid Design Layout

If you are creating your own messages, here are some things to consider:

1.    Use analytics to help create an HTML-compatible messages: Email Service Providers vary quite a bit on how they interpret HTML code. If you have data about your users already, it can help you test out and refine your message. For instance, if you know that 95% of your users are using as certain provider, you can focus your design for that platform. If you don’t have analytics, you can use available resources to find out what some of the most common platforms are. The SendGrid 2019 Email Benchmark and Engagement Study has useful statistics on this topic.

2.    Optimize your layout- Generally single-column layouts work better across various platforms. Also, if you make sure to set your width to 600 pixels, your email should fit across all ESPs. And last, using table tags instead of div tags will also better support your layout since not all email clients support div tags. By following these layout guidelines, you can make sure your message has the best chance of showing up as you intended in the customer inbox.

3.    Include the right text- Whether you are using SendGrid templates or your own templates, styling fonts is pretty easy to do by changing settings in design mode. When you are coding your own messages, make sure to include only in-line CSS, since externally linked files generally get blocked by some ESPs. You also want to make sure to include alt-text to caption graphics in the event that your images are blocked or don’t load correctly. Always remember to use a standard font so that it does not throw off the alignment of your text and make it unreadable.

Example of Single Column Layout

 

Test it out- Once you are finished creating your email, you can always send yourself test messages to several platforms to troubleshoot errors using the “Test Message” feature in SendGrid. While looking at a sample email on your iPhone, desktop, and tablet is a great first step, using tools like Litmus or Email on Acid that will enable you to quickly see how you message renders on dozens of combinations of devices and clients, which will also save testing time.

Now that you know some of the ways you can make sure you provide an effective email message that will look good across platforms, you can head to SendGrid and star testing out what you have learned. Remember, you can use these tips in creating transactional emails as well. SendGrid also has transactional templates that you can use in SendGrid’s repository of Open Source Transactional Email Templates. Happy Sending!