Newsletter design tips

On this page you can find instructions that are mainly for the use of ad agencies and newsletter designers.

Newsletter format

Several email clients set certain limitations to newsletters. Especially HTML format newsletters are interpreted very differently by different email clients. Below are some pointers that should be considered when designing and composing a newsletter.

• Recommended maximum width for a newsletter is 800 px
• Important content should always be in text format so that this content is certainly visible for all recipients.
• Flash, forms or Javascript cannot be used
• Always include a text section. If a message consists of only images, it is easily regarded as spam.
• A simple basic structure makes it easy to use for different purposes
• Always make sure that the CSS configuration works on all programs. A list of different CSS configurations: Guide to CSS support in email clients.

Recommended fonts (web-safe fonts)

When designing newsletter templates you should make note of the fact that the recipients' computers might not have fonts installed that are designed for printed media. This is why you should use safe fonts that can be found in almost every computer for templates. Also web fonts, like Google fonts can be used but because they won't be displayed in every email client, you need to choose a backup font from web-safe fonts. Read more about we fonts from below. 

Here is a list of fonts that have worked perfectly in all of our tests:

• Georgia
• Times New Roman
• Arial
• Verdana
• Courier New

The following fonts have worked quite comprehensively:

• Impact
• Tahoma
• Trebuchet MS

Web fonts are fonts that are available online and using them doesn't require downloading them to the user's computer. Web fonts, such as Google fonts, can be used in LianaMailer. 

However, all email clients don't support web fonts and the fonts might break when using them. 

Programs and devices that support web fonts:

• Apple Mail 8, 9
• Outlook 2000
• Outlook 2011 (OS X)
• Outlook 2016 (OS X, not Windows)
• Thunderbird
• Android Mail
• iPhones and iPads
• All modern web browsers. 

Programs that don't support web fonts:

• Outlooks 2002, 2003, 2007, 2010, 2013, 2016 (Windows)
• Gmail App
• AOL Mail, Gmail, Office 365, Outlook.com, Yahoo! Mail

If you use a web font, choose a web-safe font as a backup font.

Programmer guidelines

We recommend using a professional software developer for coding a newsletter. Coding a newsletter differs greatly from coding a normal HTML website. We offer these services with testing, from a ready-made PSD image to a newsletter template, for example. Contact our sales or support, we are happy to help. 

• HTML is preferred over XHTML.
• Don't use returns around img tags.
• Use tables inside tables as little as possible.
• CSS padding and margin do not work reliably with every element. Safest use for padding is to set it on table cell (td). Make the required kerning with padding to table cell (td) or additional empty table cells (td) by giving them the required width and/or height.
• Width attribute must be defined for all images
• Arrange images and texts to the cells with the cell align and valign parameters. Align parameter for images does not work for arranging an image or surrounding the image with text.
• Optimize (= compress images)
• Animated gif files can be used. Mainly they work well but with certain limitations in Outlook email client, for example.
• Utilizing transparent png images is possible.
• CTA buttons can be coded or images can be used for them. However, we do not recommend using images. 
• The background color of modules or the color of CTA buttons can be changed for another color.
• YouTube links can be utilized in newsletters usually without any separate installations.

Locking template sections from editing

If message locking setting is on, certain parts of the template can be locked so that they cannot be edited when writing the message. Cells that can be edited will be marked with "editable" class (td class="editable"). In this case, the cells that have not been marked, are locked when the message is being written.

Only individual table cells (td) can be marked as editable, and therefore a row or a whole table cannot be classified as "editable".