How to design the responsive email in the AJO design editor - step by step tutorial
How to Design a Responsive Email in Adobe Journey Optimizer (AJO)
In the last post, we learned how to set up the Email Channel in Adobe Journey Optimizer and made sure everything was technically ready to send emails. That was the foundation.
Now comes the exciting part — actually designing the email.
Once your channel is configured, the next big question is:
How do you create a professional, responsive email that looks great on both desktop and mobile?
That’s exactly what we’re going to explore in this post.
We’ll walk step by step through the drag-and-drop Email Designer inside Adobe Journey Optimizer — understanding how sections work, how to structure layouts, how to add images, text, buttons, and how to make sure your email automatically adjusts for different devices.
No complex coding. No confusion.
Just clear structure, smart design, and best practices that help you build emails confidently.
Imagine your marketing manager says:
No panic. If you understand how the Email Designer works inside Adobe Journey Optimizer (AJO), you can confidently build responsive emails without writing complex code.
Step 1: Create an Email Message
Emails in AJO can be created from:
- A Journey
- A Campaign
Open your journey, then drag and drop an Email activity from the Actions section of the palette.
Add an Email action and click Edit Content. This opens the Email Designer interface.
Step 2: Choose Your Email Creation Method
When the Email Designer opens, you’ll see multiple options:
- Design from scratch – Use the drag-and-drop editor.
- Code your own – Write raw HTML manually.
- Import HTML – Upload existing HTML or ZIP files.
- Sample templates – Start from built-in or custom templates.
- Saved templates – Start from the templates which is already created and saved.
- AI-assisted conversion – Convert visual designs into editable email HTML.
For beginners, Design from scratch is the best way to understand structure and responsiveness.
Step 3: Understand the Email Designer Interface
The interface consists of three main areas:
- Canvas – Where your email layout appears.
- Component Library – Text, image, button, divider, structure blocks.
- Properties Panel – Styling, spacing, alignment, background, etc.
You build your email by dragging structure components first, then adding content components inside them.
Select the column component for the number of columns of your choice (between 3 and 10). You can also define the width of each column by moving the arrows at the bottom of each column.
From the Contents section, add as many elements as you need. Each component can be customized using the Settings or Style tabs in the right menu likely to change the text style, padding or margin.
From the Asset picker, select assets stored in the Assets library. Double-click the folder which contains your assets. Drag and drop them into a structure component.
By following these structured steps, you can confidently design your email based on your draft and Adobe Journey Optimizer automatically adjusts the layout for different screen sizes, so your email looks great on both desktop and mobile.
Step 4: Follow Email Design Best Practices (Very Important)
Adobe recommends keeping your email structure simple for consistent rendering across email clients like Gmail, Outlook, and Apple Mail.
Recommended Guidelines:
- Keep email width between 600px–800px.
- Use table-based layout structure.
- Use inline CSS for styling.
- Stick to web-safe fonts.
- Optimize images for faster loading.
Avoid Using:
- JavaScript
- Forms
- iFrames
- Embedded videos
Email clients restrict many advanced web features, so simplicity ensures better compatibility.
Step 5: Instruction for the basic Email Structure Step-by-Step for the beginners to practice
1. Add Header Section
Insert a single-column structure. Add your logo and align it properly. Keep spacing clean using padding.
2. Add Hero Image
Insert a full-width image that represents your campaign theme. Set width to 100% so it scales automatically on mobile.
3. Add Heading and Description
Use text components for headline and body text. Maintain proper font size for readability:
- Headline: 24–32px
- Body: 14–16px
4. Add Multi-Column Content
If showcasing multiple features or products, use a 2-column structure. On desktop they appear side-by-side; on mobile they automatically stack.
5. Add Call-to-Action Button
Use a button component with enough padding. Make sure it is large enough for thumb-friendly mobile interaction.
6. Add Footer
Include contact details and unsubscribe link using system personalization fields.
Step 6: Add Personalization
Click Enable conditional content to customize your email so different users see different content depending on the conditions you define.
You can personalize email content using profile attributes such as:
- First Name
- Last Name
- Location
- Dynamic Offers
This improves engagement and creates a tailored experience for each recipient.
Step 7: Preview and Test
Once your content is ready, click the Simulate content button to check rendering.
Before sending:
- Switch between Desktop and Mobile preview.
- Check spacing and stacking behavior.
- Send test proofs to yourself.
- Use validation tools to detect rendering issues.
Traditional Email vs AJO Email Designer
| Traditional HTML Email | AJO Email Designer |
|---|---|
| Manual coding required | Drag-and-drop interface |
| Manual media queries | Auto-responsive layout |
| Complex debugging | Built-in preview & validation |
| Time-consuming | Faster design workflow |
Designing responsive emails in Adobe Journey Optimizer is not just about dragging blocks. It’s about understanding:
- Email structure
- Responsive behavior
- Compatibility best practices
- Personalization strategy
Once you master these fundamentals, you can confidently build promotional emails, product launches, transactional emails, and lifecycle campaigns — all inside AJO.
Start simple. Follow structure. Test properly. That’s the formula for responsive success.
Next in this learning series : How to Preview Emails in Adobe Journey Optimizer - step by step tutorial
All screenshot Source: Adobe Journey Optimizer Documentation
Comments
Post a Comment