Designing HTML emails for a newsletter isn’t as difficult as it used to be in the past. With the emergence of visual HTML editors like Dreamweaver, Coffee Cup, TextMate, and others, you can now build and view your templates side-by-side. However, you will still need to have a good understanding of HTML in order to use these tools.
If you are fortunate enough to have an in-house designer or design team, then you won’t need to worry too much about coding email templates yourself. This is a great benefit, as you can simply upload or copy and paste the HTML template into your Email Service Provider (ESP) platform and start creating your message. If you are even luckier and your ESP uses a WYSIWYG editor, small changes are easily incorporated since you don’t need to know HTML; the changes you make on the visual editor will automatically change the HTML code.
However, if it was only that simple we would all be doing it. Designing a regular template is not the same when it comes to designing an email template. Many HTML and CSS properties used in modern Web design are not supported in email and email programs like Outlook, which can cause rendering and display problems with your email message.
Therefore, it’s advisable to adhere to some basic best practices for HTML email design to avoid any complications with the way your emails display.
Here is a list of key points to bear in mind that will help you achieve the best results:
In addition to the recommendations above, it has become common practice that email templates be created using a responsive design for mobile devices. Today 70% of all readers tend to open an email on their mobile devices first. This is important to keep in mind because not having a mobile-optimized template can affect your open rates. Further, it’s important to test each template before sending out your email to ensure everything is displayed the way it should by having adapted it to the various email clients and platforms. I suggest using our partner Litmus, as it offers the most comprehensive selection to test the rendering of your templates.