Creating email newsletters that will look the same across various email clients, usually involves a blend of design, coding, and strategic planning.

Composer Online covers the coding part and suggests suitable instruments to compose email templates that will be displayed as expected everywhere, even in MS Outlook.

What’s new?

The elements in the Email templates of Composer Online were updated with MJML.

Updated UI

The interface of Email templates was updated in v. 3.8 to simplify the understanding of future emails in the editor. What was changed:

• the editor width was narrowed to 600 px. This is a “gold standard” in email marketing that guarantees such emails will display correctly in every email client (for example, Gmail increases the Spam score when the email width > 620 pixels);
• the principle for operating with elements. From now on, the Columns (for static elements) and Containers (for dynamic elements) should be used for structuring the template (a table layout approach);
• new elements were added, including Button, Social Media, and Spacer.

The elements themselves remain the same as previously.

Weaknesses of Outlook

Modern design approaches

Advanced design approaches like:

• animations
• transitions
• shadows
• rounded corners
• gradients

may not be supported in some versions of Outlook. This can make modern, sleek designs look flat and outdated when viewed there.

Web Fonts

Outlook does not support most web fonts and will fall back to default fonts like Times New Roman or Arial. This limits the typographic design of your email unless you use images for headings, which brings its own set of accessibility issues.

In Composer Online, the fonts were limited to definitely working fonts, including:

1. Arial
2. Arial Black
3. Courier New
4. Georgia
5. Helvetica
6. Tahoma
7. Times New Roman
8. Trebuchet MS
9. Verdana

SVG Images

Scalable Vector Graphics (SVG) is not supported in Outlook, meaning any logos or icons in SVG format will not display. The experts recommend using PNG or JPEG formats instead.

Composer Online automatically converts images from Salesforce and manually adds static images into PNG format for predictable display in email campaigns.

Why PNG but not JPEG?

1. PNG files benefit from lossless compression. This means no data is lost when the image is compressed — the quality stays the same no matter how many times you edit and save the file.
2. PNG supports transparent backgrounds.

Padding and Margin in CSS

Outlook often ignores or inconsistently applies CSS padding and margins, leading to layout issues. This can result in elements being too close together or too far apart compared to how they're designed.

Using margins is more risky, so dimensions in Composer Online are limited to padding settings only. Also, the element Spacer was specially added to separate blocks from each other.

Animated GIFs

While Outlook 2007 and newer versions support animated GIFs, Outlook 2000-2003 does not. Additionally, in some versions, only the first frame of the GIF will be displayed, so the first frame must convey the essential message.

How to compose responsive emails with Composer Online?

Best practice 1: use the Table layout approach

Design your email layout using nested tables for better control and consistency in Outlook. “Tables” in Composer Online are Columns and Containers.

Drag the Column element to the editor, and place any static element inside. The same flow works for the Collection Container, Table Container, Current User Container, and dynamic elements.

In this example, there are 2 text elements added, and they are reflected one by one as separate items (they are colored for better visibility):

Use 2 Columns, or 3 Columns elements to create a template with 2 or 3 adjacent tables. If you need more, select and duplicate a column.

Best practice 2: Simplify the Design

Given Outlook's limitations, simpler designs are more likely to render as intended. Reduce the use of floating elements, complex positioning, layered images, rounded corners, GIFs, etc.

Best practice 3: Use pixels

While modern web design favors responsive units like % or em (a unit of measurement that indicates size relative to the size of the font), Outlook renders more consistently with pixel-based dimensions. Use pixels for widths, heights, and font sizes if it is possible.

Best practice 4: always set specific Sizes for images and maps

Large images or maps may be clipped or not displayed properly. For optimal rendering, set specific values in pixels. By default, images and maps have width = 300 px and height = 200 px.

Best practice 5: set a background color to every image to prevent issues with transparency

Outlook 2007, 2010, and 2013 may have issues with transparent PNG images, often rendering them with a solid background color instead of transparency.

Best practice 6: test the email before sending

Use the “Sending test email” feature available in the preview screen to understand how your email looks before sending. It supports 3 email addresses per attempt and gives a chance to check emails in different versions of Outlook (as well as other email clients). There is no attempt limitation.