responsive email designer (red) - net atlantic · 2017-10-06 · responsive email designer (red)...

Net Atlantic, Inc. www.netatlantic.com

Phone: 877.263.8285 | Email: [email protected]

Responsive Email Designer (RED) QuickStart Guide

Net Atlantic’s Responsive Email Designer makes it easy to create responsive HTML emails that display

perfectly, no matter which device they’re viewed on.

The tool’s feature set includes preview options for desktop, tablet and phone-sized screens, so you can easily

see how your template will scale on different screen sizes. As with the existing HTML Source Editor, you must

create your content before you can create a mailing. Once your content has been created, the editor will

appear each time that particular content is opened for re-editing.

Note: Content created with the stock ListManager editor is ineligible for use with RED. Therefore, previously

created templates, or templates created elsewhere, must be recreated from scratch within the RED editor.

Getting started with RED is easy:

Click the Content button > Click the New Content option > Complete the Essentials tab

Once the fields in the Essentials tab have been completed, click the HTML Message tab; then click the Responsive Editor button.

Note: Once you have chosen an editor type for your new template, you will not be able to go back and switch

to the other.



Clicking the Responsive Editor option opens the palette where you’ll create your responsive template.



When the editor is first opened, you will see three main areas:

Drag Elements: These include columns, text boxes, images and other elements that can be dragged onto the design palette. Above the Drag Elements are options for previewing your template for desktop, tablet and mobile screens directly within the editor.

Design Palette: This is where you will place all drag elements for your custom responsive template. You can drag in as many elements for your basic design as you wish. You can even rearrange them into an alternate order by clicking on the button and dragging the element left, right, up or down to another area. To delete or duplicate an element, simply select it with your mouse and click the

or key.

Defaults and Content Palette Tabs:

o The Defaults Palette allows the designer to set standard template elements like background colors or images, headers and footers, typography elements like text-lime height, header heights, link colors and others.

o The Content Palette allows you to customize whichever drag element is currently selected.

For instance, choosing an Image element would show customization options for alignment,

position and padding, borders, and background color. Selecting the Columns element allows

you to adjust column widths, and gives you options for mobile display and other mobile

settings such as hiding and reordering columns. Try selecting all the elements to see which

customizations will suit your needs.

Complex Elements – Box and Multicolumn elements can be saved as a Favorite Element for re-use.

o 1. First select the Box or Multicolumn Element. 2. Then enter a name for the Complex Element

and click Save. 3. Then when creating new you can drag the saved element into your new

template.



Using Images with RED

Great news! With RED, you’ll be using the same Image Library you’ve had all along in Lyris.

That said, the process of accessing and adding your images into your RED templates is slightly different. Here’s how to do it:

First, drag in a Box Element

Then drag an Image Element into the Box Element

Next, click on the Image Element to select it

In the Image Content Settings, click Jump to Gallery

Within the Image Gallery, there are three ways to add an image to your template:

Select any image that has already been uploaded to your Image Library

Create a New Folder and Upload a New Image

Include a Remote Image by supplying an Image URL (see screenshot on next page)



Once you have decided which image you want to use, and/or have added it to your Image Library, click on the

image to add it to your previously selected Image Element.



In the screenshot below, you’ll see that the selected image has been added to the template. You can now

adjust all the settings for the selected image from within the menu on the right.



Previewing and Saving Your Work

While designing your responsive template, you can preview how it looks at any point throughout the process. You can see previews of how it will look on any of the following devices:

Desktop

Tablet

Mobile (shown below)



You can also change your content settings to show or hide specific parts of your template, depending on which device(s) it will be viewed on. This allows you to control what the user will see when your email is opened on a Desktop, Tablet, or Mobile Device. To do this, select the Box or Column element you want to change, and use Mobile Settings in the right menu to adjust your settings.



Once you’re finished making your edits, you can then click Save and Close.

Once you’ve saved and closed your template, you’ll see the screen below. You can save and close often as you wish as you create your email.

We hope this guide has been helpful in getting you started with RED! If you need additional help, don’t hesitate to give our support team a call at 978-219-1930, or send an email to [email protected].

mailto:[email protected]

responsive email designer (red) - net atlantic · 2017-10-06 · responsive email designer (red)...

Documents