This short tutorial will guide you through some of the essential design factors that need to be taken into account when building an HTML email newsletter.
Creating your first email HTML newsletter involves some different HTML coding techniques than those used for regular website pages, in part due to the proliferation of SPAM. Not all email clients (Outlook, Eudora, Thunderbird) and webmail based services (Hotmail, Gmail etc) render the same code in the same way. They all use different methods in re-factoring HTML email code as a pre-emptive attempt to reduce the likely hood of the recipient receiving spam of virus’ transmitted through email because bulk email is a cheap way of spreading these online risks.
Your HTML code needs to be as compatible as possible with the target email clients in the same way Internet Explorer renders pages differently to Firefox. For a full report on 24 of the most popular email clients currently in use on the desktop, webmail and mobile clients, download the free Campaign Monitor report of CSS email client support in PDF
Checklist – things to avoid
- Flash movies/animations
- Forms
- Javascript
- External referenced CSS stylesheets
Design of the email
Firstly, all of your CSS styles need to be inline. Externally linked stylesheets will be removed by email clients. Forget about using DIV tags to structure your HTML, revert back to a table structure to ensure it renders correctly.
Gotchas
There are a few technical issues when designing an HTML email. First and foremost there is an issue with how different email clients render HTML, even more so than browsers. Outlook uses Word as it’s HTML render engine. Hotmail has issues when rendering images and the user is viewing their email on Firefox.
