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 to apply different styling rules for different sized ads.
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 view, 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, letting you create ads that can be styled for very 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 making a separate style for each rectangular area that the breakpoints define. 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.
Google Web designer helps you keep track of the different horizontal and vertical ranges in your ad by showing each range as a different colored bar above the rulers. Each rectangle where different ranges intersect is represented by its own style.
Responsive layouts change styles only, not content
It’s important to understand that 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 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, and 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 in fluid layout. Checking Fluid layout before using any of the alignment tools creates a percentage based alignment that will keep the elements relatively aligned to each other and to the enclosing container as the container changes size. This lets you use a mix of percentage-based and pixel-based element sizes as well.