Recommendations for adaptive email message layout
When preparing an email message template, there are a few rules to keep in mind in order for the message to be displayed correctly in all email clients. The following describes the nuances that affect the correct display of email messages in the recipient email client.
Contents
•Features of email messages layout for MS Outlook users
•Features of Gmail email messages layout
•Features of email messages layout for mobile devices
Features of email messages layout for MS Outlook users
When sending emails to customers, Microsoft Outlook users should take into account that when viewing emails in MS Outlook some elements, such as buttons, may be displayed differently than in the template. In addition, for security reasons MS Outlook blocks the downloading of images in emails by default.
How to ensure a consistent button display in the MS Outlook email message templates?
In the bpm’online email templates the “Call to action button” element is often used. The standard button has rounded edges (Fig. 1), while in MS Outlook this button is displayed as a rectangular (Fig. 2).
Fig. 1 — Buttons in bpm'online
Fig. 2 — Buttons display in MS Outlook
For the button to be displayed correctly in MS Outlook, you must edit its HTML code in the email message template.
1.Since the code for rounded buttons is not universal and depends on how the button is laid out, ask the bpm’online technical support team for it — support@bpmonline.com.
2.On the email template page, click the [Edit] button to open the content designer.
3.In the content designer workspace, go to the edit mode by clicking the 
button.
4.In the opened window with the HTML code, add the code provided by technical support in any place.
5.Add the code to the HTML markup for each button used in the email message template.
6.Save the changes.
As a result, the call-to-action buttons will look identical to the original ones when viewing the message in MS Outlook.
How to customize the display of images used in the email in MS Outlook?
Recipients of messages can control automatic downloading of images in MS Outlook using:
Options —> Trust Center> Trust center settings, and then disable or enable the ”Don't download pictures automatically in HTML email messages or RSS items” option.
Attention
Before you make a decision about disabling the blocking of automatic image downloading, you have to consider that it allows avoiding the view of potentially offensive content as well as preventing data corruption on the computer with malicious code and allows faster loading of the message contents when connecting with a low data transfer rate.
Features of Gmail email messages layout
If you are aware that the majority of recipients of your message use Gmail for email service, we recommend using only the two column content items (Fig. 3).
Fig. 3 An example content item that consists of two columns
Due to the limited size of the working window, messages consisting of more than two columns are displayed incorrectly in Gmail. For example, if your message consists of three vertical content blocks, the last block will be shifted under the first two.
Features of email messages layout for mobile devices
If a significant part of your bulk email audience are mobile device users, use templates that consist of only one column with dimensions of 500-600 pixel width. Otherwise, the message may not be displayed correctly. For example, parts of tables or images can exceed the size of the recipient’s mobile device screen and so the text font will be reduced to the size of the screen thus becoming unreadable (Fig. 4).
Fig. 4 An example of message not adapted for viewing on mobile devices
To configure the message width:
1.On the email template page, click the [Edit] button.
2.Click the 
button in the upper left part of the content designer workspace. In the field that appears, set the template width to 600 pixels.
3.In the template text field, increase the font proportionally to the template width.
4.Save the changes.
Note
When working with an email template, remember that the preview of the generated message in the content designer does not guarantee that the email recipient will see the same thing. This is due to the settings and features of different email clients.
Note
Before you start sending bulk email (in bpm’online marketing and CRM bundles), we recommend testing the created and adapted message by sending it to addresses registered on different email services. Send a test letter.
See also
