Creatio administration
This documentation is valid for Creatio version 7.12.0. We recommend using the newest version of Creatio documentation.

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

chapter_content_button_standard_view.png 

Fig. 2 — Buttons display in MS Outlook

chapter_content_button_outlook_view.png 

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 btn_chapter_content_designer_htlm_element_edit00003.png 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

chapter_content_2_blocks_email_template.png 

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

chapter_content_designer_non_adaptive_page_layout.png 

To configure the message width:

1.On the email template page, click the [Edit] button.

2.Click the btn_com_content_designer_gear_menu00004.png 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

How to create email templates in the content designer

Did you find this information useful?

How can we improve it?