Some users will opt to use a stock template when designing an email newsletter. If you are more technically minded, you may decide to design your own from scratch.
If you are coding your own email newsletter, there are many guidelines and best practices which you should take into consideration. When designing your next email newsletter, remember that it is not a web page. If you are a web designer, standard coding and design practices which you may regularly use will not work inside an email newsletter.
This article is targeted towards the more advanced user. We will discuss several best practice elements which you should consider when coding or designing your own email marketing newsletter.
Keep it simple stupid!
The temptation when coding your HTML email newsletter is to create a stunning design that will grab attention. Designing your email using HTML opens the door to create stunning images, complex layouts and CSS styles…don’t!
When coding your email newsletter template always apply the KISS rule. Keep it simple stupid. Email readers are not web browsers, they can only cope with basic HTML.
Your internet browser will more than likely cope with anything you throw at it, email readers cant.
Most business users read their email in outlook. Outlook 2003 uses the IE6 rendering engine, while the more modern Outlooks use the Microsoft Word engine – a great step forward on Microsoft’s part.
If you are a web designer, IE 6 is more than likely your worst enemy, offering coders next to no room for error and will not cope with many modern scripts. If you think its a pain coding for IE 6 – try coding for the Microsoft Word.
Due to these limitations, apply the KISS rule. Keep your coding neat, simple and clean. Include quality content text and avoid overusing images.
Use tables, not CSS
If you believe that you are quite a competent web coder, you will always use CSS – more than likely you will look down on coders who still structure their websites using tables.
Get used to using tables again!
Coding your email newsletter using CSS will not work. Email readers are basic and will ignore / strip out your CSS code.
Always design your email newsletter using tables. So should you not use any CSS? – You can still use some CSS elements, we will discuss this further below.
CSS styles – use inline styles
If you were designing a layout for a web browser, developers will always suggest creating a class for your styles. Email readers are different.
If you attach a CSS style sheet/include your CSS styles as classes – your layout will fail. Email readers will strip out your CSS classes, therefore you will just be left with your basic content text with no formatting.
When it comes to coding your email newsletter – throw your web design best practice elements out the window! If you are wanting to style fonts, use inline styles.
CSS elements such as font size and font faces should be placed as inline elements within the <table> or <td> tag. Including your styles using this method should help ensure that your email newsletter is rendered correctly – however you should always test your layout as much as possible.
Never, never use Javascript
Javascript is fantastic in the web design world. When using Javascript you can quite easily add fantastic looking popups and animations. To make your email newsletter get noticed, you may wish to add your own javascript elements – don’t!
If you are using Javascript within your email newsletter, don’t even bother trying to send it. Your open rates will be a nice round figure – 0%.
A email containing Javascript will be seen as a threat by most email servers, the code could be used to hide nasty elements/viruses. Your email will more than likely be rejected by the spam filter. If by chance you manage to pass the anti-spam software running on your recipient email server – an email with Javascript will almost certainly go straight into the junk folder.
Keep your coding simple, stick to basic HTML and you are well on the way to coding a newsletter which will work for you.
Don’t super-size
What size is your computer screen? 22”? maybe you have a 28” monitor – this means you have plenty of space to design your newsletter, make it nice wide and tall.
Don’t. Your target – get your email newsletter to display correctly and clearly for everybody. We suggest that you limit your newsletter to 600px wide. On a massive screen, 600px is pretty small – however you have to consider all users and their email readers.
When your email first arrives inside your recipients inbox, it may be displayed on a preview pain. On average the smallest email preview panels are 600px wide – sadly this means that your layout should be designed to cope within these limitations.
Have you considered smart phones? Your email newsletter should also be designed to be read on a smart phone. Many business users now own and use iPhones and Blackberry’s to read emails. Thankfully, the iPhone email reader is quite robust and will scale down your email newsletter quite accurately.
Setting background colours
Apply the KISS rule to your email newsletter layout – however you may still want to add a certain level of professionalism and theming to your design. Setting a background colour can quickly make boring layouts look more appealing.
From a web designers viewpoint, you will instinctively want to set the background colour either via your CSS style sheet or on the body tag: <body bgcolor=”#FF0000″>.
Both of the above methods will fail when it comes to your email newsletter. Email clients will only read the code inside the <body> </body> tags. Code inside the <head> </head> tags and the body tag itself will be ignored. So your white text on a black background will be displayed as white text on a white background!
When it comes to settings background colours with a HTML email newsletter, we have to cheat a little.
We can fake a background colour by wrapping your email in a 100% width table and setting the background colour on the wrapping table:
<table width=”100%” bgcolor=”#FFCC99″>
<tr>
<td><table width=”600″ align=”center”>
<tr>
<td>Lorem ipsum dolor sit amet.</td>
</tr>
</table></td>
</tr>
</table>
Using this method, you have now achieved your background colour using a method which will be accepted by email readers.
Should i set my image size inside the HTML code?
Some experts suggest that you should always set your image size inside the HTML code, while others disagree. What should you do?
Many email readers will block images by default – when images are blocked, this is where the arguments for and against setting image sizes come into play.
Setting the image size inside the HTML code. If you set the image size, when images are blocked this will mean that any text wrapped around blocked images will still display correctly. Text formatting will remain the same as if the image was loaded. If images are blocked and you have not set sizes, a default small icon will appear – this will affect the layout of any text wrapped around your images.
Do not set the image size. Images are blocked and you have included a 600px x 600 px image at the top of your email. That is quite a large empty box at the top of your campaign.
There is no clear solution to the image block problem. depending on your design you may wish to set sizes or ignore them. When designing your next layout – take this into consideration.
