Clear search
Close search
Google apps
Main menu

Designing for multiple screen sizes

HTML pages and ads can appear in many different sizes and orientations. When you know the exact intended viewport size, you can design for it specifically. When the user's viewport orientation or size isn’t known, there are several ways to use Google Web Designer to create an ad or page that changes to fit the viewport.

Separate pages for each orientation

When you have an ad that might appear in both landscape and portrait orientation, the simplest solution is to use a separate page for each orientation, and to use the Alternate page property to connect the two. This happens automatically when you create interstitial ads that don't use responsive layout. This is generally the best choice when you're creating an ad for a specific screen size.

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

Responsive layout

When you want to create an HTML page or ad that will work well for many different sizes, and you're not designing for a specific screen size, you should use responsive layout. Responsive layout uses media queries to recognize different viewport sizes and to change layout rules to restyle the document to fit them. 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 your ads can be styled to look appropriate in many different sizes. You can also create distinct portrait and landscape versions with a separate set of breakpoints for each orientation.

When you create a dual-orientation ad with responsive layout, a single page is created, and media rules are used to determine the orientation of the mobile device.

Fluid design

Along with a responsive layout, using the fluid design tool when you're aligning visual elements lets the elements in your design move proportionately as the viewport changes. For example, an element 30% of the way from the left side would move to keep that proportion no matter how large the viewport was.

Was this article helpful?
How can we improve it?