6 things you should know about HTML code

Let’s say you’ve just opened a new message in your inbox and you are amazed by its layout and the technical solutions used. Or maybe the newsletter you’ve designed displays incorrectly in various email clients and you don’t know what the problem is. The explanations for both situations is the HTML code that was used. HTML has thousands of possibilities when used properly but incorrectly coded HTML is the reason why some emails do not display properly, making the message ineffective. So how is HTML best used? Here’s a list of the most important things to remember!

1. Test it as much as you can

HTML code can be rendered differently by various email clients, which means the layout can be displayed in someone’s mailbox differently than you intended. It’s usually because the code doesn’t meet the standards that are responsible for ensuring the proper display.

That’s why it’s crucial that you test the code you would like to use to search for any potential errors. Professional email marketing systems like FreshMail let you run this kind of test automatically as part of the campaign creation process. It just takes a minute for the system to analyze the HTML code and tell you what, if anything, is wrong. FreshMail also shows what the message will look like in various commonly used email services.

There is something else you can do if you want to be really, really sure that your message will display properly when your recipients open it. Setting up your own accounts in multiple email service providers is one obvious but effective way to see how your message swill be displayed for your subscribers. Before sending a campaign to your full database, you can send it just to your own addresses and see for yourself if the message displays properly.

So you that it is possible to make sure that your message appears exactly as you intended for all of your subscribers!

2. Follow standards

If you want to be up to date and technically correct when writing HTML code, follow the latest version of the CSS report. The report will tell you if any part of the code will be displayed incorrectly in a particular email client. The report analyses CSS technology and shows you:

• the results of their research
• practical advice for those who work with HTML
• examples of good HTML code
• the recipe for the perfect mailing
• useful links and resources

Soon the CSS report will be available at FreshMail so please visit the website for more information.

3. Use tables to structure the layout and positioning of your email

Always remember that:

• you should define all the properties of the tables where possible while writing HTML code: width, hight, border, align
• Outlook and Gmail don’t support properties like setting margins and padding
• you should place all the elements of the mailing in a table structure

Example:

• If you want to have a two-column newsletter, create a table for the header, a table for the content section (for 2 columns of text and a table for the footer. Note that the content section table will have 3 columns (2 + the thin one in the middle as a separator)

<table>

<tr>

<td width=’250’></td/>

<td width=’30’></td/>

<td width=’250’></td/>

</table>

4. Use inline styles when coding

Creating an embedded <style> section within the head of your html email is sometimes not enough, e.g. it won’t work in Hotmail and Yahoo. Applying a tag to a parent table doesn't mean it will carry that attribute down to all of its parts. It is a good idea to set inline styles on all of your HTML elements, just to make sure the style applies to every single element. In particular, remember to:

• use inline styles to links (font-family, size, colour)

• use inline styles for ALT-text tags (alternative texts)

• close all the tags (table, paragraph, font etc.). Spam tests don’t like it when the code is sloppy and it often causes the message to be labeled as spam (spammers are known for preparing code in this way)

5. Balance the text to images ratio

Don’t rely only on pictures when you communicate your offer - make sure that people who have blocked the display of graphics in their email will see what’s most important in the message instead of a blank email!

Some email clients disable the image display by default so your recipient will have to click ‘Display pictures’ - but only a fraction of them will decide do this. According to the Email Experience Council (source: Pinpointe) 21% of all emails sent appeared completely blank. That’s why it’s important to remember that lots of recipients won’t see the graphics in your message. There is, however, a technical solution to this problem. HTML allows you to attach descriptive text tags, called ALT: text, to graphic images. This tag enables a small bit of descriptive text to appear in place of the graphic in case it has been blocked. Alternative text should be used to encourage subscribers to display graphics and inform them of what they are missing out on.

The second important thing to note: use text instead of graphics whenever possible.

It is also important to balance the amount of text vs. graphics in your email for spam reasons. Many email filters produce a SPAM score based on the ‘graphic to text’ ratio.

6. Be careful with these:

• copying and pasting from MS Word directly to the HTML editor in email marketing systems - that can add unnecessary styles to the code
• Flash elements - they simply won’t work,
• also be aware that GIF’s won’t work in desktop version of Outlook so make sure that the most important and most attractive image is used first - because it can be the only one that will be displayed.
• width of the email: it should be maximum of 600 - 680 pixels wide. A message of that size will be fully displayed in most email clients. If you prepare the code wider than that, your recipient will need to scroll back and forth in order to display it. Not all of them will have patience to do this so you could lose their interest and attention.

If you create a complex layout, the chances of making mistakes in your HTML code increase. That’s why it’s important to spend extra time on it or have it done by specialists. If you want FreshMail specialists to design a newsletter for you from A to Z, please contact us on telephone number +44 20 3598 4805 or at support@freshmail.com