Background images & colours in your email
We often get asked how to modify the background of an email.
There really is no easy way of doing it considering the environment we are working with. So, we thought we would share some quick tips to help you with setting the background of your newsletter.
The problem is that there are so many email clients (programs which you use to view your email like hotmail, gmail, Outlook etc) and each of them renders the contents of the email differently. This means that the way something looks in Outlook could be very different to how it looks in Hotmail.
Many browser based email clients (such as Gmail, Yahoo Mail, Hotmail etc…) remove the <BODY> and <HEAD> tags of your document. So this pretty much rules out CSS for setting such things.
The best way to do it?
Many web developers are about to cringe at this, but the answer is Tables. That’s right! Tables are back in fashion and it is pretty much the only way to get the desired effect that will work on all the email clients.
Now, how to do this?
Simply, create a table wrapped around your whole document (set the width to 100%). Then set the background colour of the table to the desired colour or set it to an image. We recommend doing it old school with the “background=” and “bgcolor=“ tags.
Once your table has been created just insert your newsletter code inside.
CSS in Emails?
CSS is allowed. But try to keep it short and sweet. If there is something you want to do in CSS that can be done in HTML; it’s probably better if you do it in HTML.
Any CSS code needs to be in-line or embedded. That means no linking to external content.
We prefer in-line CSS. Might make you feel dirty but it does work.
Your code may look like spaghetti but it will do the job
Unfortunetly, HTML (especially CSS) isn’t as reliable on emails as it is on web pages.
Until there is a unified standard and consistancy between the different email applications, you are going to have to get used to shortcuts like this.
And naturally, you can always chat to us for help and assistance with any of the above.
