An email can look flawless in a design file and fall apart the moment someone opens it on their phone. A button becomes difficult to tap, product images push important information below the fold, or a dark background makes the company logo disappear.
For SaaS founders and e-commerce businesses, these details matter. Email is part of the customer experience, whether you’re welcoming a new subscriber, announcing a feature, or confirming an order.
Good email design isn’t about making every message visually impressive. It’s about helping readers understand what’s important and what to do next.
This guide covers practical email design best practices that agencies and their clients can apply to everyday campaigns, without overcomplicating production.
1. Build a Layout That Guides the Reader
Before choosing colors or illustrations, decide what the email needs to accomplish.
A SaaS onboarding message might encourage users to finish setting up their accounts. An e-commerce promotion might highlight a seasonal collection. These emails serve different purposes, but both need a clear visual path.
Keep the structure simple
A single-column layout is a reliable starting point. It makes content easier to scan and reduces the chance of elements breaking on smaller screens.
For desktop emails, a content width of approximately 600–640 pixels is a practical convention. The layout should still adapt to narrower displays rather than forcing readers to scroll horizontally.
Organize the content in a predictable order:
- Header: Brand logo and essential navigation, if necessary.
- Headline: A short statement explaining the message.
- Main content: Supporting copy and relevant visuals.
- Primary CTA: The most important next action.
- Footer: Contact details, preferences, and required information.
Avoid giving every element equal visual weight. If the headline, promotional banner, button, and product descriptions all compete for attention, readers may struggle to identify the main message.
Give each email one primary CTA
An email promoting a software feature doesn’t need equally prominent buttons for booking a demo, visiting the blog, contacting support, and exploring pricing.
Choose one primary action. Secondary links can remain available, but they shouldn’t compete visually.
Use descriptive button labels such as “Explore the Feature” or “Complete Your Setup” instead of generic instructions like “Click Here.”
This approach follows the broader principles of user-centered design: organize the experience around what people are trying to accomplish.
Author: Vitaly Gariev
2. Start From a Proven Template, Not a Blank Canvas
Creating every client email from scratch sounds flexible, but it often introduces unnecessary work.
Designers must rebuild familiar structures, developers may need to troubleshoot rendering differences, and account managers spend time reviewing elements that could have been standardized.
That’s why agencies often maintain a library of tested layouts.
What makes a template useful?
A strong template provides a dependable structure while leaving room for each client’s visual identity.
For example, an agency might maintain separate layouts for:
- SaaS welcome and onboarding emails.
- Product announcements and newsletters.
- E-commerce promotions.
- Order confirmations and shipping updates.
- Event invitations and reminders.
Teams looking for starting points can explore 1,650+ free templates from Stripo and choose layouts that match their clients’ communication goals.
Free email templates aren’t just a way to reduce initial design work. They also provide reusable patterns that agencies can customize, review, and test before using them in production.
However, a template isn’t automatically reliable across every inbox.
Changing fonts, images, spacing, or content length can affect how an email renders. Even previously tested layouts need another review after significant modifications.
Create a repeatable client workflow
Instead of treating every message as a new project, agencies can establish a small set of reusable components.
Document approved colors, typography, button styles, header variations, and footer requirements. Track which layouts have passed testing and which still need attention.
This approach also helps maintain consistent branding across websites, applications, and customer communications.
The goal isn’t to make every email look identical. It’s to remove avoidable production problems so designers can focus on the message.
3. Design for Mobile, Dark Mode, and Accessibility
An email that works on a large monitor may be frustrating to use on a smartphone.
That’s why you should consider responsive email design from the start, not add it during the final review.
Make mobile interactions comfortable
Start with a layout that can shrink naturally without requiring horizontal scrolling.
Keep headlines concise, separate content blocks with sufficient spacing, and avoid placing several small links close together.
As a practical design target, use primary buttons with a touch area of at least 44 × 44 CSS pixels. Give buttons enough surrounding space to prevent accidental taps.
Keep font sizes readable without zooming. A body size around 16 pixels is a reasonable starting point, but the final choice depends on the font and layout.
Prepare for dark mode
Some email applications automatically adjust background and text colors. Others preserve parts of the original design or apply their own transformations.
That inconsistency can create unexpected results.
A dark logo might disappear against a darkened background. Colored buttons can lose contrast, while icons with transparent backgrounds may become difficult to recognize.
Test light and dark appearances. Where possible, use logos with sufficient contrast, avoid critical information embedded in background images, and check how button text behaves after color changes.
Make accessibility part of the design
Accessibility improves the experience for people using assistive technology and for readers on small screens or in difficult viewing conditions.
Important practices include:
- Add meaningful alt text to informative images.
- Use sufficient contrast between text and backgrounds.
- Keep essential copy as live HTML text.
- Avoid image-only emails.
- Use descriptive link labels.
- Establish a logical reading order.
Use empty alt attributes for decorative images that don’t convey essential information.
These considerations align with the accessibility and usability principles discussed in our guide to web application development.
Author: Solen Feyissa
4. Adapt Email Design to SaaS and E-commerce Needs
Not every business should use the same campaign structure.
SaaS companies typically communicate around product adoption, account activity, and ongoing engagement. E-commerce brands often focus on product discovery, purchases, and order-related information.
Both need clear messaging, but the content hierarchy should reflect the customer’s situation.
SaaS: Help users reach their next milestone
SaaS emails work best when they connect a message to a recognizable user need.
Consider three common situations.
Onboarding emails: Explain the next useful action rather than presenting every available feature. Include a clear headline, brief instructions, and a CTA that leads directly to the relevant part of the product.
Product updates: Focus on what changed and why it matters. A screenshot can help explain a new interface, but it shouldn’t replace a concise written explanation.
Webinar invitations: Make the topic, date, time, and registration details easy to find. After registration, an add-to-calendar option can help participants save the event.
A calendar link generator can help teams prepare calendar links for event invitations and confirmation emails, reducing the need for recipients to enter event details manually.
Use clear event titles and include the correct time zone. If the webinar has limited availability or requires registration, communicate those conditions explicitly.
For SaaS businesses, these messages should support meaningful customer actions rather than simply increase email volume.
Author: Antoni Shkraba
E-commerce: Make shopping information easy to understand
E-commerce emails need to communicate product information quickly without overwhelming shoppers.
Product promotions: Use consistent product cards with clear images, names, prices, and links. Avoid packing too many products into a single message.
Abandoned-cart emails: Show the items left behind and provide a direct route back to the cart. Keep delivery, pricing, and availability information accurate.
Order confirmations: Prioritize the order summary, payment details, shipping information, and support options. Keep these transactional messages easy to understand, even when you include promotional content.
Product photography matters, but readability matters just as much. Customers shouldn’t need to open a separate website merely to understand what they purchased.
Avoid displaying misleading discounts or urgency messages. Design should make decisions easier, not pressure people with confusing information.
5. Run a Pre-Send Quality Assurance Check
Even a carefully planned campaign can include a broken button, incorrect personalization, or a slow-loading image.
A reliable QA process catches these issues before subscribers encounter them.
Agencies should agree with clients on who owns content approval, technical testing, and final sign-off. Clear responsibilities matter most when campaigns involve multiple stakeholders.
Test the actual email, not just the design preview. Review it in representative desktop and mobile email clients, including light and dark modes.
Use realistic subject lines, customer information, and product data during testing. A perfectly rendered placeholder doesn’t prove that dynamic content will behave correctly.
Also check the plain-text alternative, personalization fallbacks, and the accessibility of essential information.
Final Email Design Checklist for Agencies and Clients
Copy this checklist into your campaign brief or pre-send review document.
Layout and content
- The email has one clear primary goal.
- The layout uses a mobile-friendly single-column structure.
- Headline and content hierarchy are easy to scan.
- The primary CTA is visible and descriptive.
- Branding and typography are consistent.
Mobile and accessibility
- Buttons are comfortable to tap.
- Text remains readable on smaller screens.
- Light and dark modes have been checked.
- Informative images have appropriate alt text.
- Important information is available as live text.
- Text and buttons have sufficient contrast.
Content and technical QA
- Subject line and preheader are accurate.
- All links and buttons lead to the correct destinations.
- Images are compressed and load correctly.
- Personalization and fallback values work.
- Rendering has been tested across relevant email clients.
- Product prices, event details, and dates are correct.
- The unsubscribe link works where required.
- Sender details and footer information are accurate.
- The client has approved the final version.
Final Thoughts
Effective email design best practices aren’t complicated, but they require consistency.
A clear layout, reusable templates, accessible content, and careful testing help teams produce emails that readers can understand and use.
For SaaS companies, that means guiding customers through product experiences. For e-commerce businesses, it means presenting products and transactions without unnecessary friction.
The strongest email workflow isn’t the one with the most elaborate visuals. It’s the one that delivers a clear, useful message and reliably reaches the inbox.