Distorted email rendering with ACS emails - All are using outlook in the same company. | Community
Skip to main content
A
AndrewJo5
Level 2
August 16, 2024
Solved

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

  • August 16, 2024
  • 1 reply
  • 1498 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by ccg1706

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

1 reply

ccg1706
Community Advisor
ccg1706Community AdvisorAccepted solution
Community Advisor
August 19, 2024

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

    A
    AndrewJo5Author
    Level 2
    August 19, 2024

    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
    Community Advisor
    ccg1706Community Advisor
    Community Advisor
    August 22, 2024

    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

      Terms & ConditionsAccessibility statement

      Loading footer...