16 efficient e-mail design finest practices for e-mail advertising and marketing
There are a variety of variables in your e-mail design, and trends are always evolving, so let’s get straight into finest practices.
Tip 1: Create a modular design system for frequent sorts of content material
Nice e-mail design begins with the content material—particularly, the kind of content material you should create area for. The design can’t simply look fairly; it must be useful.
Right here at Litmus, we use a modular email design system to create emails utilizing a reusable content material block. As a substitute of constructing each e-mail from scratch, a modular design system has generally used content material sections and designs you possibly can combine and match for every marketing campaign.
The Litmus e-newsletter makes use of modules to construct the content material
Whereas constructing modules takes time upfront, it saves you effort within the long-run. Earlier than you construct modules, ask your self:
- Are there sections repeated all through your emails? For instance, create a partial on your footer.
- What model tips do you should adhere to? Speak to stakeholders about colours, fonts, and spacing between modules.
- Will your emails embrace video? In that case, create a video testimonial block.
- Do you wish to embrace stay polls? There are tools for that, too.
“Course of-wise, I ask as many questions as attainable to get the challenge’s scope, so I can perceive what sort of content material will likely be within the e-mail. Particularly if it’s one thing like a brand new e-newsletter, I wish to make certain I’m asking for every thing and the kitchen sink.” — Hannah Tiner, Advertising UX Designer at Litmus
Tip 2: Use a responsive e-mail design
Responsive email design adapts to the machine the subscriber opens an e-mail on in order that the message appears nice throughout all platforms. You create responsive designs utilizing CSS media queries that detect the display screen dimension after which change the design accordingly. You might create these @media attributes for every new e-mail, however we advise responsive email templates to make your life simpler.
Tip 3: Be mindful general consistency
Create an email style guide to create an e-mail expertise that matches the remainder of your model. Are the weather you’re placing in your e-mail matching your branding information’s general tone and magnificence whereas nonetheless respecting e-mail? Take note of constant experiences and imagery throughout every iteration of your email templates.
Tip 4: Have a versatile e-mail framework
Electronic mail design imaginative and prescient and actuality don’t all the time align, so it’s finest to remain versatile. Create e-mail templates which have area so as to add or take away parts, like a banner right here or a button there, to adapt to every e-mail temporary shortly.
Tip 5: Consider constraints
Creating a phenomenal e-mail is a collaborative expertise, and realizing your design limits helps you to talk issues or preferences earlier than you’re too deep right into a challenge. Hannah Tiner, a Advertising UX designer, shared,
Set limits for particulars just like the quantity or sort of photographs, interactivity, and size.
Tip 6: Use UX design finest practices to tell the e-mail
Your emails are much less like a chunk of artwork in a gallery and extra like a handcrafted chair. Your subscribers use your emails, not simply have a look at them, so it’s useful to be taught some UX design fundamentals to spherical out your e-mail design abilities. Hannah Tiner added,
“As a lot as I can, I take into consideration the expertise of what utilizing the e-newsletter goes to be—relatively than simply the way it appears to me at a sure ratio. I’m fascinated about the place it would break and what it would appear to be in a bunch of the different previews in Litmus.”
On the similar time, e-mail is distinct from internet and print design. Be sure that your e-mail design isn’t making an attempt to do what the online can do, and respect the restrictions of it.
Tip 7: Design your hierarchy and call-to-action (CTA) for the e-mail objective
Ask your self: what’s crucial data to get throughout? Be sure to have a transparent understanding of the objective of the e-mail. Then, you need to use design ideas that service it.
Together with your objective in thoughts, you possibly can create a design that makes the method as clean as attainable.
This Dunkin Donuts e-mail is a Litmus team favorite with a compelling hierarchy and CTA.
Tip 8: Make progressive enhancements alongside the way in which
You’ve heard “the one fixed is change,” proper? That applies to your e-mail designs, too. Design with progressive enhancements in thoughts and know the place to push boundaries and the place to play it protected.
Deal with making a minimal viable product (MVP) that appears clear, useful, and can get the job completed. And know that it’s going to render on even essentially the most problematic of e-mail rendering engines.
From there, design for “good to haves.” Have these levels the place you already know you possibly can add progressive moments of shock and delight on your subscribers.
Tip 9: Scale back visible muddle by retaining it easy and targeted
Bear in mind to have sufficient white area in your designs. You wish to cut back visible muddle as a lot as attainable, and ensure your e-mail is obvious to learn and straightforward to scan. You possibly can even experiment with plain text style emails for max simplicity.
Tip 10: Make the most of compelling visuals
Email imagery catches consideration and helps your branding, however you must use it strategically. Listed below are just a few suggestions for excellent e-mail design visuals:
This Outdoorplay email is a good instance of a easy (but visually-driven!) e-mail.
Tip 11: Craft participating copy
Email copywriting and design work aspect by aspect to ship a message, so you should take into account copy size and placement. Here’s a free framework to maintain copy lengths throughout the ideally suited vary for emails.
Nice e-mail copy is compelling and suits in your designs.
Tip 12: Take note of typography and fonts
Your typography can carry as a lot visible energy as your imagery…so long as subscribers can see it. Web fonts and internet protected fonts are your two choices for creating stay textual content that appears and performs nice.
- Net protected fonts sign the browser to drag in pre-installed fonts in your subscribers’ units. They’re protected to make use of, however counting on these widely-available fonts limits your choices
- Net fonts render from recordsdata you host in your server or an exterior one, like Google or Adobe. These fonts supply extra design flexibility, however there’s the next likelihood they gained’t seem as you supposed in your subscribers’ inboxes
Tip 13: Use descriptive ALT textual content for photographs
Email accessibility is non-negotiable, and a technique to make sure everybody enjoys your emails is by including ALT textual content to pictures. Your ALT textual content must be brief however descriptive so it presents the identical expertise to subscribers with photographs turned off or utilizing display screen readers.
Recreation.gov describes every picture within the e-mail by means of ALT textual content.
Tip 14: Use dynamic content material to personalize e-mail design at scale
Dynamic email content—copy and visuals that replace inside an e-mail primarily based on the subscriber—helps you to create private emails with out designing 10 variations. Attempt including dynamic product photographs to desert cart emails or location-based particulars for transactional messages.
PrettyLittleThing makes use of Litmus Personalize to automatically adjust imagery primarily based on when a subscriber opens the e-mail.
Tip 15: Present a visual unsubscribe choice
Your unsubscribe button goes on the backside of your e-mail, however you shouldn’t bury it. Be sure that the hyperlink is simple to see and click on, and take into account including a preference center to let subscribers choose down as an alternative of choose out.
Tip 16: Optimize photographs for darkish mode
Greater than a third of subscribers view emails in Darkish Mode, which reveals your emails in a darker coloration scheme. There are 3 ways e-mail suppliers render Darkish Mode emails, and you’ll both depend on their strategies or code your individual coloration scheme. Optimizing emails for Darkish Mode is its personal subject, so try our guide to optimizing images for Dark Mode to get all of the juicy particulars.
Subscribers with Darkish Mode turned on may even see your e-mail with no change, a partial coloration invert, or a full coloration invert.
Utilizing Electronic mail Analytics to Enhance Your Designs
As a substitute of guessing at easy methods to enhance your e-mail design, use engagement information to be taught what actually works. Right here’s easy methods to use e-mail engagement to enhance your e-mail design.
Electronic mail Engagement Information
- If engagement drops on lengthy emails, minimize content material or redesign for brevity
- If image-heavy designs have excessive engagement, put money into extra illustrations and pictures for future campaigns
- If in case you have a transactional e-mail—like a password reset—that has low engagement occasions however excessive click on charges, your e-mail is doing its job nicely
- In case your product advertising and marketing e-mail has excessive engagement occasions however low click on charges, make the call-to-action simpler to search out
Electronic mail Consumer Information
- If nearly all of your subscribers open on desktop variations of Microsoft Outlook, it’s possible you’ll want to make use of more traditional email design approaches and Microsoft conditional feedback (MSO)
- If most of your subscribers are opening in Apple Mail (desktop or cellular), you possibly can code for the WebKit rendering engine
Put the following tips into observe with testing and optimizations
We go away you with one ultimate e-mail design tip—test everything. Your subscribers (and also you!) should see your emails precisely the way you labored so exhausting to attain, and some minutes of testing guarantee every thing is as an alternative.
Nonetheless unsure the place to begin? Take a look at our ultimate email checklist to get an in-depth walkthrough on our greatest suggestions for e-mail constructing, from design, to repeat, and past.
This text was initially revealed in October 2022 by Kimberly Huang. Up to date August 2023 by Steph Knapp.