Responsive layout overview

Using media queries to create ads with responsive layouts
Responsive design uses flexible – rather than fixed – layouts. For ads, this means creating a single ad that can restyle its elements as the orientation or size changes, rather than creating multiple similar ads. Keeping with standard responsive design principles, Google Web Designer uses CSS3 media queries to let you apply different styling rules for different-sized ads.

Create a responsive document

When you first create a new file, you may have the option to select the Responsive layout tick box when selecting dimensions. This option sets the page's width and height to 100%, filling the available space on the screen. You can also select the Match viewport tick box for an existing document, which has the same effect.

To make the elements in your document responsive, you can use fluid layout (percentage-based positions) and add breakpoints.

Breakpoints

Web developers use media queries to change a web page's layout and styling as the page expands horizontally. On a phone, for example, users might see content shown in a single column, while a wider view on a tablet might show the same content in two columns. These layout changes happen at breakpoints – viewport widths where the styling rules change.

Google Web Designer lets you place breakpoints for both horizontal and vertical viewport changes, so that a single ad can be styled for different sizes and orientation. You can also create distinct portrait and landscape versions with a separate set of breakpoints for each orientation.

Horizontal and vertical breakpoints together make a grid

When you create both horizontal and vertical breakpoints, you're defining multiple rectangular areas, each with a different set of styles. For example, if you use one vertical and one horizontal breakpoint, you’ll be creating four styles, one for each unique set of media rules.

Web Designer helps you keep track of the different horizontal and vertical ranges in your ad by showing each range as a different coloured bar above the rulers. Each rectangle where different ranges intersect is represented by its own style.

Responsive layouts change styles only, not content

Media queries let you change styles, but don’t give you a way to add or remove content. For example, you might have an image that you'd like to use when an ad is small, but you’d prefer to use a different, larger image for ads above a certain size. Or perhaps you'd like to add more images to a larger ad. Media queries don’t let you add assets like these when your ad passes a breakpoint.

You can work around this limitation by hiding assets until you want them to appear. For example, you can add images that you plan to use only in the larger versions of your ad, style them as visibility:hidden in CSS, then change the style to visibility:visible only in the larger versions of your ad.

Fluid layout in responsive ads

Another element of responsive design is fluid layout. If you enable Fluid layout in the Selection toolbar before using any of the alignment tools, you can use percentage-based alignment that will keep the elements relatively aligned with each other and with the enclosing container as the container changes size. You can also use a mix of percentage-based and pixel-based element sizes.

Was this helpful?
How can we improve it?