Responsive HTML5 creatives

A responsive creative is a single HTML5 creative that can resize and restyle its elements to suit many different sizes of ad inventory. Rather than creating a different creative for each inventory size, responsive creatives use CSS media rules to define how the content of your creative moves and scales to fit the available space.

While responsive web pages can scale to support any size screen, responsive HTML5 creatives only need to scale to support common ad sizes.

Build a responsive creative

Google Web Designer's responsive layoutsmake it easier to build responsive creatives, but you can also build creatives using your preferred HTML editor.

1. Open Google Web Designer.
   • To quickly get started, select a responsive template (for example, Banner for Display & Video 360), then choose a layout.
   • Or to start from scratch, create a new banner ad.
     1. Select Display & Video 360 as the ad environment.
     2. Select any dimensions.
     3. Check the Responsive layout checkbox.
     4. Set up breakpoints and design your creative.

When the creative is ready, you can publish directly to Display & Video 360 or publish locally, then upload as a new HTML5 creative.

Choose serving sizes

To allow publishers to arrange ads in their page layouts, ad inventory itself must always have a set size. Even if your creative can support endless sizes, you'll still need to set which sizes it can serve in, so that it can be matched to available ad inventory.

When you upload a responsive creative:

• Built with Google Web Designer: Display & Video 360 will select the IAB sizes supported by the creative. Review the selected serving sizes in the Dimensions drop-down to confirm.
• Not built with Google Web Designer: The Dimensions field will be empty. Click the Dimensions drop-down to select the serving sizes supported by your creative.

Set serving sizes

1. Open Display & Video 360.
2. Open your advertiser.
3. In the left menu, click Creative, then Creatives.
4. Find the creative you uploaded. Click the creative's name to open it.
5. In the “Basic details” section, click Dimensions.
6. Select the checkbox next to each of the sizes you want your creative to serve in.
7. If a size you need isn't listed, add a custom size:
   1. Enter the width and height, then click Add . This size will automatically be selected for serving.
8. Click Apply.
9. Save the creative.

(Optional) Backup images

• Backup images are not required, but if you want to include them, you can upload one backup image per serving size.
• If you choose not to use backup images, in the rare case that a backup needs to serve, a system-generated pixel is served instead.

Publish a responsive creative

When the creative is ready to serve, publish it so that it can be assigned to line items.

Edit serving sizes

After you've published a responsive creative, you can't edit serving sizes. However, you can add or remove serving sizes while a new creative is in draft.

1. Open the creative.
2. In the “Basic details” section, click Dimensions.
3. Select the checkbox next to each of the sizes you want your creative to serve in. Deselect any sizes you don't want.
4. Click Apply.
5. Save the creative.

Preview responsive display creatives

When you preview a responsive creative, you can only preview one size at a time.

1. When you click Preview or , a size selector window appears.
2. Choose the size you want to preview, then click Preview with selected size.
3. The preview opens in a new tab. Close the preview tab to go back to Display & Video 360.

If your responsive creative is synced from Campaign Manager 360 and includes a third-party tag wrapper, you'll only be able to preview the creative in one size, and no size selection will be available. To see all sizes, open the placement in Campaign Manager 360.

Report on responsive creatives

When running reports on display campaigns that include responsive creatives, include Creative Size as a dimension to compare the performance of each serving size.