Email design is a mix of art and science. You can have the best email body copy ever written, but if your design and layout don\u2019t support it, it can still flop. I know. I\u2019ve been focused on email marketing for more than 20 years, and I\u2019ve seen the good, the bad, and the ugly in email design.<\/p>\n
<\/a><\/strong><\/p>\n I often start client engagements with an audit of their past email marketing efforts. I see the same design and layout errors over and over again, and when we correct them, we inevitably see a boost in performance. Not just opens and clicks \u2014 <\/span>but conversions which are what really matter.<\/p>\n So, let me give you some free advice on how to boost your email performance with email design best practices.<\/p>\n Table of Contents<\/strong><\/p>\n What is email design?<\/a> <\/a> <\/p>\n <\/a> <\/p>\n In marketing, the message is important, but so is how you present it. Problems with design and layout can render your awesome email unreadable. Here are some examples of this I see over and over:<\/p>\n The lack of contrast between font and background colors, making the content unreadable. In contrast, great email design supports your strategy by increasing open rates, click-through rates, and conversions, while enhancing the user experience and reinforcing your brand.<\/p>\n There are a lot of tools you can use to design emails (we\u2019ll cover some of them later in this article). But they aren\u2019t a replacement for understanding best practices in email design.<\/p>\n Here are some of the simple-to-fix design issues I see frequently. As you look over these best practices, take a minute to review your templates and see if they need an update. I\u2019ll go into detail on each.<\/p>\n <\/a> <\/p>\n There are three elements of your email that appear in your recipient\u2019s inbox (hopefully!) without any effort on their part. They are:<\/p>\n Your from address This is the \u201cprime real estate\u201d you have to entice recipients to open your email.\u00a0If you don\u2019t engage readers here, you won\u2019t engage them at all.<\/p>\n Here are tips for each of the three key elements of your email program.<\/p>\n There is always an \u201cactual\u201d email address that\u2019s required for an email to be sent. But here we\u2019re going to talk about the friendly \u201cfrom\u201d address, which is what should appear in your recipients\u2019 inboxes.<\/p>\n If you neglect to provide a friendly from address, your actual from address will show up in the inbox, which is not a best practice.<\/p>\n Here are a few examples from my inbox:<\/p>\n\n All of these are from the New York Times, but as you see, the friendly from addresses (and some of the actual from addresses) are different.<\/p>\n The first from address is what most of their online publications and promotions carry \u2014 just the brand. But NYT Wirecutter and NYT Cooking, which offer product recommendations and recipes, respectively, each have a friendly from address that includes copy that differentiates them from other NYT publications as well as an abbreviation for the brand (NYT).<\/p>\n This is great for readers, like me, because I always look forward to the NYT Cooking newsletters and open them as soon as they arrive. While I enjoy the other content, it\u2019s not a must-read like the cooking content is.<\/p>\n The last friendly from address, El Times \u2014 <\/span>you may have guessed it \u2014 is the Spanish language version of the NYT newsletter. Here the friendly from aligns with the language used in the newsletter.<\/p>\n You might be wondering: Should you include something other than just the brand in your <\/strong>friendly from addresses<\/strong>?<\/strong><\/p>\n If it will help the readers more easily identify content of interest to them, the answer is yes!<\/p>\n Another thing you may have heard is that including a person\u2019s name in the friendly from address will help boost your open rate. In truth, it depends. But if there is a person who is associated with the content in the email, by all means, include a person\u2019s name. Just be sure that your brand or organization name is there too.<\/p>\n Here are a few examples of how to do it right, from my inbox:<\/p>\n\n In each of these, the brand is there (Citycast named their email newsletter \u2018Hey DC\u2019) as well as a person\u2019s name.<\/p>\n It\u2019s not that your subject line should be only 25 characters long \u2014 it\u2019s that that\u2019s all you are guaranteed the recipient will see in the inbox, so make those first 25 characters count.<\/p>\n I find that subject line testing is often overused, but in some cases it makes sense. I\u2019ve tested this 25-character rule over and over again and it\u2019s never failed me. Is the lift in bottom-line performance like conversion rate or revenue-generated-per-email-sent dramatic? Not usually, but even a lift of 10% adds up over time.<\/p>\n For example, the case study below is based on work I did with a client during the holiday season. They were in the midst of their \u201c12 Days of Christmas Sale\u201d and they were leading with this phrase in each of their subject lines. The offer, which was different every day, followed that phrase.<\/p>\n So we did a test \u2026<\/p>\n\n We moved the offer, which is what recipients really cared about, to the beginning of the subject line and we got a 14.4% boost in revenue-generated-per-email-sent. You can read all the details here<\/a>.<\/p>\n Preheader text is another misunderstood element of the inbox view \u2014\u00a0master it and you\u2019ll be head and shoulders above your competitors. The preheader text appears either after or below the subject line; the subject line is usually bold, while the preheader text is not.<\/p>\n Here are a few examples:<\/p>\n\n In this example, Monumental Sports Network does a good job with their preheader text. They use it to expand on the subject line. You should do the same.<\/p>\n Don\u2019t:<\/p>\n Leave it blank Do use it for:<\/p>\n Secondary key messages Want to learn more about preheader text? I was obsessed for a while. Here\u2019s a good place to start<\/a>.<\/p>\n For most email marketing messages, copy is king. Copy is what\u2019s going to motivate the reader to take the action you want them to. Here are some tips to get you on the right track.<\/p>\n It\u2019s not that your readers are narcissists, but you need to give them a reason to read and act on your email. The way to do that is with benefit-oriented copy, or to put it more bluntly, copy that clearly states what\u2019s in it for them (WIIFT).<\/p>\n Note:<\/strong>\u00a0This is true for the subject line, preheader text, and the copy in the body of your email.<\/p>\n One way to do this is to use the words \u201cyou\u201d and \u201cyour\u201d generously, while using \u201cwe,\u201d \u201cour,\u201d and your company name sparingly. For instance:<\/p>\n\n I always try to imagine the reader, also known as the target audience, when I write copy. To do this, I think about:<\/p>\n Who they are If you can get into your reader\u2019s headspace, you\u2019ll be better able to write copy that motivates them to action. Want more? Here\u2019s an article to help you write better body copy<\/a>.<\/p>\n Inverted pyramid style just means putting the most important information first. By getting to the point, you won\u2019t risk boring your reader.<\/p>\n Here\u2019s an example from work with one of my clients:<\/p>\n\n See what we did there? We told readers, right up front, what we wanted them to do. Then we spoke about who the nominees were. This is important. You want them to understand why what you\u2019re telling them is important, so you don\u2019t lose their interest.<\/p>\n Here are some more tips on writing body copy<\/a>.<\/p>\n It\u2019s rare that people read emails in detail. Most of us skim, looking for something of interest. As a result, you have to make sure your email is easy to skim. One of the best ways to do this is to keep your paragraphs short.<\/p>\n Many years ago (like 20 or more) I read a case study from Microsoft about writing for online audiences. They said that paragraphs should be 5-\u00bc lines (not sentences, but lines) or less to make them easy to skim. I wish I had a link to the case study. I cannot find it, but I have lived by this rule ever since \u2014\u00a0and it works.<\/p>\n Here\u2019s an example from work from one of my clients:<\/p>\n\n Which one of these do you find more readable? If you\u2019re like most people, the one on the right, with shorter paragraphs and bullet points (we\u2019ll talk about those in a minute) will be easier to skim and your eye will gravitate toward it. This is just one of the tips on body copy discussed here<\/a>.<\/p>\n Anytime I have a list of things that need to be included in email or online copy, I make it a list. You should too.<\/p>\n Bullet-pointed lists<\/a>, as you can see in the example above, are naturally skimmable. Notice how there\u2019s a blank line between each bullet point? This is also helpful, as white space like this aids in readability. Otherwise, the bulleted list would look like a block of text that your eyes don\u2019t want to read (just like the sample on the left above).<\/p>\n An email without an effective call-to-action (CTA)? It\u2019s like a car without an engine. You\u2019re unlikely to get any movement out of it.<\/p>\n Here are a few tips to make sure your CTAs drive action.<\/p>\n We\u2019ll cover buttons versus text links first. Buttons get more attention, so your primary CTAs, or any CTA that you really want people to engage with, should be buttons.<\/p>\n Here\u2019s a chart showing monthly newsletter clicks by CTA format:<\/p>\n\n Do you see what I see? More than 50% of the clicks are happening on buttons. Only 10% or fewer clicks are taking place on text links.<\/p>\n Bonus tip #1:<\/strong> Look at the data under video \u2014 16% to 29% of newsletter clicks. When we say video, we mean a screenshot of a video that, when clicked, takes the recipient to a landing page where the video plays. Videos are a great way to engage readers. If email copy loves buttons, email readers love videos. <\/p>\n Bonus tip\u00a0#2:<\/strong> Do you see the data under image? It\u2019s not as high as video, but it\u2019s higher than text links. That\u2019s because people will try to click on the images in your emails. I highly recommend you don\u2019t disappoint them. Make sure their click lands them on a page with content relevant to the image, either a blog post, an article, a product page, or something else. <\/p>\n Now let\u2019s talk about bulletproof buttons.<\/p>\n In olden days (and still on the web today), buttons were\/are images. But that\u2019s not a good idea in email, due to image blocking (refer to best practice #10 for more on that.)<\/p>\n Bulletproof buttons aren\u2019t images. They are table cells with a colored background and rich text copy which is linked to your landing page. Since they aren\u2019t images, they will appear even if images are blocked. If you want to make them pill-shaped instead of rectangular, you can add white images at the corners to change the look of the shape.<\/p>\n Bulletproof buttons aren\u2019t difficult to build in HTML, but drag and drop interfaces make it even easier to include them. So do it!<\/p>\n Want more? Here are some additional tips on effective CTAs<\/a>.<\/p>\n Whenever I see \u201cClick Here\u201d I am transported back to 1995. Back then, we had to tell people to click. The World Wide Web was relatively new and clicking was not yet a learned behavior.<\/p>\n But now? Everyone knows to click. So consider your CTA copy another opportunity to make the case for the reader taking the action you desire.<\/p>\n Here are some examples for inspiration:<\/p>\n\n Source<\/em><\/a><\/p>\n Copy may be king, but images are queen when it comes to email marketing. Here are some tips to make effective use of them.<\/p>\n I have spoken to many organizations that are using image-only emails for their sends. We will talk through the pros and cons, but let\u2019s just start with a visual.<\/p>\n Here\u2019s an example from my inbox of an image-only email:<\/p>\n\n Wait, why are we looking at it with images disabled? Because many programs that recipients use to read your email messages still disable images by default. While not as prevalent as it used to be, image blocking is still an issue \u2014 see this case study<\/a>\u00a0I did with a client that proves it.<\/p>\n If you can convince your recipients to whitelist<\/a> your sender address, that usually enables images by default. Usually.<\/p>\n But why risk it?<\/p>\n Most senders using image-only emails cite that it\u2019s easier than sending HTML. No need for a coder or a drag-and-drop editor. Just have a designer create an image, and slice it up if you have more than one link, and then send it off.<\/p>\n Some also like the control. I worked with a membership organization that created their own font. They were sending image-only emails because that\u2019s the only way they could ensure that the copy would be in their proprietary font, not in a default font that was on the recipient\u2019s computers.<\/p>\n But if images are disabled or if it lands in the junk mail folder, they\u2019ll see something like the version on the left of the example.<\/p>\n And one more reason to stop sending image-only emails: Now that many inbox providers are using AI to generate summaries of emails for recipients, you\u2019ll want to be sure there is copy there for the AI to read to build the summary. We\u2019ve seen reports of summaries that just talk about how to unsubscribe from the email, since all that the AI could read was the footer.<\/p>\n A hero image is a large, prominent image at the top of a webpage, usually spanning the full width. They can be great for websites but not so much for email. That’s\u00a0because of the image blocking we talked about in the last tip.<\/p>\n Here\u2019s an example from my inbox:<\/p>\n\n I\u2019ve done a lot of testing of hero images vs. no hero image, and no hero image almost always wins. Instead of a hero image at the top I like to either:<\/p>\n Good: <\/strong>Put a rich-text headline above the hero image, or <\/p>\n Better:<\/strong> Make your image half-width and put a rich-text headline next to it <\/p>\n This ensures that there\u2019s something at the top of the email to engage readers, not just a blank space that they need to scroll past to get to your valuable content.<\/p>\n Do you see the image above, in Tip #11? At the top left and right of the \u201cImages Enabled\u201d image I\u2019ve blurred out the brand name and logo of the sender to allow them their anonymity.<\/p>\n I didn\u2019t have to do that on the \u201cImages Disabled\u201d image because both their brand name and their logo were embedded in the image. Neither were seen when images were disabled. If they had a headline there (which I see a lot), that would not have been seen either.<\/p>\n Moral of the story:<\/span> If you want your recipients to read it, make it rich text, not part of an image.<\/p>\n Unless you\u2019re selling a visual product, like a piece of furniture or a dress, it\u2019s probably the copy that\u2019s going to convince your readers to engage and learn more.<\/p>\n If yours is a visual product, by all means, use an image of it. But if it\u2019s not, don\u2019t clutter up your email messages with stock photography. I\u2019m talking about images of business people sitting around a table in a conference room. Or an attractive, well-dressed person smiling in front of a computer with a headset on. Even a picture of that perfect family standing outside their perfect house.<\/p>\n It doesn\u2019t matter what you\u2019re selling, stock photography screams \u2018inauthentic.\u201d<\/p>\n But here\u2019s what does work:<\/p>\n A picture of your CEO or your prospect\u2019s sales rep next to his signature, if the email is from him. The question I often get asked is \u201cImages or no images?\u201d But that\u2019s not the right question. Use images when they provide value, but skip them when they do more harm than good.<\/p>\n Looking for more? Here are additional tips on the use of images in email<\/a>.<\/p>\n You know how, in the real world, we have ramps to help the disabled, and anyone else challenged by steps, to access buildings? The Web Content Accessibility Guidelines (WCAG)<\/a> are similar guidelines about accessibility for websites and email messages.<\/p>\n Unfortunately, WCAG guidelines aren\u2019t as widely implemented as they should be. But the changes required are much less difficult than building a ramp, and, like ramps, they not only help the disabled, but all your readers. Below are two tips to get you started.<\/p>\n If you\u2019d like to learn more, check out the a11y.email blog<\/a> from Sarah Gallardo. Sarah is an expert on online accessibility, with a focus on email.<\/p>\n Look at the copy samples below. Which do you find easiest to read? Which are the most difficult to read?<\/p>\n\n Options 1 and 3 passed the color contrast test. Options 2 and 4 did not. Can you see the difference in readability?<\/p>\n It\u2019s easy and free\u00a0to test for color contrast. I like to use the WebAIM Contrast Checker<\/a> for this, but there are other tools out there. It doesn\u2019t matter which you use, as long as you use one.<\/p>\n You don\u2019t want people struggling to read the copy in your email messages.<\/p>\n Alt tags<\/a> are another simple, free way you can increase the accessibility of your email messages. First and foremost, alt tags help those who are visually impaired and use a reader to engage with your email. The alt tags are read by screen readers, so that those who can\u2019t see the image understand what\u2019s in it.<\/p>\n Alt tags are also shown when images are blocked, but they’re usually in a very small font and after a note from the inbox provider explaining why the image was blocked. Honestly, they aren\u2019t much help here.<\/p>\n But these do help those who are visually impaired, which is reason enough to take an additional minute or two to provide an alt tag for each image. They also have an impact on SEO<\/a>.<\/p>\n One of my least favorite asks from clients is to provide a brief to \u201cjust freshen up\u201d their email design. Why? Because any material change you make could negatively impact engagement.<\/p>\n I prefer to use scientific method<\/a> to test into changes. This requires you to analyze the current design and identify strengths and weaknesses based on the quantitative data.<\/p>\n Once you\u2019re done that, you can outline qualitative changes to address the weaknesses. Then you do an A\/B split test to see which version, Control (old) or Test (new), your audience prefers.<\/p>\n It doesn\u2019t matter what I like, what you like, what worked for my client last week, what a friend of yours said worked for their organization last month. All that matters is how your recipients do \u2014 or do not \u2014\u00a0engage with the design.<\/p>\n <\/a> <\/p>\n There are a number of email design tools with a wide range of capabilities (some completely unrelated to email design!). Here are some popular examples.<\/p>\n HubSpot\u2019s Email Marketing software<\/a> allows you to create, design, personalize, and optimize all of your emails.<\/p>\n You don\u2019t need any IT or coding knowledge, and you can easily customize mobile-friendly emails. The software allows you to A\/B test emails to determine which designs work best.<\/p>\n Additionally, it includes an AI-generated email feature<\/a> that can significantly enhance your productivity.<\/p>\n As a BEEPro user, you can design responsive emails in just minutes.<\/p>\n Smart design tools provide you with a quick way to format your emails and ensure your layout complements your content.<\/p>\n You can also customize and save various email design templates so your messaging and branding is consistent.<\/p>\n EngageBay<\/a> offers thousands of free HTML email templates for various industries.<\/p>\n You can customize these prebuilt templates, personalize them to reflect your brand image, and even automate the campaigns \u2014 all without writing a single line of code. EngageBay also offers A\/B testing and scheduling to help you craft the perfect email campaigns.<\/p>\n You can also integrate these templates with EngageBay\u2019s CRM, making creating and managing subscriber lists easy.<\/p>\n With over 100 templates offered, MailChimp<\/a> allows you to customize your email design for your target audience.<\/p>\n If you\u2019re someone who does <\/em>have coding experience, and you want to take your design a step further, MailChimp offers you the ability to code your template too.<\/p>\n Stripo<\/a> requires no HTML knowledge to create and design professional email templates. All of their pre-made templates are responsive so readers can easily view them via any device.<\/p>\n You can also sync your current email service provider (ESP) with the software to access all of your email and contact information from a central location.<\/p>\n As a collaborative email builder, Chamaileon<\/a> gives you the ability to invite members of your team to collaborate on your designs.<\/p>\n The software ensures your emails will have a responsive design and automatically comes with over 100 pre-made templates to customize for specific recipients.<\/p>\n While these tools can help you create visually appealing emails, it’s also valuable to see how other successful companies are designing their emails. For inspiration and ideas, check out our curated list of effective email marketing examples<\/a>.<\/p>\n These real-world examples can help you understand how to apply design principles and best practices to your own email campaigns.<\/p>\n
\n Why Email Design Matters<\/a>
\n Email Design Best Practices<\/a>
\n Email Design Tools<\/a>
\n Email Design Examples<\/a> <\/p>\nWhy Email Design Matters<\/strong><\/h2>\n
\n All-image emails which look like literally nothing when images are blocked by default (which some inbox providers still do).
\n Even little things, like text links versus buttons, can make a big difference. <\/p>\nInbox View<\/h3>\n
\n Your subject line
\n Your preheader text <\/p>\n1. Use a meaningful \u201cfrom\u201d address.<\/h4>\n
2. Engage recipients with the first 25 characters of your subject line.<\/h4>\n
3. Make your preheader text support your subject line.<\/h4>\n
\n Restate the subject line
\n Keep the same form each time <\/p>\n
\n Providing dates
\n Any additional information that will build on the subject line and motivate the recipient to open and act on your email <\/p>\nCopy<\/h3>\n
4. Focus your copy on what\u2019s in it for your readers.<\/h4>\n
\n What\u2019s important to them
\n What would entice them to take the action the email is asking for
\n Where they will be when they are reading this email <\/p>\n5. Use inverted pyramid style when you write body copy.<\/h4>\n
6. Keep your paragraphs short.<\/h4>\n
7. Email copy loves bullet points.<\/h4>\n
Calls-to-Action<\/h3>\n
8. Use bulletproof buttons in your emails \u2014\u00a0not text links.<\/h4>\n
9. Make your calls-to-action benefit-oriented.<\/h4>\n
Images<\/h3>\n
10. Don\u2019t send image-only emails.<\/h4>\n
11. Hero images are good for websites\u00a0but not for email.<\/h4>\n
12. If you want it read, don\u2019t embed it in an image.<\/h4>\n
13. Use images that support the copy.<\/h4>\n
\n In a newsletter, a small version of the featured image tied to an article you\u2019re including, to provide a visual cue that the reader has landed in the right place.
\n Authentic photography (my favorite free source is Unsplash.com<\/a>) that illustrates the point of the copy without looking like a stock photo. <\/p>\nAccessibility<\/h3>\n
14. Make sure you have adequate color contrast.<\/h4>\n
15. Include alt tags on all your images.<\/h4>\n
Optimization<\/h3>\n
16. Test into design changes whenever possible<\/h4>\n
\nEmail Design <\/strong>Tools<\/strong>
\n<\/h2>\n1. HubSpot<\/strong><\/h3>\n
2. BEEPro<\/strong><\/h3>\n
3. EngageBay<\/strong><\/h3>\n
4. MailChimp<\/strong><\/h3>\n
5. Stripo<\/strong><\/h3>\n
6. Chamaileon<\/strong><\/h3>\n