{"id":54488,"date":"2024-11-21T15:05:14","date_gmt":"2024-11-21T20:05:14","guid":{"rendered":"https:\/\/www.litmus.com\/?p=54488"},"modified":"2025-04-08T16:22:09","modified_gmt":"2025-04-08T20:22:09","slug":"email-design-best-practices","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/email-design-best-practices","title":{"rendered":"Email Marketing Design Best Practices: 17 Key Things to Know"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_3b016f706a8f2176004ea377d3d888e0\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">Email design is one of the most important parts of your email marketing program. Whether you\u2019re <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-ab-testing-how-to\"><span style=\"font-weight: 400;\">A\/B testing<\/span><\/a><span style=\"font-weight: 400;\"> a new <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/page.litmus.com\/subscription-email-templates.html\"><span style=\"font-weight: 400;\">email template<\/span><\/a><span style=\"font-weight: 400;\"> or trying to boost conversions through <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/conversion-centered-design-email\/\"><span style=\"font-weight: 400;\">conversion-centered design<\/span><\/a><span style=\"font-weight: 400;\"> (CCD), your emails should be both beautiful and actionable.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Since email design encapsulates every visual element of your email, there\u2019s <\/span><i><span style=\"font-weight: 400;\">a lot<\/span><\/i><span style=\"font-weight: 400;\"> to understand and test.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This guide explores the email design best practices that should be the foundation of your <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/state-of-email-design-tools\"><span style=\"font-weight: 400;\">email design program<\/span><\/a><span style=\"font-weight: 400;\">!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">What is the importance of email design in your email marketing campaigns?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Email design is the process of strategizing, creating, and testing your email marketing campaigns\u2019 visual look and email layout. It\u2019s not enough for your emails to be pretty, though\u2014great email design is accessible, resonates with your target audiences, and inspires engagement.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, a bold, eye-catching email can lose impact if it\u2019s inaccessible (e.g. using an all-image format that prevents screen readers from conveying the content to visually impaired users). Likewise, impactful content displayed in a hard-to-read font or low-contrast color scheme will fall flat.<\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote class=\"blockquote\"><p>\u201cAccessibility is an investment in your ability to retain future subscribers at a higher rate.\u201d<\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/chadswhite\/\" target=\"_blank\" rel=\"noopener\">Chad S. White<\/a>, the Head of Research at Oracle Digital Experience Agency<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Email design is important because it influences the user experience, which affects email engagement, sales, satisfaction, and loyalty.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">What are the key elements of good email design?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Email design includes every visual element of your message, including:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Header<\/b><span style=\"font-weight: 400;\">: the visual introduction to your email that often has your logo<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Body content:<\/b><span style=\"font-weight: 400;\"> the font and layout choices of your content<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Call-to-action (CTA): <\/b><span style=\"font-weight: 400;\">the size, shape, color palette, and location of your buttons<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Images and visuals:<\/b><span style=\"font-weight: 400;\"> which images you choose, how you format them, and where you include them<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Footer:<\/b><span style=\"font-weight: 400;\"> the social links, unsubscribe button, and other legal info at the bottom of your message<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Interactivity<\/b><span style=\"font-weight: 400;\">: design elements like <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-create-an-interactive-email\"><span style=\"font-weight: 400;\">content accordions or in-email polls<\/span><\/a><span style=\"font-weight: 400;\"> that boost engagement\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Mobile-friendliness<\/b><span style=\"font-weight: 400;\">: what your email looks like across mobile devices<\/span><\/li>\n<\/ul>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_7d78d87c58c1c7fbe8f070d48f1b1ac4\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Design emails that convert<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>From layouts, to imagery, to CTAs\u2014learn the essential email design principles that will make your campaigns more impactful.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/foundations-of-email-design\">\n\t\t\t\t\t\tMaster email design\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>\n\n\n\n\t<div id=\"simple-text-block-block_c810b8401e4c1c8a792f4548ad7beb7a\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">17 effective email design best practices for email marketing<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There are a lot of variables in your email design. Consumer behavior is always evolving\u2014same with <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-marketing-design-trends\"><span style=\"font-weight: 400;\">marketing and design trends<\/span><\/a><span style=\"font-weight: 400;\">\u2014so let\u2019s get straight into best practices.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 1: Create a modular design system for common types of email content\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Great email design starts with the content\u2014specifically, the type of content you need to create space for. The design can\u2019t just look pretty; it needs to be functional.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here at Litmus, we use a <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-modules-and-modular-email\"><span style=\"font-weight: 400;\">modular email design<\/span><\/a><span style=\"font-weight: 400;\"> system to create emails using reusable content blocks. Instead of building every email from scratch, a modular design system has commonly used content sections and designs you can mix and match for each campaign.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/1n-1.png\" alt=\"\" \/><\/div>\n\n<p><i><span style=\"font-weight: 400;\">The Litmus newsletter uses modules to build the content<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">While building modules takes time upfront, it saves you effort in the long-run. Before you build modules, ask yourself:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Are there sections repeated throughout your emails? <\/b><span style=\"font-weight: 400;\">For example, create a <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/create-and-manage-dynamic-code-blocks-easily-with-partials\/\"><span style=\"font-weight: 400;\">partial<\/span><\/a><span style=\"font-weight: 400;\"> for your footer.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>What brand guidelines do you need to adhere to?<\/b><span style=\"font-weight: 400;\"> Talk to stakeholders about colors, fonts, and spacing between modules.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Will your emails include video? <\/b><span style=\"font-weight: 400;\">If so, create a <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/video-in-email\/\"><span style=\"font-weight: 400;\">video testimonial block<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b style=\"background-color: var(--bs-body-bg); font-size: 1rem; text-align: var(--bs-body-text-align);\">Do you want to include live polls? <\/b><span style=\"font-weight: 400;\">There are <\/span><a style=\"background-color: var(--bs-body-bg); font-size: 1rem; text-align: var(--bs-body-text-align);\" rel=\"noopener\" target=\"_blank\" href=\"https:\/\/page.litmus.com\/live-polls-and-social-proof.html\"><span>tools for that<\/span><\/a><span style=\"font-weight: 400;\">, too.<\/span><\/li>\n<\/ul>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote class=\"blockquote\"><p>\u201cProcess-wise, I ask as many questions as possible to get the project\u2019s scope, so I can understand what type of content will be in the email. Especially if it\u2019s something like a new newsletter, I want to make sure I\u2019m asking for everything and the kitchen sink.\u201d<\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/hannahtiner\/\" target=\"_blank\" rel=\"noopener\">Hannah Tiner<\/a>, Digital Communications Specialist at AFSCME, former Marketing UX Designer at Litmus<\/figcaption><\/figure>\n<h3><span style=\"font-weight: 400;\">Tip 2: Use a responsive email design<\/span><\/h3>\n<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/using-responsive-email-templates\"><span style=\"font-weight: 400;\">Responsive email design<\/span><\/a><span style=\"font-weight: 400;\"> adapts to the device the subscriber opens an email on so that the message looks great across all platforms. You create responsive designs using CSS media queries that detect the screen size and then change the design accordingly. You could create these @media attributes for each new email, but we suggest <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/subscriber-love-email-templates\/\"><span style=\"font-weight: 400;\">responsive email templates<\/span><\/a><span style=\"font-weight: 400;\"> to make your life easier.\u00a0<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-blue  p-4\">\n\t\t<div class=\"mx-auto col-12 col-lg-6\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Your next campaign awaits<\/p>\n\t\t\t\t<p>Choose from a wide range of professionally designed email templates to make your campaigns stand out and save time.\n<\/p>\n\t\t\t\t<button class=\"button-blue download\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-gallery\" class=\"text-white text-decoration-none\">Browse templates<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/09\/download-blog-cta-09232024.svg\" width=\"221\" height=\"175\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h3><span style=\"font-weight: 400;\">Tip 3: Keep in mind overall consistency<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Build an <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/why-you-need-email-brand-guidelines-and-what-to-put-in-them\"><span style=\"font-weight: 400;\">email style guide<\/span><\/a><span style=\"font-weight: 400;\"> to create an email experience that matches the rest of your brand identity. Are the elements you\u2019re putting in your email matching your branding guide\u2019s overall tone and style while still respecting email? Pay attention to consistent experiences and imagery across each iteration of your <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/templates\"><span style=\"font-weight: 400;\">email templates<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 4: Have a flexible email framework<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Email design vision and reality don\u2019t always align, so it\u2019s best to stay flexible. Create <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-templates\"><span style=\"font-weight: 400;\">email templates<\/span><\/a><span style=\"font-weight: 400;\"> that have space to add or remove elements, like a banner here or a button there, to adapt to each email brief quickly.\u00a0<\/span><\/p>\n<p><span style=\"background-color: var(--bs-body-bg); font-size: 1rem; text-align: var(--bs-body-text-align);\"><div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/3n-1-scaled.jpg\" alt=\"\" \/><\/div>\n<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 5: Think of constraints<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Creating a beautiful email is a collaborative experience, and knowing your design limits lets you communicate concerns or preferences before you\u2019re too deep into a project. <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/hannahtiner\/\"><span style=\"font-weight: 400;\">Hannah Tiner<\/span><\/a><span style=\"font-weight: 400;\">, shared:<\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote class=\"blockquote\"><p>&#8220;We try to include only three to five events in our Litmus Experience newsletter\u2014so I may push back if we want to include more than five or figure out a dynamic way to show it.&#8221;<\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/hannahtiner\/\" target=\"_blank\" rel=\"noopener\">Hannah Tiner<\/a>, Digital Communications Specialist at AFSCME, former Marketing UX Designer at Litmus<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Set limits for details like the number or type of images, interactivity, and length.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 6: Use UX design best practices to inform the email<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your emails are less like a piece of art in a gallery and more like a handcrafted chair. Your subscribers use your emails, not just look at them, so it\u2019s helpful to learn some UX design basics to round out your email design skills.<\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote class=\"blockquote\"><p>&#8220;As much as I can, I think about the experience of what using the newsletter is going to be\u2014rather than just how it looks to me at a certain ratio. I\u2019m thinking about where it will break and what it will look like in a bunch of the <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\">different previews in Litmus<\/a>.&#8221;<\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/hannahtiner\/\" target=\"_blank\" rel=\"noopener\">Hannah Tiner<\/a>, Digital Communications Specialist at AFSCME, former Marketing UX Designer at Litmus<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">At the same time, email is distinct from web and print design. Make sure your email design isn\u2019t trying to do what the web can do, and respect the limitations of it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Send with total confidence<\/p>\n\t\t\t\t<p>Preview emails in 100+ clients, catch errors, and ensure accessibility. Cut QA time in half.<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\" class=\"text-white text-decoration-none\">Start email testing<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 7: Design your hierarchy and CTA for the email goal<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Every email should have one goal, like getting subscribers to click the <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/click-tap-and-touch-a-guide-to-cta-best-practices\/\"><span style=\"font-weight: 400;\">call-to-action button<\/span><\/a><span style=\"font-weight: 400;\"> to your sales page or <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-read-rates\"><span style=\"font-weight: 400;\">increasing the read rate<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ask yourself: what is the most important information to get across? Make sure you have a clear understanding of the goal of the email. Then, you can use design concepts that service it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With your goal in mind, you can create a design that makes the process as smooth as possible.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/4n.png\" alt=\"\" \/><\/div>\n\n<p><i><span style=\"font-weight: 400;\">This Dunkin Donuts email is a <\/span><\/i><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/favorite-emails-summer-2023\"><i><span style=\"font-weight: 400;\">Litmus team favorite<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> with a compelling hierarchy and CTA button.\u00a0\u00a0<\/span><\/i><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 8: Make progressive enhancements along the way<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You\u2019ve heard \u201cthe only constant is change,\u201d right? That applies to your email designs, too. Design with progressive enhancements in mind and know where to push boundaries and where to play it safe.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Focus on creating a minimal viable product (MVP) that looks clean, functional, and will get the job done. And know that it will render on even the most problematic of email rendering engines.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">From there, design for \u201cnice to haves.\u201d Have those stages where you know you can add progressive moments of surprise and delight for your subscribers.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 9: Reduce visual clutter by keeping it simple and focused<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Remember to have enough white space in your designs. You want to reduce visual clutter as much as possible, and make sure your email is clear to read and easy to scan. You can even experiment with <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/best-practices-for-plain-text-emails-a-look-at-why-theyre-important\"><span style=\"font-weight: 400;\">plain text emails<\/span><\/a><span style=\"font-weight: 400;\"> for maximum simplicity.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 10: Utilize compelling visuals<\/span><\/h3>\n<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-102-of-email-code-working-with-images\"><span style=\"font-weight: 400;\">Email imagery<\/span><\/a><span style=\"font-weight: 400;\"> catches attention and supports your branding, but you have to use it strategically. Here are a few tips for great email design visuals:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use a <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/faux-video-a-fallback-for-video-in-email\"><span style=\"font-weight: 400;\">faux video<\/span><\/a><span style=\"font-weight: 400;\"> as a fallback\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-animated-gifs-in-email\"><span style=\"font-weight: 400;\">Use animated GIFs<\/span><\/a><span style=\"font-weight: 400;\"> to add personality (in small doses)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Avoid <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/why-you-shouldnt-send-image-only-emails\"><span style=\"font-weight: 400;\">image-only emails<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add texture with <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\"><span style=\"font-weight: 400;\">background images<\/span><\/a><\/li>\n<\/ul>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/2n-1.png\" alt=\"\" \/><\/div>\n\n<p><em>This <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/files.reallygoodemails.com\/emails\/whats-light-on-weight-with-strong-engineering.png\">Outdoorplay email<\/a> is a great example of a simple (yet visually-driven!) email.<\/em><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 11: Craft engaging copy<\/span><\/h3>\n<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/email-copywriting-kit\"><span style=\"font-weight: 400;\">Email copywriting<\/span><\/a><span style=\"font-weight: 400;\"> and design work side by side to deliver a message, so you need to consider copy length and placement. <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/docs.google.com\/document\/d\/10ng4xEnc0tlgUYvDkuZDIKOyE7YHuvGksgj6V-NUgCU\/edit\"><span style=\"font-weight: 400;\">Here\u2019s a free framework<\/span><\/a><span style=\"font-weight: 400;\"> to keep copy lengths within the ideal range for emails.<\/span><\/p>\n<img decoding=\"async\" class=\"aligncenter wp-image-76631 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/image2-1-1024x794.png\" alt=\"screenshot of foundations of email copywriting template\" width=\"1024\" height=\"794\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/image2-1-1024x794.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/image2-1-300x233.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/image2-1-768x596.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/image2-1.png 1310w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\n<p><i><span style=\"font-weight: 400;\">Great email copy is compelling and fits in your designs.<\/span><\/i><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-blue rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Strengthen your email copywriting skills\n<\/p>\n\t\t\t\t<p>Learn how to craft compelling email copy that engages your audience and drives conversions. \n<\/p>\n\t\t\t\t<button class=\"button-blue download\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/foundations-of-email-copywriting\" class=\"text-white text-decoration-none\">Master copywriting<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/09\/download-blog-cta-09232024.svg\" width=\"221\" height=\"175\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h3><span style=\"font-weight: 400;\">Tip 12: Pay attention to typography and fonts<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-typography-fonts\"><span style=\"font-weight: 400;\">typography<\/span><\/a><span style=\"font-weight: 400;\"> can carry as much visual power as your imagery\u2026 as long as subscribers can see it. <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\"><span style=\"font-weight: 400;\">Web fonts<\/span><\/a><span style=\"font-weight: 400;\"> and <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\" target=\"_blank\">web safe fonts<\/a> are your two options for creating live text that looks and performs great.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Web <\/b><b>safe<\/b><b> fonts<\/b><span style=\"font-weight: 400;\"> signal the browser to pull in pre-installed fonts on your subscribers\u2019 devices. They\u2019re safe to use, but relying on these widely-available fonts limits your options<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Web fonts render<\/b><span style=\"font-weight: 400;\"> from files you host on your server or an external one, like Google or Adobe. These fonts offer more design flexibility, but there\u2019s a higher chance they won\u2019t appear as you intended in your subscribers\u2019 inboxes\u00a0<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Tip 13: Use descriptive ALT text for images<\/span><\/h3>\n<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-guide-accessible-emails\"><span style=\"font-weight: 400;\">Email accessibility <\/span><\/a><span style=\"font-weight: 400;\">is non-negotiable, and one way to ensure everyone enjoys your emails is by adding ALT text to images. Your ALT text needs to be short but descriptive so it offers the same experience to subscribers with images turned off or using screen readers.<\/span><\/p>\n<h3><img decoding=\"async\" class=\"aligncenter wp-image-76643 size-full\" style=\"background-color: var(--bs-body-bg); font-size: 1rem; text-align: var(--bs-body-text-align);\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/image3-1.png\" alt=\"\" width=\"1224\" height=\"1576\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/image3-1.png 1224w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/image3-1-233x300.png 233w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/image3-1-795x1024.png 795w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/image3-1-768x989.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/image3-1-1193x1536.png 1193w\" sizes=\"(max-width: 1224px) 100vw, 1224px\" \/><\/h3>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.recreation.gov\/\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">Recreation.gov<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> describes each image in the email through ALT text.<\/span><\/i><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 14: Make sure your design is scannable<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">On average, a subscriber spends <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/trends-in-email-engagement\"><span style=\"font-weight: 400;\">8.97 seconds with an email<\/span><\/a><span style=\"font-weight: 400;\">. If your email is long in text, consider your visual anchor points (like <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-bulleted-lists-in-html-email\" target=\"_blank\">html bullet<\/a> points, headings, etc.) for readability, which can be achieved with color, bolding, emojis, and typography.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 15: Use dynamic content to personalize email design at scale\u00a0<\/span><\/h3>\n<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/dynamic-email-content-to-increase-engagement\"><span style=\"font-weight: 400;\">Dynamic email content<\/span><\/a><span style=\"font-weight: 400;\">\u2014copy and visuals that update within an email based on the subscriber\u2014lets you create personal emails without designing 10 versions. Try adding dynamic product images to abandon cart emails, an <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-create-an-add-to-calendar-link-for-your-emails\" target=\"_blank\">add to calendar link<\/a> for event-based emails, or location-based details for transactional messages.<\/span><\/p>\n<img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/PrettyLittleThing.png.webp\" alt=\"\" width=\"400\" height=\"462\" \/>\n<p><i><span style=\"font-weight: 400;\">PrettyLittleThing uses Litmus Personalize to <\/span><\/i><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/litmus-for-email-automation\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400;\">automatically adjust imagery<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> based on when a subscriber opens the email.<\/span><\/i><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 16: Provide a visible unsubscribe option<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-dos-and-donts-of-unsubscribes\"><span style=\"font-weight: 400;\">unsubscribe button<\/span><\/a><span style=\"font-weight: 400;\"> goes at the bottom of your email, but you shouldn\u2019t bury it. Make sure the link is easy to see and click, and consider adding a <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-preferences-center-best-practices\"><span style=\"font-weight: 400;\">preference center<\/span><\/a><span style=\"font-weight: 400;\"> to let subscribers opt down instead of opt out.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tip 17: Optimize images for Dark Mode<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">More than a <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-client-market-share-infographic\/\"><span style=\"font-weight: 400;\">third of subscribers<\/span><\/a><span style=\"font-weight: 400;\"> view emails in Dark Mode, which shows your emails in a darker color scheme. There are three ways email providers render Dark Mode emails, and you can either rely on their methods or code your own color scheme. Optimizing emails for Dark Mode is its own topic, so check out our guide to <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\"><span style=\"font-weight: 400;\">Dark Mode<\/span><\/a><span style=\"font-weight: 400;\"> to get all the juicy details.\u00a0<\/span><\/p>\n<img decoding=\"async\" class=\"aligncenter wp-image-76635 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/Image-5-1-1024x504.png\" alt=\"\" width=\"1024\" height=\"504\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/Image-5-1-1024x504.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/Image-5-1-300x148.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/Image-5-1-768x378.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/Image-5-1-1536x756.png 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/Image-5-1-1800x886.png 1800w, https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/10\/Image-5-1.png 1804w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><i><span style=\"font-weight: 400;\">Subscribers with Dark Mode turned on may see your email with no change, a partial color invert, or a full color invert.<\/span><\/i>\n<h2><span style=\"font-weight: 400;\">Using email analytics to improve your designs<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Instead of guessing at how to improve your email design, use engagement data to learn what really works. Here\u2019s how to use email engagement to improve your email design.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Email engagement data<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>If engagement drops on long emails, <\/b><span style=\"font-weight: 400;\">cut content or redesign for brevity<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>If image-heavy designs have high engagement, <\/b><span style=\"font-weight: 400;\">invest in more illustrations and photography for future email marketing campaigns<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>If you have a <\/b><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-templates\/transactional\"><b>transactional email<\/b><\/a><span style=\"font-weight: 400;\">\u2014like a password reset\u2014that has low engagement times but high click rates, your email is doing its job well<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>If your product marketing email has high engagement times<\/b><span style=\"font-weight: 400;\"> but low click-through rates, make the CTA easier to find<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Email client data<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If the majority of your subscribers open on desktop versions of Microsoft Outlook, you may need to use <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/templates.mailchimp.com\/development\/css\/outlook-conditional-css\/\"><span style=\"font-weight: 400;\">more traditional email design approaches<\/span><\/a><span style=\"font-weight: 400;\"> and Microsoft conditional comments (MSO).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If most of your subscribers are opening in Apple Mail (desktop or mobile), you can code for the WebKit rendering engine.<\/span><\/li>\n<\/ul>\n<p><b>Pro tip:<\/b><span style=\"font-weight: 400;\"> a tool like Litmus <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-analytics\"><span style=\"font-weight: 400;\">Email Analytics<\/span><\/a><span style=\"font-weight: 400;\"> can give you advanced audience insights, like read time, device usage, Dark Mode, and more for more informed decision making when it comes to email design.<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-12 text-center\">\n\t\t\t\t<p class=\"bold fs-4\">See what you&#8217;ve been missing<\/p>\n\t\t\t\t<p>Unlock powerful email insights with Litmus Analytics. Track engagement, device usage, and more to optimize future campaigns. \n<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-analytics\" class=\"text-white text-decoration-none\">Dive into data<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"d-none\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h2><span style=\"font-weight: 400;\">Essential email design tools to use<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Specialized tools are key to creating effective email designs, yet <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/state-of-email-innovations\"><span style=\"font-weight: 400;\">our latest research<\/span><\/a><span style=\"font-weight: 400;\"> found that many designers still rely on software that isn\u2019t optimized for email\u2019s unique demands. For example, Adobe Photoshop, while powerful, wasn\u2019t built to handle the dynamic and interactive nature of modern email.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead of viewing email as a static combination of text and images, consider it a responsive layout made up of adaptable code components. To bring this vision to life, it\u2019s important to choose tools specifically designed for the unique needs of email design.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Top email marketing design tools\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Let\u2019s explore the design tools that make it all possible\u2014starting with <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/state-of-email-design-tools\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">the most popular email design tools<\/span><\/a><span style=\"font-weight: 400;\">:<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-106589\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/State-of-Email-Innovations-Asset-5.png\" alt=\"Adobe Photoshop: 37%\nFigma: 23%\nAdobe Illustrator: 22%\nCanva: 18%\nAdobe InDesign: 14%\" width=\"1080\" height=\"1350\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/State-of-Email-Innovations-Asset-5.png 1080w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/State-of-Email-Innovations-Asset-5-240x300.png 240w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/State-of-Email-Innovations-Asset-5-819x1024.png 819w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/08\/State-of-Email-Innovations-Asset-5-768x960.png 768w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/>\n<p>&nbsp;<\/p>\n<ul>\n<li><strong>Adobe Photoshop<\/strong><span style=\"font-weight: 400;\"><strong>:<\/strong> 37%<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><strong>Figma:<\/strong> <span style=\"font-weight: 400;\">23%<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><strong>Adobe Illustrator<\/strong><span style=\"font-weight: 400;\"><strong>:<\/strong> 22%<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><strong>Canva<\/strong><span style=\"font-weight: 400;\"><strong>:<\/strong> 18%<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><strong>Adobe InDesign:<\/strong> <span style=\"font-weight: 400;\">14%<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Coding with email builders<\/span><\/h3>\n<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/state-of-email-trends\"><span style=\"font-weight: 400;\">Our data shows<\/span><\/a><span style=\"font-weight: 400;\"> that the most common method for building emails is reusing and modifying code from a previous email. However, the <\/span><i><span style=\"font-weight: 400;\">preferred<\/span><\/i><span style=\"font-weight: 400;\"> approach is leveraging a library of standardized components, snippets, or partials for greater efficiency and consistency.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-106404\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/Coding-with-email-builders.png\" alt=\"Chart on how email marketers build and code emails\" width=\"1080\" height=\"1080\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/Coding-with-email-builders.png 1080w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/Coding-with-email-builders-300x300.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/Coding-with-email-builders-1024x1024.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/Coding-with-email-builders-150x150.png 150w, https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/Coding-with-email-builders-768x768.png 768w\" sizes=\"(max-width: 1080px) 100vw, 1080px\" \/>\n<p><strong>Our recommendation?<\/strong><span style=\"font-weight: 400;\"> Opt for a drag-and-drop builder (Litmus Builder is our <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\"><span style=\"font-weight: 400;\">email builder<\/span><\/a><span style=\"font-weight: 400;\"> of choice) and lean on <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-templates\"><span style=\"font-weight: 400;\">email templates<\/span><\/a><span style=\"font-weight: 400;\"> to streamline your process. Pair that with an <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-design-system\"><span style=\"font-weight: 400;\">email design system<\/span><\/a><span style=\"font-weight: 400;\"> and you\u2019ll have everything you need for success.<\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote class=\"blockquote\"><p><span style=\"font-weight: 400;\">&#8220;<\/span><span style=\"font-weight: 400;\">Ever since we started using a modular design system, my email production time has been cut down significantly. Emails that used to take me hours, now can be done in half the time! Combining the modules that I created with Litmus Design Library has only increased my productivity and now I can create some emails in as little as 10 minutes!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">P.S. I know this quote sounds totally marketing-y and corn-y but it\u2019s 100% <\/span><span style=\"font-weight: 400;\">true. I would be lost without my modular design system.&#8221;<\/span><\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/carinslater\" target=\"_blank\" rel=\"noopener\">Carin Slater<\/a>, Manager, Lifecycle Email Marketing, Litmus<\/figcaption><\/figure>\n<h2><span style=\"font-weight: 400;\">Put these tips into practice with testing and optimizations using Litmus<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We leave you with one final email design tip\u2014<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\"><span style=\"font-weight: 400;\">test everything<\/span><\/a><span style=\"font-weight: 400;\">. Your subscribers (and you!) deserve to see your emails exactly how you worked so hard to achieve, and a few minutes of testing ensure everything is in its place.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Still not sure where to start? Check out our <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-email-checklist\"><span style=\"font-weight: 400;\">ultimate email checklist<\/span><\/a><span style=\"font-weight: 400;\"> to get an in-depth walkthrough on our best tips for email building, from design, to copy, and beyond.<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green  p-4\">\n\t\t<div class=\"mx-auto col-12 col-lg-6\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Design emails in record time with Litmus Builder<\/p>\n\t\t\t\t<p>Create on-brand emails quickly with our email builder. No HTML skills? No problem. Test as you build. Let&#8217;s start building!\n<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-analytics\" class=\"text-white text-decoration-none\">Book a demo<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here are email design best practices to know to ensure your emails are beautiful and actionable. Get 11 tips\u2014straight from the Litmus\u2019 own email designer, Hannah Tiner.<\/p>\n","protected":false},"author":25,"featured_media":73963,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[152,478,10116,10264],"blog_category":[10303],"class_list":["post-54488","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-call-to-action","tag-design","tag-modular-building","tag-subscriber-experience","blog_category-email-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Email Marketing Design: Best Practices for Better Engagement<\/title>\n<meta name=\"description\" content=\"Discover the essentials of email marketing design, from best practices to effective strategies. Learn how to create engaging, visually appealing emails that convert.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/email-design-best-practices\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Email Marketing Design Best Practices: 17 Key Things to Know\" \/>\n<meta property=\"og:description\" content=\"Discover the essentials of email marketing design, from best practices to effective strategies. Learn how to create engaging, visually appealing emails that convert.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/email-design-best-practices\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-21T20:05:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-08T20:22:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Email-design-best-practices-11-Key-things-to-know.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1382\" \/>\n\t<meta property=\"og:image:height\" content=\"726\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Email Marketing Design: Best Practices for Better Engagement","description":"Discover the essentials of email marketing design, from best practices to effective strategies. Learn how to create engaging, visually appealing emails that convert.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/email-design-best-practices","og_locale":"en_US","og_type":"article","og_title":"Email Marketing Design Best Practices: 17 Key Things to Know","og_description":"Discover the essentials of email marketing design, from best practices to effective strategies. Learn how to create engaging, visually appealing emails that convert.","og_url":"https:\/\/www.litmus.com\/blog\/email-design-best-practices","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2024-11-21T20:05:14+00:00","article_modified_time":"2025-04-08T20:22:09+00:00","og_image":[{"width":1382,"height":726,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Email-design-best-practices-11-Key-things-to-know.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/email-design-best-practices#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/email-design-best-practices"},"author":{"name":"","@id":""},"headline":"Email Marketing Design Best Practices: 17 Key Things to Know","datePublished":"2024-11-21T20:05:14+00:00","dateModified":"2025-04-08T20:22:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/email-design-best-practices"},"wordCount":9,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/email-design-best-practices#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Email-design-best-practices-11-Key-things-to-know.png","keywords":["Call-To-Action","Design","Modular Building","Subscriber Experience"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/email-design-best-practices","url":"https:\/\/www.litmus.com\/blog\/email-design-best-practices","name":"Email Marketing Design: Best Practices for Better Engagement","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/email-design-best-practices#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/email-design-best-practices#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Email-design-best-practices-11-Key-things-to-know.png","datePublished":"2024-11-21T20:05:14+00:00","dateModified":"2025-04-08T20:22:09+00:00","description":"Discover the essentials of email marketing design, from best practices to effective strategies. Learn how to create engaging, visually appealing emails that convert.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/email-design-best-practices#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/email-design-best-practices"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/email-design-best-practices#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Email-design-best-practices-11-Key-things-to-know.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/07\/Email-design-best-practices-11-Key-things-to-know.png","width":1382,"height":726,"caption":"Email design best practices blog header"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/email-design-best-practices#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Email Marketing Design Best Practices: 17 Key Things to Know"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/54488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=54488"}],"version-history":[{"count":18,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/54488\/revisions"}],"predecessor-version":[{"id":114210,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/54488\/revisions\/114210"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/73963"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=54488"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=54488"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=54488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}