Introduction to HTML Email Development

HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.

©Lee Munroe in An Introduction To Building And Sending HTML Email For Web Developers

Main principles

• table layout,
• inline styles,
• HTML4/CSS2

Notes

• You can use <div>'s locally (inside <td>), but main layout you should still use <table>;
• You can use css inside Embedded Stylesheet, but be sure to use the !important statement;
• You can use media queries inside Embedded Stylesheet;
• Gmail forces text and background colors to invert in dark theme;

Tools

• Can I Email…? - lets you check support for 179 HTML and CSS features across 31 email clients.
• putsmail.com - service for sending HTML email templates.
• The Ultimate Guide to CSS - lets you check css properties supporting

Articles

1. A Complete Guide To HTML Email
2. An Introduction To Building And Sending HTML Email For Web Developers
3. New to email coding? Here’s where to start.
4. Ultimate Guide to Dark Mode
5. 10 Best Practices for Email Design: Tips for Developers
6. Guide to Email File Size and Load Times

Additional links

• https://netology.ru/blog/verstka-mail
• https://habr.com/ru/post/252279/
• https://www.unisender.com/ru/blog/sovety/kak-sverstat-pismo-instruktsiya-dlya-chaynikov/
• https://webdesign.tutsplus.com/tutorials/what-you-should-know-about-html-email--webdesign-12908
• https://webdesign.tutsplus.com/ru/articles/build-an-html-email-template-from-scratch--webdesign-12770
• https://vc.ru/design/75639-kak-pravilno-verstat-pisma-rekomendacii-i-trebovaniya-dlya-verstalshchika
• https://emailsoldiers.ru/blog/html-guideline