- MDX: Manage > Ads > New > Design New HTML5 Ad
- Sizmek Advertising Suite: Creative > Ads > New Ad > Design HTML5 Ads
Ad Builder 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.
- In Ad Builder, build your ad.
- Click New on the taskbar and select New Panel.
- From the Create New Panel page, select a banner and click Create.
- 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.
- Test that the ad expands correctly in the Sizmek Advertising Suite Preview on different devices.