From Design to Send: How to Build Beautiful HTML Emails Without a Developer (Webinar Recap)

Key Takeaways

• Designing for email is like designing for a very strict printer. What looks good in a browser or design tool won’t always look the same in the inbox.
• An “inbox-ready” email renders correctly in every client, reads well on mobile, loads its images, and gets past spam filters.
• Many common design mistakes are easy fixes: use JPEG or PNG images, high-contrast text, and web-safe fonts, and always test before you send.
• You don’t need a developer. Tools like Stripo and Benchmark Email let small teams build and send professional HTML emails without code.
• Our on-demand webinar with Stripo walks through the full workflow live, from building a template to hitting send.

If you’ve ever built an email that looked flawless on your screen, then watched it break in Outlook or shrink to an unreadable size on a phone, you’re not alone. It happens to beginners and seasoned marketers alike.

That’s why we teamed up with Stripo for our latest webinar, From Design to Send: Build Beautiful HTML Emails with Stripo + Benchmark Email. I was joined by Dmytro Kudrenko, CEO of Stripo, for his second Benchmark webinar, and Irene, our product specialist. Together, we walked through why HTML email design matters, how to build a template the right way in Stripo, and how to bring it into Benchmark Email’s new HTML Editor to send.

Here’s a preview of what we covered, plus a few steps you can use today.

Why HTML email design matters (even if you never write code)

I’ll be honest: I never plan to write a line of code. But I send a lot of emails, so understanding how HTML email works still matters.

Here’s the big idea: email HTML plays by different rules than the rest of the web. Many marketers assume that if something looks good in a design tool or a browser, it’ll look good in the inbox. That’s not always true, and you don’t want to find out the hard way. Outlook in particular is notorious for stripping styles and rendering things unexpectedly.

Designing for email is a bit like designing for a very strict printer. Some things just won’t translate, and that’s by design. Gmail, Outlook, and Apple Mail can each render the same email differently. That’s why email still relies on table-based layouts, inline styles, and web-safe fonts. Go in with a “designing for constraints” mindset and you’ll save yourself a lot of headaches.

What “inbox-ready” actually means

An inbox-ready email is more than one that looks good on your screen. It needs to:

• Render correctly everywhere: Gmail, Outlook, and Apple Mail, on desktop and mobile.
• Read well on phones: More than half of people read their email on their phones. If subscribers have to pinch and zoom, they’re less likely to engage.
• Load its images: And still make sense if they don’t. Avoid building an email around a single image.
• Stay intact: No invisible text, broken layouts, or stripped styles.
• Pass spam filters: So it reaches the inbox in the first place.

5 common email design mistakes (and what to do instead)

These can happen to anyone. I’ve made a few of them myself.

1. Using SVG or WebP images. Many email clients don’t support them. Use JPEG or PNG instead.
2. Light text on light backgrounds. Use high-contrast text and background colors for readability.
3. Relying on web fonts. They often get swapped for defaults. Use web-safe fonts like Arial or Georgia.
4. Forgetting to test. Preview and send test emails before every campaign to see how your email renders across clients.
5. Copying design tool output straight into your ESP. Build in an email-specific tool or clean the code before pasting.

Why build HTML emails yourself?

Not everyone has a developer on hand, especially if you’re a team of one or part of a small marketing team. Building your own HTML emails with the right tools gives you:

• Faster campaigns, with no waiting on someone else’s queue
• Full design control, with no back-and-forth over what looks right
• Better brand consistency across every channel, including email
• Lower production costs for teams without a big budget

A sneak peek at building in Stripo

Stripo is focused on one thing: the email production workflow. It’s where you build the email before exporting it to your sending platform. In the webinar, Dmytro walked through how Stripo works, including:

• A visual drag-and-drop editor, with a built-in HTML/CSS editor for anyone who wants to get under the hood
• 1,600+ templates across industries, seasons, and email types, so you never start from a blank page
• Content shortcuts, like pulling content from a link into a blog post block, or dropping in a video link that automatically generates a thumbnail and play button
• Real-time collaboration and shareable approval links for teams that need sign-off before sending
• Export to 90+ ESPs, including Benchmark Email

As Dmytro put it, Stripo is built so that creating a bad email is actually the hard part. Want to see it in action? The full walkthrough is in the recording.

Then bring it into Benchmark Email.

Once your template is ready, Irene shows how to bring it into Benchmark Email’s new HTML Editor. Paste your code or upload the file, then preview it in both desktop and mobile views. The Personalize picker lets you add merge fields like first name without touching the code, and Benchmark automatically adds your unsubscribe link and mailing address so compliance is handled.

Try it yourself: a quick checklist.

Before your next HTML email goes out:

• One goal, one main message, one CTA
• Key message and CTA in live text, not images
• JPEG or PNG images with descriptive alt text
• High-contrast colors and web-safe fonts
• Mobile preview checked
• Test email opened in Gmail, Apple Mail, and Outlook

Watch the full webinar

This post covers the “why.” The webinar shows the “how”: Dmytro’s live Stripo build and Irene’s walkthrough of the export, import, and send in Benchmark.

Don’t have a Benchmark account yet? Sign up for free and try the HTML Editor with your first design.

Frequently Asked Questions

Why does my email look different in Outlook than in Gmail?

Each email client uses its own rendering engine, and Outlook is known for stripping styles and ignoring many modern CSS properties. That’s why email HTML relies on tables, inline styles, and cross-client testing.

Do I need to know how to code to send an HTML email?

No. Visual builders like Stripo create email-safe HTML for you, and Benchmark Email’s HTML Editor lets you import, preview, and personalize it without editing code.

What image formats work best in email?

JPEG and PNG are the safest choices. Many email clients don’t support SVG and WebP.

How do I get my Stripo email into Benchmark Email?

Stripo can export directly to Benchmark Email, or you can export your HTML and paste or upload it into Benchmark’s HTML Editor.

Is the webinar free?

Yes. The full recording is available on demand on Benchmark Email’s resources page.