Distorted email rendering with ACS emails - All are using outlook in the same company.

[AndrewJo5]

Using ACS, a number of our testers (clients) are receiving emails that render incorrectly and look distorted. They are all in the same company w/ Outlook. However, when I test it, use my personal outlook as well as gmail, it looks fine. How do I fix?

[ccg1706 · Accepted solution]

Hi @AndrewJo5,

Here are some steps that can help you to solve the issue.

Simplify the Email Design: Avoid using complex CSS, especially those not supported by Outlook, such as floats, background images, or certain padding/margin settings. Stick to basic HTML and inline styles.

Use Tables for Layout: Outlook handles table-based layouts better than div-based ones. Structure your email using tables, and ensure they're properly nested.

Test in Litmus or Email on Acid: Use tools like Litmus or Email on Acid to test your emails specifically in different versions of Outlook.

Conditional Comments: Use conditional comments to target specific versions of Outlook and apply fixes as needed.

Hope this helps!

Regards,

Celia

[AndrewJo5]

Thank you.

In ACS, what is the best way to create a table format for a newsletter with articles that are driven off of Conditional Visibility. Right now, it is a stacked structure, each structure is its own article.  Most of the articles are two columns. Is there an easy way to change this to a table format?

And for "Conditional Comments: Use conditional comments to target specific versions of Outlook and apply fixes as needed.", are talking about in the HTML/CSS? Or does have ACA have an easy setting?

Also, when you say simplified design? would multiple structures with two column (col 1 is an image and Column 2 is Copy with CTA buttons)....stacked as structures be considered simple?. This seems pretty simple but it is causing us issues.

Also, I am unable to get the rendering email report working for past sends. It is blank.

Thanks again, Andrew

[ccg1706]

Hi @AndrewJo5,

Sorry for my delay on the response. I’ll try to solve your current questions.

1. Creating a Table Format for Articles with

Solution:

Table Layout: Use an HTML table structure within your ACS email template to organize articles into rows and columns. Each row can represent a new article, and you can have two cells per row: one for the image and one for the text/CTA.

Conditional Visibility: Apply Conditional Visibility directly to the table rows. This way, if a condition is met, the entire row (i.e., the article) is displayed; if not, it’s hidden. This maintains the table structure while still allowing dynamic content.

2. Conditional Comments for Outlook:

Implementation:

In HTML/CSS: Conditional comments are written directly into your email’s HTML code. They allow you to apply specific fixes or styles that only Outlook will recognize.

ACS Settings: ACS does not have a built-in setting for Outlook conditional comments. You’ll need to manually add these comments in the HTML editor within ACS.

3. Simplified Design and Stacked Structures:

Best Practice:

Table-Based Layout: Consider using a table-based design instead of multiple stacked structures. This can help maintain consistency across different email clients. Tables provide more control over layout, especially when dealing with Outlook.

Use of Responsive Design: Ensure your tables are responsive by using percentage-based widths and media queries to adapt the layout on different devices.

Alternative Simplification: If tables complicate the design, maintaining a single structure with nested elements that adapt based on visibility conditions might also simplify the code.

4. Rendering Email Report Issues:

Blank Report: If the rendering email report for past sends is blank, this could be due to:

Data Retention Settings: Verify that the data retention policies in your ACS instance are not set to delete or archive report data after a certain period.

Permissions: Ensure that you have the necessary permissions to access the rendering reports.

Technical Issue: If the data should be available but isn’t displaying, this could be a technical issue within ACS. You may need to contact Adobe Support to investigate further.

Hope this helps!

Regards,

Celia

[AndrewJo5]

Thanks Celia,

Regarding "Table Layout: Use an HTML table structure within your ACS email template to organize articles into rows and columns. Each row can represent a new article, and you can have two cells per row: one for the image and one for the text/CTA.", I don't see a table structure or component in ACS to bring into the email template. How do you build the email as a table using ACS and not custom code from outside of ACS?

Thanks again,

Andrew

[ccg1706]

Hi @AndrewJo5,

There isn't really a "table" component available in the drag and drop editor.

What I normally do is create a table layout directly within the HTML editor. I share with you and example that creates a table with two columns.

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding: 10px; vertical-align: top;" width="50%">
<!-- Insert your image here -->
<img src="your-image-url.jpg" alt="Article Image" width="100%" style="max-width: 100%;">
</td>
<td style="padding: 10px; vertical-align: top;" width="50%">
<!-- Insert your text and CTA here -->
<h2>Article Title</h2>
<p>Short description of the article goes here...</p>
<a href="your-cta-link" style="display: inline-block; padding: 10px 15px; background-color: #007bff; color: #ffffff; text-decoration: none;">Read More</a>
</td>
</tr>
<!-- You can add more rows like this for additional articles -->
</table>

You will need also to customize the layout, modifying the inline styles to match design requirements and ensure the table is responsive by setting the image width and adjusting the padding and spacing as it needs to be.

Regards, 

Celia