Ultimate Email Design Best Practices: 15 Tips You Can't Afford to Skip
CraftING captivating, spam-proof emails is as easy as 1, 2, 3, … 15.
Think about the best branded emails that turn up in your inbox. What’s the secret to their success? And, even if you knew what the secrets were, how the heck do you actually apply those coveted tips and tricks to your own email marketing?
This in-depth guide is packed to the gills with 15 tips designed to ensure that your next email marketing campaign is engaging, inclusive, boosts your site traffic, loads quickly, and doesn’t get you in deep doo-doo with the Federal Trade Commission. Word to the wise, it’d be a good idea to bookmark this post and refer back to it when the time comes for drafting a message to your subscribers.
Let’s do this thing.
Fig. A
The Inbox View
-
Aside from getting your email to land in the inbox, a great subject line is what makes sure your email actually gets opened, and writing a real banger means making the most out of every character. This topic deserves its own post, and we have all kinds of tips to help you craft scroll-stopping subject lines, which you should def pause and check out.
-
Preview text is the unbolded secondary copy that comes after your subject line in the inbox view. It’s the third thing (besides the sender name and subject line) that a reader sees, and it’s kind of a bonus mini billboard, or in movie buff terms, the extended trailer for your email content inside.
Sometimes adding preview text gets overlooked in the design process, and in that case, your customer’s email provider will simply show the first snippet of text from within the email. That sounds handy, but sometimes awkward stuff like a “View in Browser” link can accidentally make its way in there. We don’t know about you, but “Having trouble viewing this email?” isn’t really what I want as the opening line for our email trailer?!
Need some preview text samples and inspo? Our Scroll-Stopping Subject Lines blog post has that covered, too!
Fig. B
The Header
-
It’s an industry standard best practice to include a consistent header with your business logo at the top of every email campaign you send. This steadfast design choice reminds readers who you are, builds brand recognition, and on some level, makes people feel safe because your content feels familiar, reliable, and therefore trustworthy. While including a logo might be common knowledge, many businesses forget to actually link their logo back to someplace important (like their homepage).
Go check your email templates and headers, and be sure that your logo drives traffic back to your site. (Seriously, do it now. We’ll wait right here for ya.
-
Have you ever opened an email, excited to read what’s inside, but instead see a blank page staring back or some weird, half-loaded graphics? Whether its from bad wifi, broken code, or a glitch in your email provider, sometimes the inbox just isn’t working.
A ‘View in Browser’ link points to a web-hosted version of your email, which is created automatically by your email marketing service and stored on a server. Think of the ‘View in Browser’ link as a handy fail safe. Including it at the top of every email campaign helps recipients who either can't view HTML emails or have image downloading switched off, view the full version of your email.
If your email marketing tool allows, feel free to customize the wording for your link (so long as it’s clear and concise).
Here are some easy variations to get you started:
Having Trouble? View in Browser
Email Not Working? Try Web View
Don’t See Images? Try the web version of this email instead
View This Email in My Browser
Fig. C
The Email BoDy
-
In other words, thou shall not put all the text in a JPG. Say it with us now: “Thou shall NOT put all the text in a JPG.” If you leave here today remembering one thing, let this be it. Actual type is much easier to edit (or copy/paste) than text on an image, and it takes up less storage space. It’s a win-win. Heck, keep reading and you’ll find that it’s actually a win-win-win-win-win-win.
Emails are not posters, they are not printed brochures. They are digital first and print second (maybe even print never!). Like your website and other digital marketing channels that promote your business, email needs to be flexible, mobile responsive, and accessible to all. Unfortunately, a static image file is none of those things, and we cannot tell you how many times we’ve seen even big brands get this wrong.
Designing your emails with an even 50/50 mix of images (actual images, not pictures of words) and live, coded text is the best and only way to design emails:
It ensures your emails make it to the inbox (instead of the spam folder!)
It makes sure your content looks good on every device.
It keeps your message visible even when images are off.
It’s screen reader-friendly and accessible for those using assistive technology.
A Note on Typography
We know what some of you may be thinking right now: “But, my brand fonts don’t look right when I code them in!” OK, sure, there are some limitations and wild realities regarding custom fonts and how they load for different providers and device combinations. That doesn’t mean you have to sacrifice form for function. A skilled email designer with device and ESP knowledge and basic coding skills can create stunning, custom email typography that works with your brand. Ahem, POD email packages cover all that and more.
-
Have you ever read an email that was one long, unbroken paragraph of endless blather? Of course you haven’t, it hurts your eyes to even think about it, right? Even if you’ve gotten emails like that before, ten internet bucks says you never actually read them.
If you’ve got a lot of information to include, there are some ways to organize and present it for easy digestion:
Styling headlines and subheads in a few sizes and weights for hierarchy
Bolding key phrases within paragraphs
Using bulleted/numbered lists
Writing short and punchy paragraphs (3 sentences or so)
Putting can't-miss-it info into containers (like a pull-quote box) for better visibility
-
A marketing email just isn’t a marketing email without a clear call to action (CTA). CTAs link your readers with mutually beneficial actions like scheduling a call or buying a product. In essence, they’re hyperlinks hooked to a short phrase (like “Schedule an Appointment” or “Add to Cart”), but your readers are likely to blow right past some plain old text with an underline. That’s right, this looks like a job for … a button! Buttons outperform text link CTAs every time. In fact, big red buttons have proven to be the most effective in all our tests (If red isn’t one of your brand colors, select the brightest hue that is).
Here are some of our best tips for making buttons that click, click, click boom:Always use the coded button module in your builder to make your buttons bulletproof in every inbox.
Never make a fake button using an image file. JPGs masquerading as buttons isn’t user-friendly.
Reserve the boldest, highest contrast color from your brand, and use it for all things clickable—especially buttons.
Consider using a filled button for high priority CTAs that you really want to standout, and use an outlined style for secondary/less important clicks.
Make ‘em beefy—a minimum 40 pixels wide—big enough for a finger to click without clicking anything nearby by mistake.
Don’t forget the padding! Buttons need some clear space around them so that they stand out within the email and from each other.
Don’t fret about hover styling, since emails don’t support hover functionality anyhow.
-
Email builders give you the tech to easily personalize content to your subscribers. Even something as simple as addressing people by their first name (which can be done with personalization tokens as long as your readers have filled out their user profiles) makes a big difference.
Some personalization ideas to get you thinking (and sending) like a pro:Greet readers by first name. Of course, be sure to customize a default in case someone’s name isn’t on file (Ex. “Buddy”).
Share product recommendations based on previous orders, recently viewed items, or messages about their abandoned carts.
Customize coupons to match your subscribers’ location or shopping habits (i.e. free shipping versus in-store only).
Share content based on preferences your subscribers have shared with you (like favorite color, favorite food, style of clothes, etc.)
Fig. D
Images + Email
-
With email design, images should only be as big as they need to be. Anything too large will needlessly fill up the inbox storage of all the fine folks who were kind enough to subscribe to your emails. Lighter KB weights will help increase your loading speed, so don’t be afraid to go into Photoshop or your fave image editing software (Adobe Express, Canva, what have you) and slim down your images. TinyJPG is a free and easy optimizer that works right in your browser!
But, how big DO images need to be?
Most emails are viewed at a maximum page width of 600 pixels on desktop, and half that on mobile, but Retina display is a curve ball that requires doubling the overall pixel dimensions to keep things looking sharp. All that to say, here’s our rule of thumb:
For Full-Width Images
Min: 600 px wide / Max: 1200 px wideFor Half-Width/2-Column Images
Min: 300 px wide / Max: 600 px wide
And, what file types work best?
JPG: The go-to choice when you don’t need a transparent background
PNG: Great for high-quality graphics with transparency (No awkward white boxes behind your image!)
GIF: Very lightweight option for short animations, or simple graphics with few colors that need transparent backgrounds
-
Alt text is a description that you can attach to images. Including it is a must to ensure that your emails are accessible to visually impaired users. Screen reading tools audibly describe media content by way of the alt text. To audience members that don’t use screen readers, the alt text is invisible unless you hover over an image. It will also appear to people that turn off images in their inbox for quicker load times.
ALT TEXT HOUSE RULES
Be descriptive, but watch the length. When an email client blocks an image, the alt text will be limited to the width and height of the image container. In other words, you don’t have unlimited space. If your alt text is more than a short sentence, consider putting some of that info in body copy instead.
Don’t be repetitive.
Use each alt text as an opportunity to sneak in new and helpful information that adds to the experience instead of boring readers with redundant text.Include any words within the image.
If you remember Tip 5 above, you know better than to cram your JPGs with words, but sometimes a few sneak there way in for totally legit reasons. If someone in a pic is holding a sign that says “100% Organic” for example, add it to your alt text, too, so the detail doesn’t get lost for some viewers.
SOME GOOD ALT TEXT EXAMPLES
Image: Picture of a dog wearing a hat and drinking a milkshake (if you have an image like this, please send it in … y’know, for science.)
Alt Text: “Golden retriever in a fez + milkshake + crazy straw”
Image: A row of product photos with star rating graphics and prices and descriptions included in text below
Alt Text: ”Moxy Blue & Gold Runners — 4 stars!”; “Blaze High Tops in Electric Teal—4 stars!”; etc.
Image: An event poster for a record swap event with name and details embedded into the graphic
Alt Text: “Endless crates of vintage vinyl”
(But, remember Tip 5 … you should repeat the event name and details in the main body of your email as well!)
-
Well, first off, having links in your email means there are things for readers to click on, and that means more potential for engagement and more ways for you to measure success for your campaign. But, there’s another reason to consider adding links to your images, and it mostly for style. Let us explain.
If you use Gmail, have you ever noticed a persistent little down arrow graphic that shows up in the lower right corner of images when you hover over them in your inbox? Well, Gmail adds this download functionality (and tiny graphic) to unlinked images by default. It looks kinda lame, and in most cases isn’t very helpful (unless you want your subscribers to download an image?!)
Instead of offering useless download functionality, take the time to link your images back to relevant content on your site. It’s probably more valuable to your readers, and it can boost site traffic and thus SEO for you.
-
Remember that email is a digital channel, and while people tend to think of it as a fairly limited platform, there are some cool and surprising things you can achieve when you get creative.
Swap out those static JPGs and get funky with it. We love to play with transparent PNGs, animated GIFs, and use emojis liberally, especially when we’re light on brand visuals and need to spice things up tout suite.
Here’s a crash course that’ll have you making giffies in a jiffy:Don’t start with a blank frame! If animation isn’t supported for someone, their GIF could leave a big, blank hole.
GIFs can run once, play in a loop, or boomerang back and forth. Choose the right playing option for your animation!
Does your GIF have too much junk in the trunk? Chop out unnecessary frames or try limiting colors to reduce file size.
Fig. E
The Footer
-
Parting is indeed such sweet sorrow, but getting embroiled in legal drama is even more tragic. All of your subscribers have the right to unsubscribe at any time using a link that must be included at the bottom of your email. Failure to include an unsubscribe link can result in fines from the FTC. So don’t ever forget to put it in your footer!
Some words of wisdom on crafting a good unsubscribe experience:Make sure your unsubscribe link is visible and easy to click.
Remember to customize your unsubscribe landing page with colors and language that match your brand.
Give subscribers the chance to curate the content they receive from you instead of leaving altogether.
Allow them to throttle send frequency so they still get some, not zero, emails from. you.
Include a short survey (one Q will do) to learn why they’re leaving.
-
It’s always a good idea to include a logo in the footer (it’s sorta like a signature), but for the sake of variety you don’t want it to look exactly like the big, colorful logo that likely appeared toward the top of your email. If you have a simplified logo mark that can run at a smaller size while still remaining legible, the footer is the perfect place for it!
Been running your biz solo logo style? Hit up Pair of Ducks, and see what a full logo system—horizontal, vertical, monogram, symbol—could look like for your brand.
-
We can keep this one short and sweet. Just because your readers have reached the bottom of the email, the party doesn’t have to stop. Drop some social icons in your footer, and link them to all the social media accounts (Instagram, Facebook, LinkedIn, Pinterest, Twitter, Spotify, etc.) that use use on the reg. This way, engaged subscribers will be able to experience more of your brand and stay connect with you across all your channels.
You made it to the end!
Now that you’ve got these 15 tips in your back pocket, you’re basically a rootin’-tootin’ email superstar. But the journey doesn't have to end here! The weird wild web is full of resources and inspo to help non-designers and non-coders get started:
Check out Really Good Emails for a gazillion samples of high-performing campaigns from top brands.
Dig through Litmus resources to learn how to tackle tough coding challenges and truly dig into all things email.
Join some email-centric online groups (like Women of Email or Email Geeks on Slack) to learn and connect with others in the email community.
Reach Out
〰️
Give Us a Shout
〰️
Reach Out 〰️ Give Us a Shout 〰️
Looking for an inbox-obsessed email design + dev crew to help you level up your next email campaign?
Schedule a consultation – We’d love to meet in-person or online to tour your email tools, talk about your needs, and make recommendations to guide you or your team.
Book a design day - If you already have decent email tools setup, you can reserve a full or half-day work session to refresh your templates, design a new campaign, or draft some A/B tests for an upcoming send.
Launch email marketing for your biz - Our Email Launch Package includes setup, global styling, template designs, and hands-on training to get your email firing on all cylinders fast.
