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.

Maestro offers several 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:

Content Box Widget
Image/Video Box Widget
Combined Image/Video & Content Box Widget
Two Column Layout Widget
Button/Link Widget
Conditional Box Widget

All fluid design widgets have also a custom tag representation in code mode.

Also, when used in the content of a mail job, all fluid design widgets allow you to specify a condition that governs if the widget shall be displayed or not. If this condition is based on one or more merge fields, the result (visible or not) can vary for different recipients, giving you an easy to use option to implement dynamic conditional content.

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 percent width with an additional optional maximum width in pixels: The content box will have the configured percent width (relative to the width of the containing parent), but no more than the specified maximum pixel width (if any).
For example, a box with "50% or 300px" will resize itself so that, if possible, it takes up 50% of the parent width, but never more than 300 pixels. A box with only "50%" will always resize itself to 50% of the parent width.

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 maximum 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:

Without Surrounding Widget Box: The content box itself is not surrounded by an additional widget box. The widget therefore only takes up as much space as the width definition of the content box requires (as explained above). If this leaves unused space to the left or right of the widget, then the other content that is outside of the widget can flow "around" the widget's content box to take up this space.

The widget can be defined to be either left or right aligned (in its parent), so the surrounding content then flows around the content box on the other side.
With Surrounding Widget Box: The content box is nested into a surrounding widget box, which always takes up the full width of the parent element. However, the content box of the widget still takes up only as much space as the width definition of the content box requires (as explained above). If this leaves unused space to the left and/or right of the widget, then this unused space is inside of the surrounding widget box and therefore remains unused, as it cannot be used by the other content that is outside of the widget. Or in other words, the surrounding content cannot flow "around" the widget's content box.

The widget can be defined to be either left aligned, centered or right aligned in the surrounding widget box, so the unused space (if any) appears either on the right or the left or both.

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

In code mode, the content box widget is represented by the <widget-contentBox> custom tag. See here for details.

When used in the editor of a standard template, this widget can also be defined to be cloneable and/or deletable.

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, if the optional maximum pixel width is supplied, then the content box is always displayed with the specified pixel width and 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 two parameters that are configured on the "Fluid Design" tab of the widget's properties dialog. These two parameters define the width of the image, by setting a combined percent and maximum pixel width: The image will either have the configured percent width (relative to the width of the containing parent) or the configured maximum pixel width, whichever is smaller.
For example, an image with "33% or 200px" will resize itself so that, if possible, it takes up 33% of the parent width, but never more than 200 pixels.

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 allowed maximum pixel 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:

Without Surrounding Widget Box: The image/video box itself is not surrounded by an additional widget box. The image therefore only takes up as much space as the width definition requires (as explained above). If this leaves unused space to the left or right of the image, then the other content that is outside of the image can flow "around" the image to take up this space.

The image can be defined to be either left or right aligned (in its parent), so the surrounding content then flows around the image on the other side.
With Surrounding Widget Box: The image/video box is nested into a surrounding widget box, which always takes up the full width of the parent element. However, the image itself still takes up only as much space as the width definition requires (as explained above). If this leaves unused space to the left and/or right of the image, then this unused space is inside of the surrounding widget box and therefore remains unused, as it cannot be used by the other content that is outside of the widget. Or in other words, the surrounding content cannot flow "around" the widget's image.

The image can be defined to be either left aligned, centered or right aligned in the surrounding widget box, so the unused space (if any) appears either on the right or the left or both.

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

In code mode, the image/video box widget is represented by the <widget-imageBox> custom tag. See here for details.

