How To Design An Email

Bonus: Email Design Best Practices Checklist

Create an HTML email in minutes

Keep these 16 email copy and design elements in mind, and youll nail your email design like a pro.

  • Personalized engaging subject line.
  • Create calls to action designed for click-throughs.
  • Add UTM tracking code.
  • Dont forget the footer. It keeps you in compliance.

Use the tips in the post along with this email design checklist for every email campaign you send.

Using The Right Software And Applications

While everyone knows the importance of AI marketing strategies, business falters using the right software and applications to execute the strategies. For AI marketing strategies to succeed, you must use the most suitable software.

How can you select the right software? By auditing. Know what marketing challenges your company is facing, including decision-making, performance measuring, and conversion tracking. This way, you can select the right tool for marketing and thus design an AI marketing strategy that would reap benefits for your business.

In Summary: Make A Note Of All The Email Design Guide & Best Practices To Better Inform Engage And Convert Your Audience

The ROI of email marketing makes it a channel you simply cant overlook, but by putting a few simple email design tips into practice, you can make sure youre getting the best return possible.

Creating an effective email design doesnt mean you need to reinvent the wheel or even be a great designer or programmer. By using Venngages Email Maker, you can pair your excellent content with proven design methods to help boost read rates and engagementand keep your audience coming back for more.

Also Check: Why Will My Email Not Update

Creating A Ghost Table For Outlook On Windows

Before adding our main content container, we need to set up a Ghost Table: a rigid table with a fixed width that only renders in Outlook because its hidden inside some special Outlook-only conditional comments. We need to do this because our main container is going to use the CSS max-width property, and not all versions of Outlook for Windows support it. Without max-width support, the main container would explode to full-width when viewed in Outlook for Windows, so we need to contain it.

Replace the marker with the following markup:

< !--> < table role="presentation" align="center" style="width:600px "> < tr> < td> < !-->     < !--> < /td> < /tr> < /table> < !--> 

Note that the pixel width is set using CSS inside the style attribute, and not using as the HTML attribute, i.e. width=”600″. This is to ensure that Outlook correctly calculates the width when adjusting for different DPI settings on Windows. If you use the HTML attribute, you will find that the width of your email is calculated incorrectly and it will end up way too narrow.

Now we can go about adding our main content container, which is actually going to be a table.

Follow Upin Good Time

How to Create an Email Address with OzChat: 5 Steps

If youre sending an email, youre likely looking for a timely response. But with the large amounts of emails most people sort through each day, things can end up getting lost. As a general rule, a follow-up message should never come less than twenty-four hours after sending the initial email.

In other words: Dont be the person who sends a follow-up request two hours after sending. In extreme cases, that kind of behavior can even get you blocked. When youre taking more time and actually caring about the person on the other side of the email, youre immediately going to see a much higher response rate. I had to learn that the hard way, says copy chief Schafer.

You May Like: Delete Duplicate Emails In Outlook 2016

Put Your Best Face Forward

Work with different fonts to create different moods for your email. Pick from web safe fonts so that your email templates can be viewed in the original fonts, regardless of the device.

You can also go with purchased fonts, although they are less common. Always provide alternative web safe fonts along with purchased fonts. This will enable all contacts to view the email templates, even without the special fonts.

Grow Better With Really Good Email Design

With great email design, youll reach and resonate with your audience members more effectively, allowing you to grow better. Eye-catching and impactful emails will help you build long-lasting relationships and convert more people into paying customers and brand advocates. So, begin designing your emails while keeping the best practices and examples we reviewed in mind.

Editor’s note: This post was originally published in August, 2017 and has been updated for comprehensiveness.

Originally published Sep 25, 2020 6:30:00 AM, updated June 21 2021

Topics:

Recommended Reading: My Email Isn T Updating

Dont Send Too Many Messages In One Email

Have you ever wondered how many elements an average person can remember at one time? Psychologist Alan Baddeley found that peoples maximum information channel capacity is approximately 2 to 3 bits of information, which corresponds to the ability to distinguish between four and eight alternatives.

