Documentation Journey Optimizer Journey Optimizer Guide

Get started with email design get-started-content-design

Last update: Mon Dec 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Email Design

CREATED FOR:

Beginner
Intermediate
User

You can import an existing content in Journey Optimizer or leverage content design capabilities:

Use Journey Optimizer email designing capabilities to design or import responsive emails. Learn more
Leverage Adobe Experience Manager Assets Essentials to enrich your emails, build and manage your own assets database. Learn more
Find Adobe Stock photos to build your content and improve your email design. Learn more
Enhance customers’ experience by creating personalized and dynamic messages based on their profile attributes. Learn more about personalization and dynamic content.

➡️ Discover this feature in video

Email design best practices best-practices

When sending emails, it’s important to consider that recipients may forward them, which can sometimes cause issues with the email’s rendering. This is particularly true when using CSS classes that may not be supported by the email provider used for forwarding, for example, if you’re using the “is-desktop-hidden” CSS class to hide an image on mobile devices.

To minimize these rendering issues, we recommend keeping your email design structure as simple as possible. Try to use a single design that works well for both desktop and mobile devices, and avoid using complex CSS classes or other design elements that may not be fully supported by all email clients. By following these best practices, you can help ensure that your emails are consistently rendered correctly, regardless of how they are viewed or forwarded by recipients.

Refer to the table below for best practices for email design:

Recommended

Use with Care

Not recommended

Static, table-based layouts for structure
HTML tables and nested tables for layout consistency
Template widths between 600px and 800px
Simple, inline CSS for styling
Web-safe fonts for universal compatibility

Background images may not appear on certain email platforms.
Custom web fonts lack universal support.
Wide layouts can display poorly on smaller screens.
Image maps offer limited functionality.
Embedded CSS is sometimes removed during email delivery.

JavaScript is generally unsupported in email environments.
<iframe> tags are blocked on most platforms.
Flash is outdated and no longer supported.
Embedded audio often fails to play.
Embedded video is incompatible with many email platforms.
Forms do not work within emails.
<div> layering can lead to rendering issues.

Key steps to create email content key-steps

Once you have added an email to a journey or a campaign, you can start creating your email content.

From the journey or campaign configuration screen, go through the Edit content screen to access the Email Designer. Learn more

On the Email Designer home page, choose how you want to design your email from the following options:

Design your email from scratch through the email designer’s interface and leverage images from Adobe Experience Manager Assets. Learn how to design your email content in this section.

Code or paste raw HTML directly in the email designer. Learn how to code your own content in this section.

note note
NOTE
In a campaign, you can also select the Code Editor button from the Edit content screen. Learn more

Import existing HTML content from a file or a .zip folder. Learn how to import an email content in this section.
Select an existing content from a list of built-in or custom templates. Learn how to work with email templates this section.

Once your email content has been defined and personalized, you can export your content for validation or for later use. Click Export HTML to save on your computer a zip file which will include your HTML and assets.