When used in the editor of a standard template, this widget can also be defined to be replaceable.

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 specified maximum pixel width. This width is not dynamically adjusted, no matter the Outlook window size.
Unless you also also specify the advanced setting "Width in Outlook". If this alternative width is specified, then in Outlook the image is displayed with this width instead (also fixed, without any dynamical adjustment). This allows you to specify an alternative fixed width for Outlook, while specifying a different maximum width for other clients, for dynamic sizing purposes.

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).

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 two parameters that are configured on the "Fluid Design" tab of the widget's properties dialog. These two parameters define the width of the image part, by setting a combined percent and maximum pixel width: The image will either have the configured percent width (relative to the width of the containing parent) or the configured maximum pixel width, whichever is smaller.
For example, an image with "33% or 200px" will resize itself so that, if possible, it takes up 33% of the parent width, but never more than 200 pixels.
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 allowed maximum pixel width. The content part of the widget will arrange itself in the remaining widget space around the image part.

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

Content Flows Around Image: The content that is defined in the content part of the widget flows around the image part, if possible. The image is either placed in the top-left or top-right corner of the surrounding widget box. The other widget content uses the available space beside the image (if any) and also the space below the image, as necessary, including the space directly below the image, thus "flowing" around the image.

The image can be defined to be either left or right aligned, so the surrounding content then flows around the image on the other side.
Content Does Not Flow Around Image: The content that is defined in the content part of the widget does not flow around the image part. The image is either placed in the top-left or top-right corner of the surrounding widget box. The other widget content uses the available space beside the image and, if necessary, stretches down to use even more space than the image height allows, but never the space directly below the image, thus the content does not flow around the image.

The image can be defined to be either left or right aligned, so the surrounding content is then arranged beside the image on the other side.

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

In code mode, the combined image/video & content box widget is represented by the <widget-imageContentBox> custom tag. See here for details.

When used in the editor of a standard template, this widget can also be defined to be cloneable, deletable and/or replaceable.

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 specified maximum pixel width. This width is not dynamically adjusted, no matter the Outlook window size.
Unless you also also specify the advanced setting "Width in Outlook". If this alternative width is specified, then in Outlook the image is displayed with this width instead (also fixed, without any dynamical adjustment). This allows you to specify an alternative fixed width for Outlook, while specifying a different maximum width for other clients, for dynamic sizing purposes.

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. The widget's layout is automatically switched between two columns side-by-side or two boxes in a top-to-bottom arrangement.

The smart side-by-side layout is automatically used in all compliant email clients, if the available window width is at least 640 pixels. Thus, in a large enough window (like on a computer monitor or on a smart phone in landscape orientation), if the email client supports it, the widget will automatically use the side-by-side layout.
The top-to-bottom layout is used in all email clients if the available window width is less than 640 pixels. Thus, in a small (narrow) window, like for example a smartphone in portrait orientation, but also on a large display but with a narrow email client window, the widget will automatically use the top-to-bottom default layout.
The top-to-bottom default layout is also always used in all non-compliant email clients, even if the available window width is 640 pixels or more.

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 allows you to define the top-to-bottom order of the two content boxes if it is not possible to show the side-by-side layout. The left column is either transformed into the top box or the bottom box (and the right column into the respective other box).

And you can define the column sizing for the side-by-side column layout case: The two columns can be sized with either one of the predefined distribution ratios (1:2, 1:1 or 2:1) or with a custom distribution ratio*.

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

In code mode, the two column layout widget is represented by the <widget-twoColumnLayout> custom tag. See here for details.

When used in the editor of a standard template, this widget can also be defined to be cloneable and/or deletable.

Deviating behavior in Outlook: Because of the limited HTML support in Outlook, Outlook is a non-compliant email client. Therefore, by default in Outlook the widget will always use the top-to-bottom layout and not dynamically switch to the side-by-side layout, no matter the Outlook window size. Just like with any other non-compliant email-client.
Unless you select "Left Column = Top Box" and also enable the advanced option "Force Outlook to always show the side-by-side layout". In this case, the widget always uses the side-by-side layout (even in a small window). If you make use of this option, and then embed any image widgets into this two column widget, then you should probably also make use of the similar advanced option "Width in Outlook" that can be defined for the image widgets, to avoid that the image appears too large in Outlook.

