Melon Corporate Blog
Beautiful on the Inside - HTML code and your emails
It’s not difficult to create great looking emails <start shamless plug> especially if you choose Melon Media to create them for you </end shamless plug> but how do your emails look ‘on the inside’?
The code that makes up your HTML email is an important, yet often neglected, aspect of email creation. It dictates to the Outlooks, Hotmails, Gmails and MacMails of this world how the email should be displayed, and though the concept may be difficult to appreciate, these browsers ‘see’ the code and then render it as it sees fit. So where you see the colour red, the browser sees #FF0000.
Therefore if your code is not clean, or has parts missing, or is extraneous, or uses deprecated tags - then there is every likliehood that this messy code will translate into a messy email.
If you want your clients to see a clean, well designed email when they receive it - read on.
Let me begin by saying that learning HTML is not a prerequisite for using the variety of email design systems out there. Especially if they incorporate a WYSIWYG (What You See Is What You Get) editor. These try to make it incredibly simple to create what you want with just a few clicks and some typing.
The problem with these WYSIWYG editors is that what YOU see may not be what others GET.
The way that email and web browsers handle the display of your message comes down to how these programs interpret or "render" the html code that makes up the web page or email. This can be a problem in the sense that you can get the same visual result by using "good clean code" or "bad messy code" - which is kind of the equivalent of going to Melbourne from Sydney on the Hume Highway or cycling to Melbourne via Costa Rica.
For example, here are two different methods of creating some red text:
<font color="red">
is the same as
style="color:#FF0000;".
Now, to delve into this example further, one of the elements above will work well with links in email, and the other will only work if correctly coded.
To explain, one of the most common problems I come across is that links within an email revert to the standard "blue" colour when you preview them - even if you highlight the link and select the new colour.
This is because some editors can't work out whether to colour the link itself, or the text surrounding the link. Because the link is it's own element (<a>) it has its own rules.
Let me demonstrate...
The most common error is that the text outside the link is coloured:
<font color="#FF0000"><a href="http://www.melonmedia.com.au"> Go to Website </a></font>
This will colour the link blue when previewed.
The correct way is as follows:
<a href="http://www.melonmedia.com.au"><font color="#FF0000"> Go to Website </font></a>
See how the font tag is within the a tag? This means that whatever is inside that a tag will be affected.
This will work across most browsers, but it's not exactly pretty, is it?
Basically you're using two different tags to get one result. Even worse is that this is not 'standards based' and uses code that is deprecated (obsolete).
The best way to make your link red is by using email-friendly CSS - or cascading style sheets. Don't let the name scare you. It's just a different (easier, more wonderful) way of writing the same thing.
See below:
<a style="color:#FF0000;" href="http://melonmedia.com.au"> Go to Website </a>
Instead of two tags, we now just have one tag with a style applied to it. Beautiful.
It makes a lot of sense, especially if you are a frequent email sender, to learn the basics of HTML code and CSS. Most email editors have an "Advanced" or "Source" view so that you can see and edit the code.
This will allow you to troubleshoot any display issues that you are having (like incorrectly coloured links) and give you a much cleaner email, inside and out.
Your recipients will thank you for it.
Please feel free to 'comment' on this entry and ask any questions you may have about HTML code and emails - I am more than happy to help out where I can.
As a side note, Campaign Monitor have a great guide to "CSS Support in Email". If you are looking to develop your clean-coding skills further this is a valuable resource to refer to.
Coming soon - The perils of Microsoft Word and Email Design.
Blog Categories
Archived Entries
October, 2008September, 2008
August, 2008
July, 2008
June, 2008
May, 2008
April, 2008
March, 2008
February, 2008
January, 2008
November, 2007
October, 2007
September, 2007
Comments - oldest entries appear first, most recent entries at the end.
Leave a comment:
All comments are moderated, name and email fields are mandatory, but only the name will be displayed in the comment, your email address will remain private, and will not be added to any lists. The requirement of the email address is to help ensure that the comments are being submitted by legitimate people.