- MDX: Manage > Ads > New > Design New HTML5 Ad
- Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ads
Ad Builder for HTML5 provides a complete solution for creating HTML5 responsive ads. During serving, in response to the placement size, the responsive ad automatically increases or decreases in size, while maintaining the aspect ratio.
In Ad Builder, you can define a banner or panel as an instance in the Instances Manager. You need to set the instance as responsive and then determine the responsive behavior, for example, whether the instance will increase to full height or width, and whether certain elements will remain fixed and unaffected by the responsive behavior.
In the Instances manager, when an instance is tagged as responsive, all its child elements inherit this functionality too. You can remove responsiveness from any element by selecting the Maintain Fixed Size check box on the element level.
Use Case Example: Build an HTML5 Expandable Responsive Ad
The following procedure describes how to configure an HTML5 Expandable responsive ad.
Important: Responsive banners are only supported in MDX2.0. When configuring a responsive banner, an additional step is required.
- In Ad Builder, build your ad.
- Access the Instances Manager.
- In the Instances Manager, click a banner or a panel.
If you are configuring a responsive banner, perform the following steps:
- Click located on the menu bar to access the Ad Settings window.
- Select the Adaptive Ad check box.
- In the Properties pane, click Responsive Panel.
The panel and all of its elements are marked as responsive.
- In the Positioning Type list, select Page Relative-Percentage or Page Relative-Pixels.
- (Optional) To set an element in the responsive instance as fixed, meaning non-responsive, click Maintain Fixed Size. A close button or a company logo is an example of elements that you might define as fixed.
- In the Actions and Animations pane, create a new event and add an action. In the Expandable list, select Expand as the expandable type.
- Select one of the following expansion options:
- Panel Dimensions: The panel is expanded to the exact dimension set by the user in the Panel properties.
- Fill Screen Width: When the panel expands, it responsively expands to the full width of the available display. It will maintain its aspect ratio, thereby determining the height of the panel. For example, a 970 x 250 panel is expanded full width on a 1366 x 768 display. The panel width will be 1366 pixels (full width x 1.408 wider than the original panel). The panel height will be 250 x 1.408 = 352 pixels.
- Fill Screen Height: When the panel expands, it responsively expands to the full height of the available display. It will maintain its aspect ratio, thereby determining the width of the panel. For example, a 300 x 600 panel is expanded full width on a 1366 x 768 display. The panel height will be 768 pixels (full height x 1.28 taller than the original panel). The panel height will be 300 x 1.28 = 384 pixels.