A complete guide to creating effective emails — Stripo.email

cells rather than relying solely on CSS margins;

images: Include width, height, and alt attributes inline to guarantee correct rendering.

3. Designing HTML emails

Good design helps your emails look professional and stay readable. Below are some key tips to consider when planning layouts, accessibility, and branding — not an exhaustive list, but a practical starting point for creating effective HTML emails.

Single-column vs. multi-column layouts

Single-column layouts are ideal for mobile-first design because they naturally stack and are easy to read on small screens. Multi-column layouts can work well on desktop, but require careful use of media queries so that columns stack correctly on mobile. Choosing the right layout ensures your content is both readable and visually balanced across devices.

Accessibility

Some email clients block visual content by default to protect users (e.g., Outlook, older Gmail versions, Apple Mail with Mail Privacy Protection), meaning images won’t load until you click “Display images.” This can make your email hard to read if key information is embedded in images. To improve accessibility, always include descriptive alt text and ensure the core message is in live text — not baked into an image.

In addition, make sure your text has sufficient color contrast against backgrounds so it remains readable even if visuals are limited.

Branding and visuals

Use your brand’s colors, fonts, and logos consistently to reinforce recognition. Include images, icons, or subtle graphics to enhance the visual appeal, but avoid overwhelming the message — the email should remain scannable and easy to understand. Keep a balance between visuals and text to maintain clarity and accessibility.

4. Writing HTML emails

Crafting the right words is just as important as the design of your email. This section covers how to write subject lines, body copy, and calls-to-action that capture attention, communicate your message clearly, and encourage readers to take action.

Clear subject lines and preheaders

Your subject line is the first thing recipients see, so make it concise, relevant, and enticing without being overly sensational. Pair it with a preheader — the short snippet that appears next to the subject line in the inbox — to provide additional context. Consider A/B testing different subject lines and preheaders to see which versions get higher open rates.

Scannable copy

Most recipients skim emails rather than reading every word. Use short paragraphs, bullet points, and subheadings to make your content easy to scan. Keep sentences simple and highlight key information with bold text sparingly.

Effective CTAs

Your CTA should be clear and actionable. Use buttons or links that stand out visually, and place them strategically so recipients can easily complete the desired action. Keep the wording direct, such as “View offer,” “Confirm your order,” or “Download the guide.” Test different CTA texts, colors, and placements to see which combination drives the most clicks.

Tools and frameworks for building HTML emails

Developing an HTML email demands both technical skills and a lot of manual work, especially when dealing with the many rendering quirks across different email clients. Fortunately, there are tools and frameworks that simplify both the design and testing process.

No-code editors

If you don’t have the time or find hand-coding HTML too demanding, modern drag-and-drop editors let you create professional emails with the polish of a developer-built template:

• Stripo offers customizable templates, drag-and-drop blocks, and an HTML code editor. It automatically optimizes exported HTML for compatibility;
• Unlayer is a drag-and-drop email editor that can be embedded directly into SaaS platforms or CRMs;
• Mailchimp, Campaign Monitor, and Yespo are email marketing platforms with built-in visual editors.

These tools handle much of the heavy lifting, like inlining CSS and using table-based layouts for maximum client support.

Testing tools

Even the best-designed HTML email can render differently in Outlook, Gmail, or Apple Mail. Testing platforms show you how your email will look in dozens of clients before you hit “send”:

• Email on Acid provides previews on more than 100 of the latest devices and clients, including dark mode. It also offers troubleshooting tools, accessibility checks, and full integration with the Stripo editor;
• Litmus is a testing tool that previews your email in more than 100 email clients and devices. It also provides analytics and spam testing.

Many email service providers, like Mailchimp and SendGrid, also offer built-in previews and device testing. These features are helpful but typically not as thorough as what dedicated testing tools provide.

Responsive HTML email templates

Due to changes in image caching technology, recent email marketing stats no longer report the exact share of email opens on mobile devices. However, in 2021, mobile users already accounted for 41.6% of all email opens.

Given that a large portion of email opens occur on mobile devices, designing responsive emails is essential. Well-crafted emails that look great and function properly on any screen help reduce bounce rates and increase engagement.

Here are examples of commonly used responsive templates that you can use immediately or customize to your needs using Stripo’s drag-and-drop builder.

Order confirmation: Provides customers with immediate acknowledgment of their purchase, including essential details like order number and estimated delivery time.

(Source: Stripo’s template)

Welcome email: Introduces new subscribers to your brand, offering them a warm greeting and guiding them on how to get started.

(Source: Stripo’s template)

Promotional email: Highlights special offers, discounts, or new products, aiming to drive conversions and increase sales.

(Source: Stripo’s template)

Deliverability and optimization

Ensuring your emails reach recipients’ inboxes requires attention to both technical setup and content quality. Here are key strategies to optimize HTML emails for better deliverability.

1. Keep code clean and lightweight

Well-structured, minimal HTML helps prevent email clients and spam filters from flagging your email. Avoid unnecessary nested tables, excessive inline styles, or overly complex code.

2. Use multipart MIME (HTML + plain text)

Always include a plain-text version of your email alongside HTML. Some email clients treat HTML-only emails as suspicious, and spam filters may penalize them.

3. Maintain a healthy text-to-image ratio

Overusing images can increase the likelihood that spam filters flag your email, so maintaining a balance between text and visuals helps reduce this risk.

For example, Email on Acid recommends a guideline of roughly 60% text to 40% images. Mailchimp, on the other hand, suggests a ratio of 80% text to 20% images as a general rule. However, the platform notes that each spam filter may use different criteria for determining what constitutes a healthy balance of text and graphics.

4. Avoid potential spammy phrases

There is no universal list of “spam words,” as filters differ between email clients and providers. As a best practice, avoid language that feels sensational, overly promotional, or creates false urgency.

Examples to use cautiously:

• “Hurry, while supplies last”
• “Once in a lifetime”
• “Last-minute deal”

While spam filters may or may not flag these words, avoiding them reduces the chance that recipients perceive your email campaigns as spam or mark them as spam, which can negatively impact your deliverability.

5. Optimize images for load speed

Compress images to reduce email size and improve load times. If images load slowly, recipients may delete or ignore your email, which lowers engagement metrics. Low engagement over time can hurt your sender reputation and overall deliverability.

6. Test before sending

Use tools like Email on Acid, or its built-in integration in Stripo, to preview your email across clients and devices and identify formatting issues. Additionally, check your emails for broken links and potential spam triggers before sending them to your full list.

Wrapping up

Creating HTML emails may seem complex at first, but with a clear goal, clean code, thoughtful design, and compelling writing, you can build messages that perform well across clients. Key takeaways include planning with your audience in mind, using table-based layouts with inline styles for maximum compatibility, balancing visuals with accessible live text, and always testing before you hit send.

If hand-coding feels too time-consuming, no-code builders like Stripo make it easy to design professional, responsive emails without technical hurdles.