Email design-to-HTML conversion is a high-stakes game. One wrong move and your email could look pixel-perfect in one inbox but break completely in another. Enter looking up scores of forum threads, or creating a desperate post, and waiting for hours for a reply. You’ve been there, you get it.
But in today’s guide, our developer breaks down HTML email coding best practices, coupled with real-world blunders, troubleshooting challenges, and finally, a checklist—so you can look it all up before the transition kicks off. Let’s roll!
1. CTA Button Disappearing
The disappearing button has to be one of the most common challenges developers face. Usually, it’s Outlook where buttons disappear, or appear broken, wrapped, border-less, anything but the expected one.
The culprit? Outlook’s rendering engine, which offers limited padding support, among other things. In the case of buttons vanishing, it’s usually because Outlook doesn’t support padding in <a> tags. In HTML, the <a> tag is referred to as the “anchor” tag, which is used to create hyperlinks. But how to resolve this? You can try the solutions below:
- Use <v:roundrect> to create Outlook-friendly buttons
- Wrap the CTA button in a <table>
<v:roundrect>, where v signifies Vector Markup Language, allows you to create a rounded rectangle, a common button shape. You can place the <a> tag inside <v:roundrect> to make it clickable, as shown below.
<a href="your-link-here"
style="background-color:#007bff;border-radius:8px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">Click Here</a>
You can also place the <a> tag inside a <td> element to create a table cell padding, which will add extra spacing around the button text.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="background-color:#007bff; border-radius:8px; padding:10px 20px;">
<a href="your-link-here" style="color:#ffffff; font-family:sans-serif; font-size:16px; text-decoration:none;">Click Here</a>
</td>
</tr>
</table>Related: Dark Mode Email Design: Challenges & How to Overcome Them
2. Broken Layouts
Outlook isn’t the only email client that gives developers a hard time. An email can look stunning in Gmail and Outlook, but appear misaligned in Apple Mail. This is something we’ve come across multiple times; elements get misaligned, images are skewed, and layouts are broken. In the case of Apple Mail, an over-reliance on <div> tags, one of the most common email coding mistakes, can be bad.
Compared to Gmail, Apple Mail’s rendering engine is more restrictive, so complex CSS layouts built with <div> tags can cause trouble.
The fix? Using table-based layouts. You must always use nested tables for consistent layout rendering across email clients.
However, keep in mind that overusing nested tables can also introduce problems. In fact, if you nest tables too deeply, you might run into compatibility glitches afresh. “Nesting tables is nearly unavoidable, but keeping the nesting depth to 4-6 tables max will help avoid any problems,” suggests Jason Rodriguez, one of the leading authorities on HTML development. The code below goes up to 3 levels max.
</head>
<body>
<table>
<tr>
<th>Main Table Header 1</th>
<th>Main Table Header 2</th>
</tr>
<tr>
<td>
Main Table Cell 1
<table>
<tr>
<th>Nested Table Header 1</th>
<th>Nested Table Header 2</th>
</tr>
<tr>
<td>
Nested Table Cell 1
<table>
<tr>
<th>Sub-Nested Table Header 1</th>
<th>Sub-Nested Table Header 2</th>
</tr>
<tr>
<td>Sub-Nested Cell 1</td>
<td>Sub-Nested Cell 2</td>
</tr>
</table>
</td>
<td>Nested Table Cell 2</td>
</tr>
</table>
</td>
<td>Main Table Cell 2</td>
</tr>
</table>
</body>3. Custom Fonts Not Supported
A brand’s custom font displayed perfectly in the design file, however it defaulted to Times New Roman in Outlook. The principal reason for this is that most email clients, especially Outlook for Windows, don’t support custom typography. In fact, some email clients also restrict font loading due to security concerns, such as cross-origin resource sharing, data exfiltration, and fingerprinting, to name a few.
The common best practice to avoid this issue is to include web-safe font fallbacks like Arial, Helvetica, or Georgia. So you want to create a font stack in the CSS, which is a list of fonts arranged in order of preference. For example, consider the following snippet.
font-family: 'YourCustomFont', Arial, Helvetica, sans-serif;In the absence of custom font support, the email client will first attempt to use Arial. If Arial isn’t available, it’ll try Helvetica, and so on.
The point of using fallbacks is to maintain the legibility of your text.
Another commonly proposed solution is to embed custom typography in your images, such as the one in this email by Stanley.
Now, you can take this route, only bear in mind that where images are blocked by default or user-disabled, it’s a dead end.
Related: Image-only vs Image-also: Email’s Image Issues In Focus
4. Load Time Issues
Large image files slow down email loading and reduce engagement. So, here are some best practices to tackle this:
- Compress images using TinyPNG, use the right formats (JPEG for photos, PNG for graphics), and set proper dimensions.
- Using text for email content is preferable because text files are lightweight and load more quickly than images, ensuring a smoother experience for readers. This approach also keeps the overall file size minimal. For example, rather than embedding “>” as an image, we can utilize an HTML entity to achieve the same visual effect efficiently.
- For better loading speed and readability, structure long emails into multiple sections rather than placing all content within a single table or div. This approach enhances performance and ensures a more user-friendly experience.
- Keep inline CSS concise and avoid external stylesheets to maintain a lightweight email. Simplify styling by using short CSS rules and eliminating unnecessary code. Utilizing shorthand properties, such as combining margin-top and margin-right into a single declaration, further optimizes the email’s size and efficiency.
- To enhance loading speed, refrain from attaching large files directly to emails. Instead, leverage cloud storage to share links or upload the file to your ESP for direct distribution to subscribers.
- Email file sizes generally range from 45KB to 70KB, but it’s best to ensure they remain below 100KB for optimal performance.
- Since many users access emails on mobile devices, optimizing loading times is essential. A responsive HTML design and well-optimized content enhance the experience on smaller screens. Implementing media queries ensures emails render properly across all devices while adjusting the code for different screen sizes improves mobile performance.
You can refer to the below table to get a comprehensive view of email HTML issues and their corresponding solutions.
5 Proven Best Practices for Flawless Email Rendering
Keep the following proven best practices in mind:
- Use tools like Litmus, Email on Acid, and Gmail Preview to avoid rendering surprises.
- More than 60% of emails are opened on mobile devices. Prioritize mobile-friendly email design.
- Emails don’t support JavaScript, and external stylesheets often get stripped. Stick to inline styles and minimal CSS.
- Some email clients (like Outlook) block background images. Best to always use a fallback background color.
- Ensure text is legible, use high-contrast colors, and provide alt text for images. Also make sure to comply with ADA regulations.
Related: High Production Time? Ship Faster with Modular Email Templates!
The Ultimate Pre-send Checklist
Before hitting send, do make sure to check off these items:
- Is the email fully responsive?
- Have you tested it on multiple email clients?
- Are all images optimized and have alt attributes?
- Are fonts and colors displaying correctly?
- Are all CTAs visible and clickable?
- Have you considered Dark Mode compatibility?
- Is the email under 102KB to prevent clipping in Gmail?
- Is the unsubscribe link clear and easy to find?
- Does the email load quickly?
- Are all the links working properly?
- Is any post-open content showing up in the pre-header?
- Has the email passed all deliverability tests?
- Is the email viewable on all devices?
Email development is both an art and a science. But now you know how to convert PSD to HTML email template.
Ready to take your static assets to the next level? Let’s talk! Our expert team has the experience and skills to convert all types of design files into HTML email templates. Whether your files are in PSD, Figma, Sketch, XD, AI, PDF, Invision, or any other format, simply share them, and let our experts handle the rest.
Divya S
Susmit Panda - Content writer