Designing for multiple screen sizes and orientations

Google Web Designer lets you build your ad or HTML page to work for different viewport sizes and orientations.

Alternate pages for different orientations

Recommended for:

  • Ads without fullscreen video that may appear in either portrait or landscape for a specific screen size
  • Ads or HTML pages with portrait and landscape layout differences that can't be achieved by CSS style changes

Alternate pages let you switch between two separate layouts based on the user's viewport orientation.

  1. Build two separate pages, each containing a different version of your ad for either portrait or landscape orientation.
  2. In the Properties panel for each page, set the Alternate Page property to the ID of the other page.

The published document automatically displays the page that matches the current viewport orientation.

If you create a non-responsive ad using separate pages for each orientation, but later change the ad to use responsive layout, you must clear the Alternate page property and add separate landscape and portrait media rules for your ad to work correctly.

Responsive layout that adapts to different sizes

Recommended for:

  • Ads or HTML pages that should work for many different viewport sizes
  • Mobile ads that allow fullscreen video (so that video playback won't be interrupted by orientation changes)

Responsive layout adapts to the viewport size by applying different style rules depending on the viewport size. For example, elements may change their position or even visibility, as seen below.

You set style rules for specified ranges of viewport widths and heights. You can even create distinct portrait and landscape versions of the rules, with a separate set of ranges for each orientation.

Percentage-based sizing and alignment also allow your layout to adapt to the viewport.

Learn how to build a responsive layout.

Was this article helpful?
How can we improve it?