What Does Organic SEO Mean?
1st June 2016
Google AdWords: More Big Changes!
27th July 2016
Show all

HTML Newsletter Best Practice

Email-based newsletters require hidden HTML code to add structure to newsletter text and ensure that images and texts are displayed correctly. Without proper implementation of the HTML computer language, your newsletter could suffer display issues or worse – be sent straight to your client’s junk folder! Here’s what you need to take into consideration when creating and sending out newsletters…

What do you want to achieve with your newsletter?

Before building a responsive HTML newsletter to connect with customers, consider the design, type of content, and how you would like clients to respond to this form of email marketing. Do you want clients to click on a link to your blog, sign up for services, or buy your latest product? Also, to avoid any complaints of spam, consider policies and permissions that may apply to you and your clients.

Use tables in your newsletter layout

Unlike today’s web pages with CSS language, HTML newsletters need to display in older software tools like Outlook, Yahoo, Gmail, and Hotmail. Even when using an existing template, tables are still required for structure. A single or two-column layout will make for easier display on smaller devices and should include the following:

  • A header with your logo and link to website
  • Social sharing buttons with important content near the top of the newsletter for immediate visibility
  • A footer at the bottom with an unsubscribe option.

Instead of setting margins to a particular scale, use multiple tables inside each other with the width=height attribute. Don’t forget to nest your tables and close all open tags!

Fixed width for proper display

A fixed width is best especially if the newsletter contains banners or images. 500–600 Pixels is recommended and will allow for automatic scaling down on small devices. The height will vary according to the content, but keep the newsletter short as most clients won’t want to continuously scroll down for information.

Stick with safe styles

Keep fonts, borders, and colours simple – some email software tools don’t support CSS language! Refrain from using background images – MS Outlook 2007 and Outlook 2010 don’t support these either.  Another factor – Avoid CSS positioning, clears and floats when embedding images – rather use the image align=”left” or map out table cells to fit the image. Avoid shorthand hex colour codes, for example, use #cccccc and not #ccc. JavaScript and Flash are also a no-go as some email clients recognise these as a threat, and your newsletter may be sent straight to the junk folder!

Optimize your images

A good rule of thumb for any images:

  • Keep file sizes small
  • Include width and height attributes
  • Include font and colour properties in your <img> tag
  • Give all images an <alt> tag (alternative text) so the search engines know what the image is about.

Anchor links and tags

Include a few links that lead to pages on your own website, or outbound links to other relevant web pages. Different tags perform different functions, for example, if you want a specific link to open up in a separate tab, use the target=”_blank” attribute. Tags separate normal text from HTML code and allow for bolder titles, images and tables. They also tell browsers what to render on a page. Keep font size and type within the <table> tag, except for images or larger individual fonts for which the <td> attribute will then apply.

Test and test again!

Test everything before you click that send button! Check your newsletter on all major e-mail clients such as Outlook, Gmail, Yahoo, Hotmail, etc. as well as on various operating systems, software and devices – PC, Mac, iPhone, iPad, and Android, etc. Lastly, don’t forget to check that all your links are present and correct.

Need help with an HTML Newsletter?

Easy2Access has a team of highly experienced web developers, programmers and internet marketers to take care of all your digital marketing needs, including the creation of quality HTML newsletters. Contact our team today!

 

E2A
E2A