*) Note: If possible, Maestro reduces the custom distribution ratio you enter, similar to mathematically reducing a fraction. For example 4:2 is reduced to 2:1. Additionally, Maestro may reduce the ratio in a not strictly mathematical fashion, if the reduced ratio actually results in the same percentage sizes for the left and right column. For example 7:43 is reduced to 1:6 even though that is not a proper mathematical reduction, because both 7:43 and 1:6 result, after rounding, in the same percentage sizes (14% and 86%).
Also, if you enter a ratio that would result in one of the columns getting a width of less than 10%, then the ratio set to the nearest 1:9 or 9:1 ratio, so that the smaller of the two columns always has a width of at least 10%.

Button/Link Widget

Note: The button/link widget is not available when editing the subscriber page customization.

This widget renders a button or a link (depending on the styling choices) that is clickable by the recipient and that opens the given action URL in a separate window when clicked.

The button (or link) is always rendered on a separate line, for optimal visibility, and can be defined to be left aligned, centered, or right aligned in this line.

This widget is meant for create major action buttons/links that are supposed to guide the reader to a certain target. For normal links, use the editor's link option in the toolbar instead.

The widget properties dialog allows you to define this button/link alignment, as well as the action URL for the button/link and the its visual style (colors, paddings, font style and size, etc.). It is this styling that determines if the widget looks like a button or like a link.

The button/link text is meant to be a rather simple text without complex formatting or HTML structures. Inside of the button/link text, in addition to normal text you can only use linebreaks (to create multi-line button texts) and the following simple formatting styles: bold, italic, underline, strikethrough, superscript and subscript. All other formatting and styling options are disabled in the WYSIWYG editor while the edit focus is inside of a button/link text. You can also not nest any other widgets into the text. And when using the widget in a template, you also cannot nest an editable block into the text (the text can however be made editable to the end user of the template by other means, see the information about "deletable and/or editable" below). Any HTML that is not allowed inside of a button/link text is automatically stripped out or converted by the editor.

In code mode, the button/link widget is represented by the <widget-button> custom tag. See here for details.

When used in the editor of a standard template, this widget can also be defined to be deletable and/or editable.

Conditional Box Widget

The purpose of this widget is to decide whether to display its content or not.

Optional Box: An optional box contains exactly one content block that is displayed if the condition is true.
True/False Switch Box: A true/false switch box contains two content blocks, the first of which is displayed if the condition is true, and the second if the condition is false.

Any of the content blocks can contain any kind of nested content (including for example images, tables or other fluid design widgets).

The widget properties dialog allows to define the widget name and the condition.

Note: The condition is mandatory for this widget.

In code mode, the switch box widget is represented by the <widget-switchBox> custom tag. See here for details.

When used in the editor of a standard template, this widget can also be defined to be deletable and/or editable.

Cloneable, Deletable and Editable Widgets in a Template

When used in the editor of a standard template, most fluid design widgets can also be defined as cloneable and/or deletable.

The image/video widgets can also be defined as replaceable, meaning that the end user can replace the image (or video) with one of his own. And when the end user replaces the image, he can also define a new advisory title (tooltip) and/or alternative text for the image, to match the new image.

The button/link widget can be defined as action URL editable, meaning that the end user can edit the action URL of the widget. Button/link widgets that have such an editable action URL can additionally be defined as text editable, meaning that the end user is allowed to edit the button/link's text too (as a simple text input).

These additional options are only available if the widget is used in the standard template editor, and if it is used outside of a "Template Block" widget. In addition, the cloneable and deletable options are only available if the content box part of the widget (if the widget has any) has a template block widget nested into it (except for the button/link widget, where this is not necessary and which does not allow any nested widgets anyway).

See here for a description of how these options to clone, delete and/or edit a widget in a template can be used to create dynamically adjustable templates.