Newsletter design tips

Tips for design and content

Several email clients set certain limitations to newsletters. The 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.

• The most common width for a newsletter is 600 pixels. The narrow content width ensures that the newsletter is presented correctly on different email clients. The width can however vary between 500 to 800 pixels. By default newsletters made by Liana are 600 pixels wide, but we can also build the newsletter on a different with if necessary.
• Important text should always be added as text, so all users can properly read and see the text. Images should not have any text on them for this reason. But if your image does have text, make sure the image has a good descriptive alternative text. You can add the alternative text in the draft editor.
• Flash, forms or Javascript cannot be used
• Always include text in your newsletter. If your newsletter has only pictures, it can easily be interpreted as spam.
• Your newsletter should have one main heading H1 and under it secondary H2 headings. H2 headings also might have H3 headings etc. A good heading hierarchy makes your newsletter easy to read.
• Use colors that have a good contrast. For example on the text, use a dark color if your background color is light. You can check the contrast levels with this tool.
• Use good quality images to positively highlight your newsletter.
• Either web-safe fonts or web-fonts can be used in newsletters. See the extended guide below.

Tips for programmers

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. 

• Newsletters are built with HTML.
• The structure should be built with tables and table cells. Outlook does not have support yet for div elements.
• Table cell widths should be defined in pixels and the newsletter should have a max width, which is usually 600 pixels.
• 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 with a table.
• The background color of modules or the color of CTA buttons can be changed for another color.