This content originally appeared on Level Up Coding - Medium and was authored by The Tech Maker
How To Code HTML Emails (Part 1)
Things You Should Know About HTML Coding for Mail Clients
The Mail Clients
Most of the templates I code are for B2B clients. So I can rely on their computers being set up and supported by their company’s IT departments. In most cases, they use Microsoft Office with Outlook on desktops and laptops, even on Apple computers. For mobile devices, they have Apple Mail or Android Mail Client.
In rare cases, they use Lotus Notes and sometimes other mobile clients.
Microsoft Outlook
As mentioned earlier, Outlook is the most used client we have to deal with. Since Outlook 2007, it has used Microsoft Word’s rendering engine, which is incomparable to modern browsers; the special CSS implementation is inferior. With Outlook 2010 it’s gotten a little bit better, but only a little bit!
Also, Javascript, form elements and video embedding aren’t supported for security reasons. But I think this isn’t so bad, imagine what marketing people or spammers would do if this would work ;-)
HTML for Microsoft Outlook — back to the 90ties
OK , CSS doesn’t work well, especially the width and height properties only work for tables. So we have to use many nested tables with very outdated attributes like cellspacing, cellpadding, align, width, height and so on.
Here’s a typical, very simple email HTML code:
The resulting email looks like this in Outlook:
The header images are broken because “http://www.myserver.com/mail_header_left.png” is just dummy code! But now for the HTML:
First, look at the <BODY> attributes for the page color settings. They were necessary to colorize a web page 20+ years ago, today they’re deprecated and shouldn’t really be used under any circumstances.
Even Outlook can handle CSS for these basic color functions. So you could leave them out, but maybe some exotic clients need them anyway, so I always include them as a fallback. This is what’s sometimes called “panic code” ;-)
Next is the first <TABLE>. The table is used to center the mail content with the “align” attribute and set the width to 620px with the “width” attribute. As you can see, the value is just “620” without the px! Otherwise Outlook would ignore the value and make the mail as wide as the window! All other tables are nested within this table.
In the <TD> for “some nice greetings” there’s a <FONT> tag that’s also deprecated. But it works for all clients like the color attributes in the <BODY>. I use it here only for illustration, because Outlook supports CSS “font-family” very well, so it’s not mandatory.
I think the rest of the code is easy to understand, and I’ve included many comments. One <TD> which might be interesting is the blank for spacing with the “height” attribute (without “px”). This is a great way to insert spaces between blocks, that always work — to be on the safe side!
How about other clients than Outlook
I talked a lot about Outlook and showed you what deprecated web techniques we can use to make emails look like the designer’s specifications.
The good thing is that all other mail clients and browsers still support deprecated code. If it works in Outlook, it works everywhere.
It’s best to use deprecated code and modern CSS to get the best of both worlds.
Things we have to keep in mind or have to live with
I’ve struggled with some strange things popping up right when everything was finished and online, and customers were giving feedback.
One of them was an unwanted space within very long tables in Outlook. Outlook tries to insert a page break; you can find a detailed explanation here: “Email on Acid.”
As you can see in my code example, the block “articles” is one <TABLE>, and every article is in a <TR>. If you have only a few articles there’s no problem. But when there are many more, a page break can occur.
To avoid page breaks, just split the single table into multiple tables, one for each article:
<!-- articles -->
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<a name="text1">Title 1</a>
</td>
</tr>
<tr>
<td>
Lorem ipsum ...
</td>
</tr>
<tr>
<td align="right">
<a href="#anchor_toc">to top</a>
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td>
<a name="text2">Title 2</a>
</td>
</tr>
<tr>
<td>
Lorem ipsum ...
</td>
</tr>
<tr>
<td align="right">
<a href="#anchor_toc">to top</a>
</td>
</tr>
</table>
<!-- and so on -->
Another problem exists with high-resolution screens, such as 2K, 4K, or Retina. Outlook renders with a larger font size. I’ve had a header image that was as wide as the text column, but the image appears smaller than the text column on these high resolution displays.
You can find a good explanation and solutions at uplers.com. Unfortunately I couldn’t get their solutions to work, but I couldn’t test it for long and I don’t have a high resolution screen. If you find the solution, please let me know.
It’s not just Outlook that’s causing problems, but also Apple Mail in iOS. Apple’s mobile client doesn’t jump to anchors in the mail. I just tested these days with iOS 14.7.1, no jumping! When I first noticed the problem, I tried using IDs instead of named anchors, but nothing worked.
<a name="text1">
or
<a id="text1">
Good news:
A colleague told me today iOS 15 supports anchor points finally!
I couldn’t test it right now, but I will believe him.
What about CSS
In my next email story, I’ll write about my experiences with CSS for mail clients, especially Outlook. You’ll see that it’s not that complicated if you know what you can and can’t do.
So please look forward to part 2 coming soon!
If you have any questions, don’t hesitate to contact me. I’d be very happy to help you.
Happy mail coding!
How To Code HTML Emails, Part 1 was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by The Tech Maker
The Tech Maker | Sciencx (2021-09-30T12:25:51+00:00) How To Code HTML Emails, Part 1. Retrieved from https://www.scien.cx/2021/09/30/how-to-code-html-emails-part-1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.