LISTSERV Maestro 8.1-4 Help

Forward >> << Back Table Of Contents

Content Editor

To access the content editor for the HTML content of a given job: On the job's define message page, select the HTML tab and click the Edit the HTML content link on that tab.

The content editor allows you to edit the message content of your mail job.

The editor consists of the main panel that displays the actual editor and an additional options panel on the right. The options panel also contains the [OK] and [Cancel] buttons for the editor in the bottom right corner. Click [OK] to submit the changes in the editor or [Cancel] to leave the editor without submitting any changes.

In the options panel, above the buttons, you have several sections. Each section can be opened and closed separately, so that you only need to see the content of those sections that are currently of interest to you. Simply click on a section header to open/close this section.

The content editor for a HTML message is a What-You-See-Is-What-You-Get (WYSIWYG) editor that has two modes: In Design Mode you edit the HTML message in WYSIWYG fashion. In Code Mode you can edit the underlying HTML code directly. You can switch between the two modes at any time with the icons at the top left of the editor toolbar.

Use the other icons in the editor toolbar for access to various other editor function, for example to define formats and colors, to create links, add images, etc.

Note that the HTML editor in LISTSERV Maestro supports only a subset of all possible HTML tags and styles, which includes the most commonly used HTML features, especially for emails. If you require full support of all HTML features, you must switch the editor into code mode and then enable the code protection feature, i.e. you have to forgo the WYSIWYG design mode. See below for details about the HTML support in LISTSERV Maestro's editor.

For a standard HTML message that is not based on a template, the options panel on the right contains the following sections:

Widget Hierarchy

This option panel section shows you all the fluid design widgets that are currently contained in the HTML content, and also the hierarchy in which the widgets are nested into each other.

Each widget is represented with a main entry (shown with a bold text) that can be selected with a click. If you select a main entry in the widget hierarchy, then the corresponding widget will be highlighted with a widget border in the main WYSIWYG editor panel. Double click the main entry of a widget to open the widget's properties dialog or, for an already selected main entry, click the properties icon near the right edge of the entry to open the properties dialog.

You can delete a widget by selecting its main widget entry in the hierarchy panel and pressing the DELETE or BACKSPACE key on the keyboard.

Nested below the widget's main entry, each widget also has one or two sub-entries that represent the editable content part (or parts) of the widget (shown with normal, non-bold text). These sub-entries cannot be selected directly in the widget hierarchy, but if you place the cursor inside of a widget content in the main WYSIWYG editor panel, then this content part is highlighted with a dotted border in the editor panel and the corresponding content entry in the widget hierarchy panel is also highlighted, as a feedback about which widget content you are currently editing.

See below for more details about fluid design widgets and their properties.

Fluid Design Widgets

This option panel section shows the available fluid design widgets that you can use in the HTML content.

Fluid design (often also called "responsive design") is a design principle under which the HTML content is created in such a fashion that it looks nice and readable on a variety of email clients, both with large and small screens, on computers or handheld devices.

To add a fluid design widget to your HTML content, simply place the cursor at the target location, then click on the desired widget in the fluid design widgets option panel section. Or simply drag & drop a widget from the options panel section into the HTML content.

You have the choice between several different widget types. These widgets can also be nested into each other. See below for more details about the available widget types and how to use the fluid design widgets.

All widgets that you add to the HTML content will also be represented in the "widget hierarchy" section of the option panel (see above for details).

Merge Fields

This option panel section shows all available merge fields. Click on a merge field name to insert it into the editor at the current cursor position.

User-Defined Drop-Ins

This options panel section is available if drop-in content is currently enabled. It lists all user-defined drop-ins that you have currently defined. Click on a drop-in name to insert it into the editor at the current cursor position. See also here.

System Drop-Ins

This options panel section is available if drop-in content is currently enabled. It lists all available system drop-ins. Click on a drop-in name to insert it into the editor at the current cursor position. Hover the mouse pointer over a drop-in name to see a short description of what this drop-in will do. See also here.


Images in a HTML Message

When using the content editor to add images or videos to the HTML content, you have the following options:

All these various methods of adding an image to a message are available via the image dialog of the content editor. See here for a more in-depth explanation of the differences between linked and inline images, which also explains the main advantages and disadvantages of each type.

Unsure what image option is best? See here for help with choosing the right option.


Fluid Design Widget Types

Fluid design (often also called "responsive design") is a design principle under which the HTML content is created in such a fashion that it looks nice and readable on a variety of email clients, both with large and small screens, on computers and handheld devices.

