Build a Mobile TruSkin (MTS) | Bonzai Help Center

Mobile TruSkin is high impact creative format which enables you to continue your brand message for audience browsing the web from their mobile devices. The format auto-adjusts as per the device screen and wraps around the publisher content.

Let’s see below how we can build a Mobile TruSkin designing the header, side skins, footer, and the MREC banner.

Build Guide

To design a creative in Mobile TruSkin format, you need to separately design the MREC banner, header, side skin, and footer pages.

To create an ad

From the Creatives tab, click +New and select the Mobile TruSkin creative format.
By default, on the Canvas, the MREC banner is active.

MREC page — Page Menu

Add assets and elements

The design of the sample creative uses images. You can only add video in the MREC banner.

See the process of importing and adding assets.
See the recommended best practices for using images and videos in a creative.
See the process of including elements.

The following table displays the functionality of the elements on the creative components in Mobile TruSkin format.

3. Drag it into the Canvas and position it - (download the sample image from here).

Setting up the MREC banner

4. Switch to the footer by selecting the footer page from the Page menu.

5. Design the footer in line with the fold indicated by the dashed line.

Content that lies above the fold appears to break out of the footer and spills over to the publisher content to create a greater design impact.

Setting up the footer

Similarly, switch the pages from the Page menu to set up the Header and Side Skin pages.

Animations

Timeline panel enables you to create animations on the elements and assets. Initially, when the page loads, the site's content includes the header, the side skin, and the publisher content.

As a precaution, remember to animate the MREC as per the ad is in view. Otherwise, if you set up time based animation on the MREC, all animation may play out while MREC is not in view.

See the process of adding time based animation.

Events and Actions

In the Mobile TruSkin, at the page level, you can identify how much of the page has been scrolled using either percentage (%) or pixel(px). You can also respond to a user click, mouse in, mouse out and assign actions as per your campaign objective.

See the range of default actions and adding events.

Save and Preview

Click the save icon.

Save option in the Canvas

Preview your work using the Preview button.

You can preview your creative from the browser without saving or publishing the creative.
Saving your creative enables you to preview the creative on actual devices.
- Scan the QR code on the preview window to get a live preview of the creative on your mobile device.
Using the Chrome browser, you can test the responsiveness and appearance of the creative across different devices and viewports.
You can use Chrome browser’s Device Mode to test the creative against a variety of devices.

To view a live preview of the Mobile TruSkin format, scan the QR code from your mobile device

Live Preview Link

Build Guide

QA Checklist