Dont overload your reader with too much information!

Use Alan Baddeleys insight when putting together your email or newsletter. Your message should contain between 5 and 9 separate pieces. However, if you really need to send more, try to divide your content into categories, where each category consists of no more than 4 items to process.

We follow this practice in our monthly newsletter. The message contains our main news and 3 other headlines to read.

Remember to distinguish your news or categories by clearly defining your sections using dividers or borders and white space. Breaking up your email by subjects with clear subheadings helps your reader scan the message and better understand your content.

Dont Give Too Many Choices

How To Design HTML Email Template || Send via Gmail || Newsletter || Invitation

Too much choice increases cognitive load on your readers, making them less likely to make a decision.

Think about what the minimum requirement is to get someone to click through to your website, then gradually introduce more of the required detail. Overloading people with too much choice at the start is only going to encourage task abandonment.

If you are trying to get your subscribers to choose a product and buy, don’t present all of the options in the email. Just get them through to your website, and start introducing the needed complexity there.

Recommended Reading: Mail Worldsecureemail

Creating Graphics For Your Message

The other important part of your mail is the graphics you choose for it. Graphics are an important complement to your text since our brains process them 60 thousand times faster than the words we read. Graphics can get your point across quickly and clearly and can get better results than the best-written copy.

A well-chosen picture can effectively persuade customers to buy better than the best text copy and it stays with them for longer. But what if you dont have a huge budget or a staff of graphic artists and you want to use the best possible visuals for your marketing campaigns? Find out more about making great graphics with free online tools.

  • analogous
  • colour triad

Learn more about the importance and role of colours in our blog post dedicated to the subject here.

What Tools To Use To Test Your Email Template

