I think it’s time to talk realistically about newsletter templates, and why they are not the same as web pages.
The truth is that often we receive questions about this, users having problems with the layout of their email campaign.
Sometimes it’s a simple aspect, which can be easily fixed.
Other times it’s a more complex error, which can permanently affect the newsletter template.
You cannot create a newsletter templates as if it was an web page
Unfortunately, it is not the same, although both use HTML.
Editors like Dreamweaver are designed to develop websites, not newsletter template, so we have to be careful.
Most likely you didn’t know, but one of my first jobs was as a web designer.
It was a long time ago.
Well, not that much.
In fact, when I created my first website, we used tables, not divs.
Yes, a long time ago.
Gradually I lived the transition to the use of CSS websites, and therefore there were always compatibility issues between different browsers.
Terrible, what worked for a browser did not work for other versions.
For each browser had its own rules on how it should interpret HTML code.
The result, as you can imagine, was hours and hours of fun until the website could be viewed properly in the most popular browsers.
Well, actually it was not so funny.
It could be very laborious.
What does it all have to do with the design of newsletter templates?
All browsers were updated and improved to be able to accept HTML, as well as other languages, But in the case of email clients, these softwares didn’t improve very much.
Therefore when you are working to create a newsletter template, it’s like going back in time.
This means that when working on creating newsletter templates you must use tables and inline styles.
It’s not just the fact that email clients don’t support CSS, an email software such as Outlook doesn’t support the use of external files, these files will not be loaded,
Furthermore, the styles that are generally used in style tags inside the head are not displayed, the head section will usually be completely ignored, and this is one of the most common problems.
Many of these limitations are related to safety, as external files can be used to affect the email client and therefore the computer.
In addition, email reading software are not evolving in the same speed as browsers, and it is necessary to maintain compatibility with older versions.
The fact is that newsletter templates can’t be created as a website, and I think this will not change for some time.
To help us with these more complex aspects, I asked Florencia, one of our colleagues who will explain some fundamental points
About this subject.
What are the recommended CSS styles for a newsletter?
When you send an email campaign from your Mailrelay account, you can use on our predefined templates, with a wide variety of options to meet your needs, but if you have experience in creating HTML, you can also upload your own newsletter template.
However, when it comes to creating a newsletter template, you can have a terrible headache due to compatibility issues with different email clients. The main cause of these problems occurs because some clients don’t recognize certain rules of CSS styles, therefore we need to be well informed about these issues.
Below you will find a compatibility list for the most used CSS styles, for the software most commonly used.
You will also find some clarification on specific situations:
* Width/padding in Outlook: This rule is not compatible if used with tags <p> or <div>
Other styles: Border-color, max-width / min-width, list-style-image / list-style-position: Outlook and outlook.com (eg Hotmail)
They are not compatible with these styles.
Responsive: for now it is only compatible with iPhones / iPads and apple email, therefore it is important to be careful when creating / using a responsive template.
CSS3 / HTML5: They have a very low rate compatibility, therefore we don’t recommend you use these options.
Also, try not to use an external style sheet, because most of the softwares will not find it and your newsletter will be displayed without styles.
Finally remember to avoid using divs if your template has several columns, in which case the tables are the most reliable tool.
If you want to learn how to work with the creation of newsletter templates, our blog provides other articles on the topic
Yes, compatibility is an issue and it must be considered.
I personally really like an article that i saw on Litmus, about the tyranny of the tables, explaining the differences between the design of websites and newsletter templates.
|Instead of …||Use…|
|div||table, tr, td|
|h1, h2, h3||td, span|
|link to external css||td with inline style|
|margin||td with style padding|
|float||multiple tables and aligned cells|
As we explained before, it’s like going back in time, but it is important to consider these points.
The most important thing is to remember that an email is not a website, and that email clients don’t support all the features browsers can accept smoothly.
You have to create your newsletter templates carefully, otherwise you will have more problems than benefits.
And hope that things will improve in the future.
Please leave a comment if you liked this article!