®
The BEST email “design” for transactional emails is plain text (cannot hyperlink). The next best is rich text (can hyperlink). This is because it doesn't matter how pretty your email looks if it ends up in the spam folder. For those who don't want to use either plain text or rich text because they're obsessed about being “on brand”, this email design guide will help you.
Good design makes every email easy to read, simple to act on, and impossible to mistake for spam. Most companies treat transactional emails like an afterthought. The ones who get it right see fewer support tickets, better engagement, and customers who trust their brand.
Bento gives you the ability design transactional emails using our visual editor or via our transactional email API. Our templates are already mobile optimized and tested across all major email clients.
TL;DR: Design Rules That Work in Every Inbox
Mobile-first always wins. Over 60% of emails get opened on phones. Single columns, 16px text minimum, buttons at least 44px tall. If it works on mobile, desktop is easy.
Make the important stuff obvious. People scan emails in seconds. Put the main message up top, the action button where they expect it, and supporting details below. White space is your friend.
Test like your business depends on it. Because it does. Check Gmail, Outlook, Apple Mail. Test dark mode. Turn off images and see if it still makes sense. A broken email in one client means lost customers.
The Non-Negotiable Foundation
Start With Mobile
Here's the truth: if you design for desktop first, mobile users suffer. But if you design for mobile first, everyone wins.
Single-column layouts work best. They're simple to code, load fast, and adapt to any screen size. Keep your email width between 320px and 600px. Body text needs to be at least 16px, preferably 18px for better readability. Headlines should be 22-24px minimum.
Buttons need real estate. Apple recommends 44x44px minimum touch targets, but 50px gives you breathing room. Put padding around buttons so fat fingers don't miss. Make the whole button clickable, not just the text inside.
Space between elements matters more on mobile than desktop. Add at least 20px padding between sections. Give paragraphs room to breathe as dense emails feel overwhelming on small screens.
Create Visual Hierarchy That Guides the Eye
People don't read emails word by word - they scan. Your job is to make scanning productive.
Start with a clear headline that explains what happened. "Your order shipped" beats "Update from YourStore." Follow with one sentence that gives context. Then add your primary call-to-action button. Everything else comes after.
Use font sizes to create hierarchy. Headlines should be at least 1.5x your body text size. Subheadings need to be 1.2x. Keep it consistent across all your transactional emails.
Bold text draws attention but use it sparingly. Bold the order number, the delivery date, the account username. Don't bold entire paragraphs or you lose the effect.
Color helps too, but be careful. Your primary brand color should highlight buttons and important links. Use a secondary color for less critical actions. Stick to black or dark gray for body text. Colored body text is harder to read, especially on mobile.
Make Your Brand Recognizable
Every transactional email is a chance to reinforce your brand, but branding isn't just slapping a logo on top.
Your emails should match what customers see in your app or website. Same fonts, same colors, same button styles. When someone gets a receipt, they should instantly know it's from you, not wonder if it's phishing.
Put your logo in the header, but keep it reasonable - 150-200px wide works for most brands. Link it to your homepage as this small detail helps when people forward emails or save them for reference.
Your footer needs the essentials: company name, physical address (CAN-SPAM requires this), and an unsubscribe link if you mix marketing with transactional content. Add social icons if you want, but they're not critical for pure transactional emails.
Build for Everyone (Accessibility Matters)
About 15% of people have some form of disability. Accessible emails aren't just nice to have. They're good business.
Alt text on images is mandatory. Describe what the image shows, don't just repeat the headline. "Graph showing 50% increase in sales" beats "Sales chart." If an image contains text, include that text in the alt attribute.
Color contrast needs to hit 4.5:1 for normal text, 3:1 for large text. Black text on white background is foolproof. Gray text might look elegant but fails accessibility tests. Test your colors with a contrast checker before shipping.
Use semantic HTML. Screen readers understand <h1>, <h2>, <p>, and <table> tags. They struggle with divs pretending to be headings. Proper HTML structure helps everyone, not just screen reader users.
Links need descriptive text. "View your order" beats "Click here." Screen reader users often navigate by jumping between links. "Click here" tells them nothing.
Make Actions Crystal Clear
Your call-to-action (CTA) is why the email exists so don't bury it.
Put your primary CTA above the fold. That means within the first 600px of your email. Repeat it at the bottom for longer emails. Some people scroll, some don't. Cover both.
Button text should describe the action. "Reset password" not "Continue." "View invoice" not "Click here." Be specific about what happens when they click.
Always include a text link backup. Some email clients block images and styled buttons. A plain text link ensures everyone can take action. Put it right below your button: "Button not working? Copy this link: https://..."
Secondary actions get text links, not buttons. "Update preferences" or "Contact support" work fine as regular links. Save buttons for the main event.
The Technical Side of Design
HTML Tables Still Rule Email
Web development moved past tables decades ago, but email hasn't. Tables provide the most consistent layout across email clients, especially Outlook.
Keep your HTML simple. Inline CSS is more reliable than external stylesheets. Many email clients strip out <style> tags or ignore them completely. Put your styles directly on elements.
Avoid JavaScript entirely. No email client supports it for security reasons. Animated GIFs work if you need movement, but remember they increase file size.
Image Optimization Is Critical
Heavy emails load slowly and might get flagged as spam. Keep your total email size under 100KB if possible, definitely under 250KB.
Host images on a reliable CDN. Don't embed them directly in the email. Use absolute URLs (https://yourdomain.com/image.png) not relative paths.
Compress images before uploading. JPEGs for photos, PNGs for graphics with transparency. Tools like TinyPNG can cut file sizes by 70% without visible quality loss.
Consider whether you need images at all. Text-based emails often perform better for transactional messages. They load instantly, work everywhere, and feel more personal.
Dark Mode Changes Everything
Over 30% of users have dark mode enabled. Your beautiful white email might look terrible on a black background.
Test how your email renders in dark mode. Some email clients invert colors automatically, while others respect your color choices. Gmail, Outlook, and Apple Mail all handle dark mode differently.
Transparent PNGs work best for logos and icons. They adapt to any background color. Avoid images with white backgrounds unless you add a white container behind them.
Use semantic colors in your CSS. Instead of color: #000000, use color: black. Some email clients can translate semantic colors better in dark mode.
Testing: The Step Everyone Skips (Don't)
Email Client Testing
You can't test in just Gmail and call it done. Different clients render HTML differently.
At minimum, test in:
- Gmail (web, iOS, Android)
- Outlook (2016, 2019, 365, Outlook.com)
- Apple Mail (macOS, iOS)
- Yahoo Mail
- Samsung Mail (huge Android market share)
Use a tool like Litmus or Email on Acid if you can. They show your email across dozens of clients instantly. Manual testing works too but takes longer.
Load Time and Spam Filters
Slow emails frustrate users and trigger spam filters. Run your email through a spam checker before sending. Most ESPs have this built in.
Common spam triggers to avoid:
- Too many images, not enough text
- All-caps subject lines or body text
- Excessive exclamation points
- Spam trigger words (FREE, WINNER, URGENT)
- Missing unsubscribe links
- No physical address in footer
Page weight matters. Google penalizes slow-loading emails just like slow websites. Keep it lean.
Device and Network Testing
Test on actual devices when possible. Emulators miss edge cases.
Test on slow connections since not everyone has 5G or fiber internet. Your email should load reasonably fast on 3G.
Test with images disabled. Many corporate email systems block images by default. Your email should still make sense without them.
Real Examples That Work
Order Confirmation Emails
The best order confirmations answer three questions immediately: What did I buy? When will it arrive? How much did I pay?
Put order details in a clear table format. Product name, quantity, price per item, total. Include product images if you have them, but keep them small (100x100px is plenty).
Add the delivery address and estimated arrival date prominently. People screenshot these for reference.
Include a big "Track Order" button that goes straight to tracking. Add order number and customer service contact below.
Password Reset Emails
Speed matters most here. Someone locked out wants back in now.
Keep it minimal - one sentence explaining someone requested a reset. "Reset Your Password" as the subject and headline is good; so is a big button saying "Reset Password." That's it.
Add a security note: "If you didn't request this, ignore this email." Include an expiration time: "This link expires in 1 hour."
Never include the new password in the email. Always link to a secure reset page.
Welcome Emails
First impressions stick. Welcome emails get 4x the open rate of regular emails.
Confirm what they signed up for. "Welcome to YourProduct" followed by their email address or username. This confirms they're in the right place.
Set expectations and tell them what emails they'll get and how often. Give them a clear way to adjust preferences.
Provide one clear next step - complete your profile, explore features, read the getting started guide. One action, not five.
Measuring What Matters
Key Metrics for Transactional Email
Open rate tells you if your emails reach the inbox. Transactional emails should see 40-60% opens minimum. Under 20% means deliverability problems.
Click rate shows engagement. Password resets should see 50%+ clicks. Order confirmations around 30%. Welcome emails vary widely based on your product.
Delivery rate should be 95%+ for transactional email. High bounce rates mean data quality issues or blacklisting.
Using Data to Improve
Heat maps show where people click. You might discover they're trying to click non-clickable elements. Make those clickable or make them look less interactive.
A/B test carefully with transactional emails. You can test button color, CTA text, or layout, but keep variations small as dramatic changes confuse users.
Monitor support tickets mentioning email. "Didn't receive" or "can't find button" tickets point to design problems.
Track email client and device data. If 60% of users open on iPhone, optimize for that first.
Common Mistakes to Avoid
Overdesigning kills performance. Your marketing emails might have beautiful graphics and animations. Transactional emails need speed and clarity. Save the fancy stuff for campaigns.
Mixing marketing with transactional confuses everyone. A receipt shouldn't pitch new products. A password reset shouldn't include a sale banner. Keep them separate or risk spam filters and angry customers.
Forgetting about forwarding breaks things. People forward receipts to accounting, confirmations to partners, tickets to friends. Make sure forwarded emails still work and make sense.
Ignoring international users causes problems. Currency symbols, date formats, time zones matter. Use clear formats: "$100 USD" not just "$100". "January 15, 2025" not "1/15/25".
Where Bento Helps With Design
Bento gives you a head start on transactional email design. Templates are already mobile-optimized, accessible, and tested across major email clients. You can simply add your brand and ship.
The platform handles the technical parts. Authentication (SPF, DKIM, DMARC) is automatic and reputation monitoring catches problems before they hurt deliverability. Batching spreads large sends to maintain high delivery rates.
Analytics show you what's working. Track opens, clicks, and bounces in real-time. See which email clients your users prefer. Find out where they're clicking. Use webhooks to pipe data into your own analytics.
The visual editor means designers can work without touching code. Developers can use the API for complete control. Both approaches produce emails that work everywhere.
Your Design Checklist
Before you send any transactional email, run through this list:
-
Know the goal. What should users do after reading this email? Make that action obvious.
-
Design mobile-first. Create your layout on a 320px canvas. Scale up from there.
-
Test the hierarchy. Can someone understand the email in 5 seconds? If not, simplify.
-
Check your code. Inline CSS, table-based layout, no JavaScript. Old school but reliable.
-
Optimize images. Under 100KB total email weight. Images hosted externally. Alt text on everything.
-
Test across clients. At least Gmail, Outlook, and Apple Mail. More is better.
-
Verify accessibility. Color contrast passing, semantic HTML, descriptive link text.
-
Add fallbacks. Text links below buttons. Email still makes sense with images off.
-
Monitor performance. Track opens, clicks, and delivery rates. Iterate based on data.
-
Stay consistent. Every transactional email should feel like it comes from the same company.
Ready to Design Better Transactional Emails?
Great transactional emails do their job and get out of the way. They load fast, work everywhere, and help users complete tasks without frustration.
Start with one email type. Pick your password reset or order confirmation. Redesign it following these principles. Test it thoroughly. Ship it. Monitor the metrics. Then move to the next one.
For more specific examples, check out our transactional email best practices guide. It covers the technical setup and delivery side in detail.
Remember: every transactional email is a chance to build trust. Make them count.