An email template that has not gone through a stringent QA or testing process is a recipe to quickly reduce your email subscribers, and also the sign of an inexperienced email marketer. Uplers provide hand-coded email templates that are tested against 40+ email clients. Yet, in case you make any alterations, it is a good practice to test your email templates once your email developer sends them across.

  • Email template rendering
  • Googles Accessibility Developers Tools
  • Wave Tool
  • Read Also: How To Recover An Old Email Account From Google

    Pay Attention To Hyperlinks

    Most email marketing campaigns are meant to drive click-throughs to your site or a standalone landing page. This is achieved by placing links inside of your messages.

    If youre building HTML emails, you can hyperlink virtually anything a piece of text, an image , or a call-to-action button.

    If youre using plain text emails instead, you can simply add your URL as a piece of text.

    If you do that, two things can happen: 1) your recipients email client will pick up that this is a URL and will automatically hyperlink it, or 2) your recipient will need to copy and paste the link into their browser window.

    Which approach should you use? In most cases, youll want to go for the HTML emails, and this is mostly related to tracking, which well cover in a moment.

    Before we go there, however, theres one more thing you should keep in mind. Its the importance of keeping your text-to-link ratio, which you can read more on in this post on improving your email deliverability.

    Optimising Buttons For Mobile

    How to Create an Email Account in cPanel

    Well turn our footer link into a nice fat button on smaller devices, since this will make it easier to tap with a finger.

    If we return to the < head> of the document, we can insert the following code inside our < style> block underneath our font rule:

    This media query will change the appearance of our button on screens that are narrower than 530px wide.

    Now if you refresh and make your screen smaller, you will see the link turns into a nicely tappable button:

    You May Like: How Do I Recover Deleted Emails From Gmail

    The Complete Guide To Designing For Email

    Designing for email is about getting to the point and making the most of the brief chance you have with your subscribers. You only get one shot, so it’s worth employing as many tricks in the book as possible to make sure your message gets through. The underlying principles are all about respecting your readers by giving them something valuable in return for their time which is, after all, the reason they signed up to hear from you in the first place.

    How To Write A Proper Email

    Whether youre an up-and-coming young professional or a seasoned manager, email writing is a vital aspect of business communication. And thanks to whats often seen as the mysteries of English grammar and the subtleties of the written word, it can be a daily struggle. Thats especially true if you have to motivate busy people to respond or address a potentially touchy subject. To write a great email, you need to know two things: common mistakes to avoid, and next-level strategies to get ahead.

    But first things firstyou have to know what a great email looks like if youre going to write one.

    Heres a tip:

    Read Also: How To Email A Video That Is Too Large

    Be Creative With Animations

    Of course, you have already heard and read that animation grabs more attention than static images. The next statement should be about the great sizes of these files and an advice to use only one animation per an email that goes next.

    There is no need to repeat those statements and to explain them. I will go deeper and tell you that, of course, the animation grabs more attention but that doesnt mean that you will improve an open rate or increase conversions.

    Remember, that animation doesnt show that you care about your users , doesnt help you to cover the email topic and doesnt improve user experience. Its better to consider that the animation is the element of fun and creativity.

    There is no need to explain that email animation is 100% usage of Gif files. All the technologies like Flash or Unity where you may create the animation will not work in email clients, so the GIF is the only choice. Thats why dont forget about GIF compressors that allow you to optimize email message size.

    Here is the cute example of animated email banner:

    Further Enhancements With Media Queries

    How to Create HTML Email in Gmail
    .col-lge 

    This will override the default max-width of 395px and ensure the text spans full width on all screen sizes up to 530px wide.

    Another thing we can fine-tune is the fact that the columns stack immediately once theres not enough room for them to sit together. In reality, there might be some cases where a users screen is a tiny bit smaller than 600px wide, perhaps on a tablet app with a fat sidebar or because they are using Gmail webmail with a narrow preview panel enabled. In these cases, we might want to ensure the two-colum layout does display, so we can configure this with our CSS.

    After the closing } of the media query above, add a second one:

    This one picks up where our previous one left off it went up to max 530px, then from 531px and up well ensure the columns always appear side by side by overriding our pixel max-widths and instead specifying percentages.

    So there we have it! All together, your < style> tag should look like this:

    If there is anything else you want to tweak with media queries, go ahead and do it here!

    Also Check: Mail Not Updating

    How To Integrate Email Design Into A Comprehensive Strategy

    Not sure if youre following design best practices effectively? Youre not alone. Marketing professionals and even graphic designers often try different layouts and messaging. Sometimes the process can feel like a guessing game. The way to know whats best is through a process known as A/B testing, also known as split testing.

    Lets say youre not sure which of two different email designs to use to express your message. Perhaps youre experimenting with the wording of your call-to-action button or you cant decide between subject lines. Make sure your two designs arent completely different otherwise it will be hard to determine whats working and whats not.

    Send one version to half your list and the other to the rest. Then, check your backend email reporting to determine which one is more successful in accordance with your goal be it open rates, click-through rates, or signups. By analyzing your metrics, youll have a clearer understanding of which design works best for your target audience.

    Once you have a solid grasp of the basics of email design, youll be ready to integrate email marketing into your comprehensive online marketing plan. If it sounds like too much to do, dont worry. You can use online tools like Constant Contacts content blocks and email templates to create email campaigns easily.

    Bonus: 2 Extra Design Elements To Consider

    1. ALT text

    Many people forget this, but we recommend you to add ALT texts to all the newsletter images you insert .

    The ALT text is an alternative text that’s displayed when an image file cannot be loaded or when people use screen readers to read your email newsletter. It makes sure that your message still comes across, even when the newsletter design isn’t fully displayed.

    2. Email footer

    Sure, it’s the end of your email but that doesn’t mean the email footer doesn’t need to be part of your newsletter design. You’d be surprised at how many readers scroll there. Keep it simple and concise. Most email footers contain the unsubscribe link, email preferences, social media links and contact information.

    Also, include a view in browser link to allow your subscribers to access the email in all its glory on their browser. You can add the browser link in the header of footer .

    Recommended Reading: Why Is My Mail Not Updating

    Popular Articles

    Related Stories

    Stay on top - Get the daily news in your inbox