Getting started with Dragon Email Designer

Responsive emails are mobile-friendly designs that display beautifully on both Desktop and Mobile devices.

To optimize for usage of screen space, a responsive email design with multiple column content will automatically stack to form into a single column when viewed using a narrower mobile mail client.

Responsive email layout comparison

Dragon focuses exclusively on responsive email layout design. Once your design is complete, you can export to responsive style HTML source code format, ready for use with your email app or newsletter distribution service.

Please note this app does not send emails, you will need to export and send your design through an email app or newsletter distribution service in order to send your email to your recipients.

Your email source code is compatible with any tool that accepts HTML, please see user guide on how to send a HTML email

Dragon generates responsive HTML emails, Apple Mail does not support sending responsive layouts at this time.

You may start with either the blank canvas or a template, whichever you are most comfortable with. :)
New users will find it's easier to experiment with a sample template to get a feel for how responsive layout changes between the Mobile and Desktop preview modes.

Inspector Panel > "Objects" tab
Drag new object from Inspector Panel into any section

When adding new objects, please make sure you are adding it to an available empty space "inside" a responsive section.
When a new object is dragged over, you will see the mouse cursor turn into the "+" symbol when the editor identiﬁes there is suﬃcient space for a new object.

How to remove objects from a template?
All email templates are completely customizable, there are a few different ways to remove unwanted elements off a template:

Select object, go to Edit Menu > Delete.
Select object, press the Delete key on the keyboard.
Similar to other quick edit actions, select object, right click (control-click) and choose "Delete"

There are a couple of different ways to add links

Links can be added directly to any photo, text or action button, simply right click (or control-click) on the object and choose "Hyperlink"
When working with a paragraph of text, links can be applied to an individual phrase or sentence using HTML markup syntax.

Please note Dragon does not connect to the internet, external links are not active in preview. To fully test links, please export design to HTML and launch the HTML file.

How to customize link colors and styles?
You can add CSS markup tags change the default link color and format:
For example, the following snippet creates a red colored link without underline:
<a href="link" style="color:red; text-decoration:none;">Link</a>

How to add custom HTML code?
Text boxes in Dragon RED accept both regular text as well as simple HTML markup syntax.

If you are adding a multi-line segment of custom HTML code, please set text box line break style to "Ignore Line Breaks":

Select text box
Open Inspector Panel and select "Format" tab
Update "Text Line Breaks" setting

To copy and paste objects, please select objects, right click (or control-click) and choose “Copy”.
Locate the section where you would like to paste the content, right click (or control click) inside section column, then choose “Paste”. You may copy and paste objects “in batch” by selecting multiple objects at a time.

Select photo and open Inspector Panel, choose "Format" tab and change the Alignment option to "Center".
Select photo and drag on the resize bars to adjust photo size, this will add spacing to the side of the photos.

In a responsive design, the photo will try to fill the entire width of the responsive section column. You can add tables to help with spacing when you wish the image to occupy only part of a column. Please adjust left and right side padding and margins to the table containing the images, this will help with relative image sizing when previewed in the Desktop mode.

Quickly compare layouts on different sized screens with Mobile and Desktop preview. When previewing for mobile, you should see responsive sections "auto fold" into single columns.

Desktop Preview: shows sample preview of email layout on a full width screen
Mobile Preview: shows sample preview of design on a narrow width screen (designed to mimic mobile screen)

To customize Desktop and Mobile Preview screen width, please to go Toolbar > Breakpoints

***Please note the preview modes are designed only to be used as a general reference, you should always test new designs in the actual email clients before launching your email campaign into Production.

To change the layout width, please see steps below:
- open your design
- go to Toolbar > Breakpoints
- enter the width you wish to use under “Max Width”
- check for updated width using “Preview”

Please note your editor layouts will remain the same, but designs will be generated with the new max width. You can test for the new design using both Preview and exported files.

Remote images can be added to any text box with the img tag. For example, the following code adds a remotely linked image of the Dragon Email Designer logo:

<img arc=“https://responsiveemaildesigner.aidaluu.com/DragonRED3.png” width=200 height=200>

Notes:
- The width and height parameters control the size of the image
- Use preview to test remote image display

If images load properly in preview but do not show when testing through email delivery, please check:

Your email client is set to load images in emails. You can usually change this through your email client settings.
Make sure your email distribution service is including image files used in the mail design when sending your email. Image files are exported together with the mail HTML file in a separate folder.

If your email distribution service do not support relative images, you can also link to the images remotely by uploading the exported images to your website then modify the image links in the exported HTML.

How to update relative image links to remote links:

Open the exported email HTML file in any text editor
Find and replace image file names with the online path to your uploaded images. Save your HTML file after making this change.
Double click the HTML file to launch in your browser, if all the images are showing properly, this means the image path replacement was successful.