Preview responsive documents

Responsive features are not supported in AMPHTML ads. Video ads, animated GIFs, and image ads can use multi-size layouts.

Responsive previews let you see at a glance how your document looks in multiple sizes, such as on a contact sheet.

Responsive previews include all sizes enabled for preview and are only available for responsive documents.

Preview while authoring your document

The responsive preview panel is displayed next to the stage, and automatically updates as you make changes to the document. Previews in this panel also reflect the current page and the timeline's position, which means you can switch pages and preview and scrub animation.

To see how events behave, preview your document in a browser instead.

Toggle the responsive preview panel

Use one of the following methods to open or close the responsive preview panel:

• Click the Responsive preview button in the Responsive panel.
• Select View > Responsive > Preview from the top menu.

Once the panel is open, you can also close it by clicking the X in the top right corner.

Resize the responsive preview panel

Change the responsive preview panel's width or height by dragging the edge of the panel closest to the stage.

Move the responsive preview panel

You can move the responsive preview panel to above, below, or either side of the stage.

Drag the handle at the top of the panel until a yellow bar appears at the new location where you want the panel.

Select a media rule

Click a preview in the responsive preview panel to select that size in the Responsive panel.

Disable a preview size

Hover over a preview in the responsive preview panel to see a gray X at the top right corner of the preview. Click the X to disable that size for preview.

Preview in a browser

Press the Preview button in the top right corner of the Google Web Designer window to open a preview in your browser.

The responsive preview in your browser has different modes and sizes that you can select. The list of sizes includes common sizes for your ad environment, as well as any custom serving sizes that you enabled.

Single size

Choose this mode to preview your document in one size only.

• Show size - Select the size that you want to view.
• Custom size - If you select Single size > Custom, you can set a new size by editing this field, by dragging the preview's resize handles, or by clicking the gray bars along the top or left side of the preview area.

All sizes

Choose this mode to preview your document in multiple sizes.

• Show sizes - Select the sizes that you want to view. Choose All sizes to select all listed sizes.