To achieve this, fluid design uses special HTML features to create content and images in such a way that they automatically adjust their size, and sometimes even their layout, to "fluidly" correspond to the available display size. This often requires advanced HTML knowledge and also many trial and error tests with many different email clients and devices.

LISTSERV Maestro's fluid design widgets make fluid design much easier for you. You don't need to learn the latest HTML coding tricks and email client quirks because all of this knowledge is already built into the widgets themselves. You only need to select the right widget for the desired effect, and the advanced HTML code that is generated by the widget will automatically take care of the rest.

LISTSERV Maestro offers four main types of fluid design widgets that each have several variants. These widgets can be combined and nested to achieve various different fluid layout effects. For example you can start off with a 700 pixel width content box widget, to define your main message box, then nest a two-column layout widget inside of this main content box to generate a responsive two-column layout, then nest image/video box widgets into these two columns for illustrative images.

The following fluid design widgets are available:

See the fluid design widgets in action in the Fluid Design Widget Sample Video.

Content Box Widget

This widget is a general purpose content box widget that can contain any kind of nested content (including for example images, tables or other fluid design widgets).

The fluid layout behavior of a content box widget is defined by two parameters that are configured on the "Fluid Design" tab of the widget's properties dialog. These two parameters define the width of the content box, by setting a combined pixel and percent width: The content box will either have the configured pixel width or the configured percent width (relative to the width of the containing parent), whichever is smaller.
For example, a box with "300px or 50%" will resize itself so that, if possible, it is 300 pixels wide (and never larger), but it also never takes up more than 50% of the parent width. Therefore, if necessary, it automatically shrinks to a size smaller than 300 pixels, if the parent itself is less than 600 pixels wide.

Summary: The content box widget will automatically shrink if the parent width requires it and grow if the width allows it, but will never grow to more than the allowed pixel width.

The widget properties dialog allows you to define text and background colors, paddings and border styles for the widget.

There are two main variants of the content box widget:

A content box widget can always be switched between these variants via the "Layout" tab in its properties dialog.

Deviating behavior in Outlook: Because of the limited HTML support in Outlook, the behavior of the content box widget is different if viewed in Outlook. In Outlook, the content box width is fixed. It is always displayed with the specified pixel width. This width is not dynamically adjusted, no matter the Outlook window size.

Image/Video Box Widget

This widget is used to add an image or YouTube video to the HTML content that fluidly resizes itself according to the surrounding content and available space.

If the widget is used to add a video, then what is actually added to the content is a thumbnail image of the selected video, not the video itself. This thumbnail image in the content then acts as a clickable link to the video on YouTube. So in the case of a video, whenever the following explanation refers to the widget image, it means this thumbnail image.

The fluid layout behavior of an image/video box widget is defined by a parameter that is configured on the "Fluid Design" tab of the widget's properties dialog. This parameter defines the width of the image, by setting a percent width that is combined with the image's original pixel width: The image will either have its original pixel width or the configured percent width (relative to the width of the containing parent), whichever is smaller.
For example, an image with a width of 200 pixels and a setting of "33%" will resize itself so that, if possible, it is the full 200 pixels wide (and never larger), but it also never takes up more than 33% of the parent width. Therefore, if necessary, it automatically shrinks to a size smaller than 200 pixels, if the parent itself is less than 600 pixels wide.

Summary: The image/video box widget will automatically shrink if the parent width requires it and grow if the width allows it, but will never grow to more than the original image width.

The widget properties dialog allows you to define background colors, paddings and border styles for the widget. Via the properties, you can also add a link target URL to the image, so that the image becomes a clickable link, and enable an image caption that appears below the image.

There are two main variants of the image/video box widget:

An image/video box widget can always be switched between these variants via the "Layout" tab in its properties dialog.

Deviating behavior in Outlook: Because of the limited HTML support in Outlook, the behavior of the image/video box widget is different if viewed in Outlook. In Outlook, the image width is fixed. It is always displayed with the original image's pixel width. This width is not dynamically adjusted, no matter the Outlook window size.

Combined Image/Video & Content Box Widget

This widget combines the main properties of the content box and image/video box widgets that were explained above. The widget has an image component similar to the image/video box widget, and it also has a content box component similar to the content box widget that can contain any kind of nested content (including other widgets).

If the widget is used to add a video, then what is actually added to the content is a thumbnail image of the selected video, not the video itself. This thumbnail image in the content then acts as a clickable link to the video on YouTube. So in the case of a video, whenever the following explanation refers to the widget image, it means this thumbnail image.

