Issue
I am curious if anybody has any suggestions how to Create Email Safe / Friendly Outgoing HTML?
I know there are various specifications to send HTML Email and have excellent accuracy in the body when received on the client.
I have tried to send various outgoing HTML Email tests, however the receiving client body does not always accurately show up as expected.
Some issues that seemed to be problematic are that the various email clients whether Mobile First - PC or Mac or Linux etc. Seem to display the body differently - and the header tags - media queries and alignment are not what I wanted.
- Some say for example the Gmail may not correctly reflect whether header tags such as media queries and or styles etc. work correctly - and that Gmail prefers in-line styles instead... ?
Q: is there someway to minimize these issues so that the body of the outgoing HTML email will largely reflect my original choices?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- other code here -->
<style>@media only screen and (max-width:480px) {
.button_content-cell {
padding-top: 10px !important; padding-right: 20px !important; padding-bottom: 10px !important; padding-left: 20px !important;
}
.button_border-row .button_content-cell {
padding-top: 10px !important; padding-right: 20px !important; padding-bottom: 10px !important; padding-left: 20px !important;
}
}
</style>
<!-- other code here -->
</head>
<body>
<!-- other code here -->
</body>
</html>
Solution
It's one of our notorious tasks as front-end developers to deliver HTML emails that look exactly like the provided design in ALL mail clients :D. I just had to write an answer here, because I was recently tasked to optimise the React component library our team uses to compile HTML emails to fully support Outlook 2016. That's fun!
It is indeed true that every mail client will have a tiny (or huge!) difference in how it renders your HTML. For example, Apple Mail and Gmail have pretty wide support for HTML and CSS specifications, so there's quite some consistency between how your HTML renders in the browser and those mail clients.
Outlook, on the other hand, uses the Word rendering engine to render HTML, and as such, it has a very different approach to getting the same looks as in other mail clients (and why it's every email designer's nightmare).
I would generally advise sticking to HTML tables and inline CSS for pretty much every component you have in your email—they are supported and give consistent renders across most mail clients.
A tool I find useful to check if something I'm about to introduce to the code is supported in our target mail clients is Can I email. For example, if you have elements in your code that use rounded corners, you will discover that the Windows Outlook client does not support the border-radius property:
After I ensured that my source code is supported by every target mail client, or that it has fallback code for specific mail clients such as Outlook, before sending my .html files to the next team, I would ideally want to know how the HTML renders in every target mail client myself.
There are multiple tools for this and I haven't used all of them, but SendGrid has worked great for me. By creating a dynamic template in the email API, you can paste your HTML code and run a test render on a very wide range of mail clients (this is just a part of them):
For example, you can select the Apple Mail and Outlook 2016 clients, and generate a render for those clients:
Once I can verify my compiled HTML code matches the requested design everywhere, I can safely send the files for delivery.
A side tip for enhancing your workflow in creating and designing cross-compatible HTML emails is to use a framework like Astro where you can write reusable components—this makes things especially easier because you can isolate the code of each component to an individual file, and work on making that specific component cross-compatible.
Then, you can create a new page that will serve as your email template, and simply import each component as-is, without having to worry about displaying it correctly in different mail clients that it is already optimised for. Build your project to static .html's and done!
You might also find these articles useful in addressing common problems for Outlook specifically:
- Outlook HTML Emails: How to Fix 11 Common Rendering Issues
- Adding Rounded Corners to Containers in Outlook | Kontent.ai
Answered By - user12512444
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.