Layout of email letters and work with images in email marketing
When creating an email newsletter, you need to take care not only of text information, but also of the design of the letter. The important components are:
- unity of style, for brand recognition;
- layout of html letters: selection of fonts and styling of the text at;
- proper use of images.
The last point should be considered in more detail.
Why is it important to use pictures correctly?
Images are the best way to attract a client and focus on key points. Research shows:
- when using images, the CTR of emails increases by 47%;
- the assessment of the attractiveness of the material increases by 65%;
- the use of the logo and corporate colors in the design increases brand awareness;
- people are more likely to click on pictures.
As a result, the correct use of images helps to formulate the main idea and increases the effectiveness of letters. The optimal ratio is 40% pictures to 60% text. Therefore, it is important to understand how to beautifully design a letter using images.
First of all, you need to pay attention to the type of text submission. The most commonly used tabular layout of emails. It is as simple as possible and, unlike the block one, allows you to display information in the form conceived during creation. But keep in mind that today more than half of users view emails on mobile phones (77% at the time of writing in 2018).
The layout of letters must be adaptive so that the mailing list is displayed correctly on desktops and laptops, as well as phones with different screen sizes.
How to make layout responsive?
- In order for the message to be displayed without distortion, it is recommended to make the width of the layout no more than 600 pixels, but no less than 500.
- It is better to set the boundaries of the message as well. Psychologists believe that writing without marked boundaries is subconsciously perceived as “incomplete”. To do this, it is enough to fill the letter with a certain color.
- The actual size of the image must match the uncompressed output. Scaling degrades image quality by 40-60%.
- The file should not be large – the mobile Internet may not be able to cope.
What image format to use?
Today, the most popular formats for letter layout are JPEG, GIF, PNG and SVG. Not a single one has unequivocal advantages, and when choosing, it is worth focusing on the tasks performed. Let’s list their features.
- JPEG. Pros: Great for color reproduction. Disadvantages: no animation, heavily distorted when zoomed out, file size grows with image zoom; inconvenient for logos.
- GIF. Benefits: transmits animated images; compressed without losing quality; conveys the text well; makes it possible to create transparent areas. Disadvantages: the palette is limited (256 colors); large file size; does not display photos well.
- PNG. Advantages: compressed without loss of quality; ideal for logos; transmits texts; can convey transparency. Disadvantages: too “heavy” file; lack of animation; not all browsers support it.
- SVG. Advantages: easy and lossless scaling, small file size. Disadvantages: Not all email clients support this format.
Fonts for the picture
It is recommended to add explanatory inscriptions to the image when writing a letter. In this case, for the selected font, you need to consider:
- size – not less than 14 pixels;
- color – contrasting, standing out against the background;
- type – sans serif – Tahoma, Verdana or Arial.
Optimal picture size
When laying out html letters, the size should be selected based on the following considerations:
- the size of the banner (animated or not) must fit in the width of the template and be 600×300 or 600x400px;
- 640x480px is most often set as the maximum size;
- so that the buttons are comfortable to press, their size should not be less than 40-50px;
- around buttons or clickable images must be indented;
- file size must be taken into account so as not to increase download time and not test the patience of customers.
Letter layout: how to use a picture – an image or a background?
When laying out a letter, you can set a different type of background, in particular, in the form of a picture. Technically, this is not difficult to do, but problems may arise when viewing. The background should not stand out and interfere with the viewing of the text, it should fit into the overall design of the letter. And be especially careful when using animated GIFs for the background.
It is also worth setting an additional background color. Some email clients and browsers do not allow setting a picture as a watermark.
Since not all platforms support the background property, especially Outlook, you should be careful when using background images. Add an appropriate bgcolor value so that any text will be displayed to users without background images and/or images disabled.
Although pictures (especially animated ones) increase the attractiveness and CTR of the letter, do not overdo it with their number at the expense of informativeness.
Filling in the attributes of the <img> tag
Do not forget to fill in additional attributes when installing the image – especially the ALT parameter, including in the logo. If the photo is not displayed, an empty area and an alternative description will appear on the screen. Causes:
- loading slowly (bad connection);
- the user can disable the download of images to reduce traffic;
- a number of email clients display images only from trusted sources;
- with the clickable image disabled, the user will get an idea of where the link leads;
- if the image is in the header, the preview will display the ALT text before opening the email.
It should be noted that the alternative text should not be long (about 30 characters). Some browsers “cut” or simply do not display long messages.
Features of fitting an image into a table cell
The tabular method is not a panacea that guarantees the correct positioning of the image. Therefore, the layout of email newsletters should take into account:
- for small images (less than 19px), you must directly specify the height and width inside the <td> (attributes height, width, and line-height);
- words like “promo” or “banner” should not be used in image titles, so as not to fall under the action of ad blockers;
- There must be no spaces between the closing character of the <img> tag and the closing </td> of the cell, otherwise the browser will not properly process the closing of the cell.
Do I need to install image maps?
Embedding links in images is a useful technique because users like to click on images. But a number of rules must be observed:
- around the picture you need to indent;
- it is necessary to prohibit setting the border parameter in the link, otherwise a blue (burgundy after visiting) frame around the image may appear;
- when a link is embedded in a large image, it must be sliced in Photoshop so that the clickable area is a separate image file that will be wrapped in the anchor link in the code. Before choosing this option, we recommend discussing with your clients the benefits of linking the entire image – this will give you a much larger clickable area.
Issues with sending to Gmail and Hotmail
These popular email clients often show different effects when displaying mailing lists. Sometimes their style is different in different browsers – Safari, Chrome or Firefox.
In them, images are transmitted by block elements, so it is necessary to add the style=display:block parameter not only to CSS, but also to the <img> tag. If the image is embedded in the text (it can be an icon after a link in the text), you must specify style=display:inline.
Background images, alt attributes, and images in Gmail and Hotmail are aspects to pay special attention to when laying out emails.
- When adding an image, it must have the attribute border=0, and if the image is wrapped with a link, then the property border:none must be set for the link tag (if you do not do the latter, then in some clients a blue frame may be displayed around the image).
- The gif format is best for line art and simple graphics.
- The jpeg format is best for rich, layered, and photographic elements. The quality of images exported in jpeg format should generally be 60% of the original quality. In some cases, you will need to increase the quality up to 75% to eliminate image noise.
- The png format is best for images with high transparency.
To embed images in text (for example, an arrow image after a text link), you must include style=display: inline; instead of display:block; <a href=https://site.com>
There will be a link with an arrow at the end <img scr=arrow.gif width=12 height=12 style=display:inline; border:0;></a>
Brief conclusions
Let’s sum up some results on inserting pictures into emails:
- Images enhance the look and feel of emails when used correctly.
- The layout must be adaptive so that the page is displayed on the screen of a mobile device (without additional compression).
- The format of the images used must correspond to the tasks (mainly .PNG or .JPEG).
- The signature font on the picture should be large, clear and contrasting.
- The image must be sized according to the template (up to 600px wide).
- When using an image as a background, you need to take into account the visibility of the text on it, as well as provide an alternative color fill.
- Be sure to include alternative text (small size) in the ALT tag.
- When inserting a picture into a table cell, you must follow a number of rules.
- When installing a link on an image, it is required to provide linking rules and remove the border on hover.
- It is necessary to take into account the peculiarities of styling in Gmail and Hotmail.
If you follow these recommendations, your newsletters will become more effective and profitable!
Internet marketing expert. Head of marketing agency MAVR.
Business degree “Master of Business Administration” (MBA).