We have been doing HTML emails for clients for years now and over the time we have seen many changes in what you can and can’t do when building them. The problem is they are moving to what you can’t do, so are we soon going to loose the way we can code e-shots?
When we started you could basically use any HTML elements and style. This gave you the flexibility to code amazing emails and not have to use so many images. The problem was that some of these great elements were portals for hackers. They could use elements to break the email clients website and there for leaving it exposed. If the website the emails come on is of course HTML and you leave an open tag or effect the code on the outside in any way, then the hacker code have access to some hidden code.
Coming forward now there are less elements you can use and so it makes it harder to make the email as much text as you can. Due to the security again, images don’t load in unless the user lets them so you want to make sure that your email contain as much text as it can, but this is where you loose style. If you can make the text look good and put it in a attractive way so that the user does except the image, then you may loose viewers.
//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
(adsbygoogle = window.adsbygoogle || []).push({});
Below are some pointier we have came across while doing these emails.
As much text as possible is the first point. As I said above, before the user sees all the nice images and design they have to accept them before they see them. This means you need to get their trust, if you do not already, with the text content on the email. Therefore the more text the better the return in viewers.
<font> tag is what you need round every bit of text content to ensure styling for them holds. The other good thing you can do is import Google fonts with this tag as well.
<table> tag and it’s children elements are the elements you should build the whole of your e-shot with. It seems it is what works to keep everything in format with out having to do an abundance of CSS work.
<td> tag for padding. The other elements do not have any structure, so padding doesn’t work on them. If you want to use padding, then put your content inside the td and put the padding on this element.
You will need to use padding a bit different in e-shots as well, because margin doesn’t work at all. The best way is anything you was going to put margin round, put padding round that.
<img> tag is ok to use, but as said before you want to avoid using as much img tags as possible. The other tip with these is to use the img width attribute and not the CSS width. The CSS styling one doesn’t work.
Color attribute has a small hitch that you can’t do and that is use work colours. If you try to use ‘white’ it will not recognise the colour and probably just inherit it colour instead, but if you use the hex colour ‘#ffffff’ then it will show fine.