The widget itself consists of a main widget box that always takes up the full width of the surrounding parent element. Inside of this widget box, the fluid layout behavior of such a combo widget is defined by a parameter that is configured on the "Fluid Design" tab of the widget's properties dialog. This parameter defines the width of the image part, by setting a percent width that is combined with the image's original pixel width: The image will either have its original pixel width or the configured percent width (relative to the width of the containing parent), whichever is smaller.
For example, an image with a width of 200 pixels and a setting of "33%" will resize itself so that, if possible, it is the full 200 pixels wide (and never larger), but it also never takes up more than 33% of the parent width. Therefore, if necessary, it automatically shrinks to a size smaller than 200 pixels, if the parent itself is less than 600 pixels wide.
The content part in turn will take up the rest of the main widget box's space that is not used by the image.

Summary: The main widget box will automatically size itself to use the full available parent width. The image part of the widget will automatically shrink if the parent width requires it and grow if the width allows it, but will never grow to more than the original image width. The content part of the widget will arrange itself in the remaining widget space around the image part.

The widget properties dialog allows you to define background colors, paddings and border styles for the widget. Via the properties, you can also add a link target URL to the image, so that the image becomes a clickable link, and enable an image caption that appears below the image part of the widget.

There are two main variants of the combined image & content box widget:

A combined image & content box widget can always be switched between these variants via the "Layout" tab in its properties dialog.

Deviating behavior in Outlook: Because of the limited HTML support in Outlook, the behavior of the combined image & content box widget is different if viewed in Outlook. In Outlook, the width of the image part is fixed. It is always displayed with the original image's pixel width. This width is not dynamically adjusted, no matter the Outlook window size.

Two Column Layout Widget

This widget has two content boxes that automatically resize and rearrange themselves, either in a side-by-side or top-to-bottom layout, according to the surrounding content and available width. The content boxes can contain any kind of nested content (including for example images, tables or other fluid design widgets).

The widget itself consists of a main widget box that always takes up the full width of the surrounding parent element. Inside of this widget box, the two content boxes are arranged according to the choices on the "Fluid Design" and "Layout" tabs of the widget's properties dialog. By default, the two content boxes are shown in a top-to-bottom layout, with the first content box at the top and the second box after/below the first box at the bottom. But this default layout is only used if necessary. If possible, the two content boxes will automatically rearrange themselves to a side-by-side layout with two columns.

In this sense, a compliant email client is an email client that supports the HTML standards that are necessary for the automatic transformation into the side-by-side layout. A non-compliant email client is a client with limited HTML standard support that therefore does not support this automatic transformation.

Summary: The main widget box will automatically size itself to use the full available parent width. The two content boxes will then automatically arrange themselves inside of the widget box, either in a side-by-side layout, if the email client supports it and the available window width is 640 pixels or more, or otherwise in a top-to-bottom layout.

The widget properties dialog allows you to define background colors, paddings and border styles for the widget.

It also gives you the choice over how the two content boxes shall arrange themselves if the side-by-side layout is chosen. Either the top box (in top-to-bottom layout) can become the left column, if the layout transforms to side-by side, or the bottom box can become the left column. In both cases, the other box becomes the right column.

And you can define the column sizing for the side-by-side column layout case: The two columns can be sized with a one-third/two-thirds, fifty/fifty, or two-thirds/one-third width distribution.

A two column layout widget can always be switched between these variants via the "Fluid Design" and "Layout" tabs in its properties dialog.

Deviating behavior in Outlook: Because of the limited HTML support in Outlook, Outlook is a non-compliant email client. Therefore, in Outlook the widget will always use the default top-to-bottom layout and never the smart side-by-side layout, no matter the Outlook window size.

Fluid Design Widget Sample Video

The following video shows how a fluid and responsive HTML newsletter is created from scratch, using LISTSERV Maestro's fluid design widgets:

 


HTML Support in the LISTSERV Maestro Editor

The HTML editor in LISTSERV Maestro supports only a certain subset of all possible HTML tags, attributes and styles. This subset includes the most commonly used HTML features, especially those that are used in HTML emails.

If you use the editor in Design Mode, then the HTML code that is created will automatically contain only HTML features that are supported by the editor. If the design mode is the only mode you ever use, then this is all you need to know about the editor's HTML support.

But if you are an experienced user with HTML coding knowledge and you sometimes switch the editor into Code Mode to fine tune the HTML or to enter your own code, then the following information may be helpful.

