If you're testing emails and the previews look weird or flat-out wrong in Emailonacid, you're not alone. Real device previews are a lifesaver—when they work. But when things go sideways, it can be tough to figure out if the problem is your code, the tool, or the email client itself. This guide is for anyone who needs to sort out rendering headaches quickly, without a lot of hand-waving or finger-pointing.
Step 1: Know What “Real Device Previews” Actually Mean
Before you blame your code or Emailonacid, make sure you understand what you’re seeing. Emailonacid offers two basic types of previews:
- Real Device Previews: These are screenshots from actual devices and clients (not just emulations), usually captured by opening your email on those platforms and taking a screenshot.
- Simulations/Emulations: Some previews are generated using a rendering engine designed to mimic the real thing, but they’re not perfect.
Why does this matter? Real device previews are more accurate, but sometimes there’s a lag (screenshots might be a few minutes old), and occasionally the screenshots themselves can bug out. Simulations get things wrong more often—don’t panic if a simulation looks off, always double-check with a real device preview if possible.
Pro tip: Always check which type of preview you’re looking at. If it’s a simulation, take it with a grain of salt.
Step 2: Rule Out the Basics First
When you see something broken in a preview, don’t immediately assume it’s a bug in Emailonacid or the email client. Start with the low-hanging fruit:
- Did you upload the latest version of your email? Obvious, but easy to miss. Make sure you’re not looking at an old test.
- Are your images hosted and accessible? If images are missing or broken, check the URLs, file types, and permissions.
- Did you send the email to the right address? Emailonacid gives you a unique address for each test. Double-check you sent to the correct one, and that the subject line matches.
These dumb mistakes happen to everyone, and fixing them saves a lot of cursing later.
Step 3: Compare the Preview to the Real Thing
Email previews are great, but nothing beats checking the actual client. Here’s how you can double-check:
- Open on a real device: If you have access to the target device or client, open the test email there. If it matches the Emailonacid preview, the issue is probably real. If not, it could be a glitch in the preview tool.
- Ask a teammate: Sometimes you just don’t have every device lying around. Ask someone else to check for you.
If the issue only appears in Emailonacid and not on a real device, it’s likely a bug or delay in the preview tool itself.
Step 4: Check for Known Rendering Bugs and Quirks
Email clients are notorious for their quirks. Some things just don’t render the way you want, no matter what tool you use. Here are a few common troublemakers:
- Outlook (desktop): It uses the Word rendering engine. Expect random table bugs, broken backgrounds, and spacing issues. Sometimes, there’s just no fix except a different design.
- Gmail (web & app): Strips out
<style>tags in the body and ignores certain CSS properties. Media queries are hit or miss. - Apple Mail/iOS: Usually pretty good, but watch out for dark mode issues and image scaling.
What to do: - Search for your issue (e.g., “Outlook 2019 background image not displaying”). - Check Emailonacid’s or Litmus’ documentation for known bugs. - Don’t waste hours “fixing” something that’s impossible to fix—sometimes you just have to accept it.
Step 5: Make Sure Your HTML and CSS Are Email-Safe
Email HTML is its own beast. The stuff that works on the web often fails in email. Here are some basics:
- Use tables for layout. Most email clients still don’t fully support CSS flexbox or grid.
- Inline your CSS. Many clients strip out
<style>blocks, so inline everything. - Avoid JavaScript. It’s almost always stripped or ignored.
- Watch out for max-width, margin, and padding. Mobile clients can mangle these. Use fixed widths and cell spacing when possible.
If you’re using a “modern” coding style, try running your email through an inliner like Premailer or Emailonacid’s own tools.
Pro tip: Don’t reinvent the wheel. Use a well-tested email template as your starting point.
Step 6: Investigate Specific Issues
Let’s break down some common rendering problems and what to check:
A. Images Not Showing Up
- Check that URLs are absolute, not relative.
- Make sure the images are publicly accessible (no authentication required).
- Avoid SVGs or webp—stick with PNG, JPEG, or GIF.
- If images are blocked, add
alttext and consider using a background color for image areas.
B. Fonts and Text Problems
- Custom web fonts often don’t work. Stick to web-safe fonts (Arial, Verdana, Georgia, etc.).
- If text is the wrong size or color, make sure your styles are inlined, and test with different clients.
C. Broken Layouts
- Nested tables are your friend (and enemy). Make sure they’re properly closed and not missing any tags.
- Avoid
colspanandrowspanwhen possible—they confuse some clients. - Don’t rely on CSS floats or positioning.
D. Buttons and Links Not Working
- Use bulletproof buttons (tables with inline styles, not just styled
<a>tags). - Make sure links use
https://and aren’t being rewritten or blocked by your ESP.
Step 7: Read the Error Logs and Warnings
Emailonacid will sometimes flag issues or show warnings in the preview panel. Don’t ignore these—they often point directly to the problem (like missing images, unclosed tags, or unsupported CSS).
- Check the code analysis feature for basic errors.
- If you see a warning, fix it—even if it “looks fine” in one client.
Step 8: Refresh, Retest, and Wait
Sometimes, Emailonacid’s real device previews can lag or fail to update:
- Refresh the preview: There’s usually a refresh or retest button. Use it.
- Wait a few minutes: Screenshots on real devices aren’t always instant. Sometimes you just need patience.
- Try a new test: If things still look off, start a new test from scratch. Sometimes the whole batch glitches out.
If you’re still seeing weird results, it might be a temporary outage or bug with Emailonacid itself.
Step 9: When to Contact Support (and What to Tell Them)
If you’ve ruled out your code and checked the real devices, it’s time to talk to support. Here’s what they’ll need:
- The test ID or link to your Emailonacid test.
- A screenshot or description of the issue.
- What you’ve already tried (refresh, new test, checked code).
- Confirmation that the issue doesn’t exist on an actual device, or vice versa.
Be concise. The more detail you give, the faster they can help.
Pro tip: Be patient but persistent. Sometimes issues are on their end, and you’re not the only one seeing them.
Step 10: Don’t Overthink It—Iterate
Here’s the honest truth: pixel-perfect email is a myth. Even with real device previews, you’ll never get 100% consistency everywhere. Focus on:
- Major issues first: Broken layouts, missing content, unreadable text.
- Nice-to-haves second: Spacing, fonts, minor alignment issues.
- Let go of the rest: If it looks good in the big clients (Outlook, Gmail, Apple Mail), you’re in good shape.
TL;DR
Troubleshooting rendering issues in Emailonacid isn’t about chasing every last pixel. Check the basics, compare with real devices, know the quirks, and don’t get stuck on things nobody else will notice. Keep your code simple. Test, tweak, repeat. That’s how you actually get emails out the door.