This content originally appeared on DEV Community and was authored by Salva Torrubia
Email design can be tricky. Different email services (Gmail, Outlook, Yahoo, Apple Mail) show HTML in their own way. Working on this template took me back to the early web days, when grids didn’t exist, divs weren’t standard, and every layout depended on inline CSS. At the start, I read documentation recommending inline styles over external or embedded CSS, which proved invaluable throughout the build. In this post, I explain simple practices I follow and give tips to make emails look good everywhere.
Character Encoding Meta Tag
Make sure to include this meta tag in the head section of your email HTML to guarantee proper rendering of characters and emojis across all clients. This tag helps prevent garbled text and ensures consistent character encoding:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Choosing Emojis Over Custom Icons
I once used an icon font for bullet points and checkmarks. But some clients blocked the font, showing empty boxes. Today, I use simple Unicode emojis (
, 
). They display correctly and need no extra files.
<span style="font-size:20px;">🚀 Fast Loading</span>
When 700px Broke on Mobile
During a test send, a coworker and I discovered the email didn’t display correctly in a specific email client version on his mobile device. Instead of allowing a scrollbar, the client simply reduced the visible content area without any warning, breaking our original design. We had set the template width to 700px to show more content, but this unexpected resizing hid key sections and disrupted the visual flow.
Now I always use 600px, a width that fits most mobile screens and still looks great on desktop.
PNG Images for Consistency
SVG logos look sharp, but many Outlook versions and older Android apps ignore SVG. Switching to PNG images at 2× resolution (e.g., logo@2x.png) ensures crisp display. I also compress images with TinyPNG to keep file sizes small.
<img src="logo@2x.png" width="150" height="50" style="display:block;" alt="Logo">
Bulletproof Backgrounds for Outlook
Standard CSS backgrounds work in most clients, but Outlook uses Word’s engine and ignores them. The bulletproof method uses VML for Outlook and CSS for others.
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="frame" src="hero-bg.png" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="background-image:url('hero-bg.png');background-size:cover;">
<!-- Content -->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
Inline CSS vs. External Stylesheets
At the beginning of this project, I wondered whether to keep my styles in an external .css file or to inline them directly on each element. After reading multiple guides and official email platform documentation, it became clear that inline CSS is the safer choice. Inline styles carry the highest priority in the cascade, so they are less likely to be overridden or removed by email clients like Gmail or older Outlook versions.
Additional Recommendations
Here are some extra tips to make your templates even more reliable:
Avoid Flash and JavaScript: Most email clients disable scripts or have no Flash support. If you need motion or animation, use a simple animated gif instead.
Set Table Roles: Add role=”presentation” to your tables to improve accessibility for screen readers and assistive technology.
Fallbacks for Background Images: Provide a solid background-color in inline styles so that if the image fails to load, the email still looks intentional:
<div style="background-color:#333333; background-image:url('bg.png');">
<!-- Content -->
</div>
-
Custom Font Fallbacks: When using custom fonts, always declare web-safe alternatives and include inline font-family stack:
font-family: 'MyCustomFont', Arial, sans-serif;
Tools for Testing
Postdrop: Inline CSS, send tests, and store templates.
Htmlemailcheck: check best practices for html templates.
Mail-tester: Test the Spammyness of your Emails
validator.w3: This validator checks the markup validity of Web documents in HTML
Summary
Following these steps will help your emails look great and work smoothly for all readers. This project truly reminded me of those old-school coding times, reinforcing that sometimes the simplest, most manual methods are still the most reliable. Happy emailing!
This content originally appeared on DEV Community and was authored by Salva Torrubia