In code mode, the system can of course not stop you from trying to enter HTML code that is not supported by the editor, either by typing it directly into the editor window or via copy & paste from an external source. However, all HTML code that you enter in code mode is checked by the editor at the moment when you submit it, either when you switch back to design mode or when you exit the editor with the [OK] button. If the editor finds unsupported HTML code, then this code will either be stripped or converted into supported code, as described below.

You can disable this HTML code check and thus stop the editor from stripping or converting your HTML code, but only if you are willing to forgo the advantages of the editor's design mode. To do this, first switch into code mode and then enable the code protection feature (via the lock icon in the toolbar). Or alternatively, enable the HTML code protection feature on the "Options" tab of the "Define Message" page before you enter the editor. With code protection enabled, the editor will now accept all HTML code and will no longer strip or convert or otherwise reformat the HTML code that you enter. However, you will also no longer be able to use the WYSIWYG editor because you will not be able to switch back into design mode unless you first disable the code protection.

Further below you can find a table that describes all HTML tags, attributes and styles that are supported by the HTML editor in standard mode, i.e. while code protection is not enabled. All other HTML code is either converted into supported code (if listed below) or is stripped altogether.

Also, when editing the underlying HTML code directly, please keep the following in mind:

Supported Paragraph/Block Tags
p
Attributes:
dir
Styles:
text-align
h1 - h6
Attributes:
dir
Styles:
text-align
blockquote
No Attributes/Styles
pre
Attributes:
dir
Styles:
text-align
div
Attributes:
class, id, lang, style, title
Styles:
any
Supported Style Tags
b
No Attributes/Styles
i
No Attributes/Styles
u
No Attributes/Styles
s
No Attributes/Styles
sup
No Attributes/Styles
sub
No Attributes/Styles
span
Styles:
background-color, color, font-family, font-size
Supported Miscellaneous Tags
a
Attributes:
accesskey, charset, class, dir, href, id, lang, name, rel, style, tabindex, title, type
Styles:
any
br
No Attributes/Styles
hr
No Attributes/Styles
img
Attributes:
align, alt, class, dir, height, hspace, id, lang, src, style, title, vspace, width
Styles:
any
Supported List Tags
ol
Attributes:
start
Styles:
list-style-type
ul
Styles:
list-style-type
li
No Attributes/Styles
Supported Table Tags
table
Attributes:
align, border, cellpadding, cellspacing, class, dir, id, style, summary
Styles:
any
caption
No Attributes/Styles
thead
No Attributes/Styles
tbody
No Attributes/Styles
tr
No Attributes/Styles
th
Attributes:
background, colspan, rowspan, scope
Styles:
background-color, background-repeat, border-color, height, padding, text-align, vertical-align, white-space, width
td
Attributes:
background, colspan, rowspan
Styles:
background-color, background-repeat, border-color, height, padding, text-align, vertical-align, white-space, width
Supported Page Structure Tags
DOCTYPE
No Attributes/Styles
html
Attributes:
lang, xml:lang
head
No Attributes/Styles
meta
Attributes:
content, name
title
No Attributes/Styles
style
Attributes:
type
body
Attributes:
dir
Styles:
background-attachment, background-color, background-image, color, margin
Supported Form Tags
form
Attributes:
action, enctype, id, method, name, target
input type="checkbox"
input type="radio"
Attributes:
accesskey, checked, disabled, name, tabindex, type, value
input type="text"
input type="email"
input type="password"
input type="search"
input type="tel"
input type="url"
Attributes:
accesskey, disabled, maxlength, name, size, tabindex, type, value
input type="button"
input type="submit"
input type="reset"
Attributes:
accesskey, disabled, name, tabindex, type, value
input type="image"
Attributes:
accesskey, alt, class, dir, disabled, hspace, id, lang, name, src, tabindex, title, type, value, vspace
Styles:
any
input type="hidden"
Attributes:
name, type, value
textarea
Attributes:
accesskey, cols, disabled, name, rows, tabindex
select
Attributes:
accesskey, disabled, multiple, name, size, tabindex
option
Attributes:
selected, value
Supported Object Embed Tags
object
Attributes:
class, classid, codebase, height, hspace, id, style, vspace, width
Styles:
any
param
Attributes:
name, value
embed
Attributes:
allowfullscreen, bgcolor, class, height, hspace, pluginspage, quality, src, style, type, vspace, width
Styles:
any
© 2002-2017 L-Soft Sweden AB. All rights reserved.