Recommended banner implementations

Ad separated from interactive elements

Separating the banner ad from app interactive elements helps reduce user confusion and accidental clicks. Given the limited screen size of mobile devices, it's extremely important to provide some buffer between ads and clickable elements to avoid accidental clicks. It helps to separate the banner ad from the content of the app by creating a non-clickable border or some other separation between the ad and the app’s interactive portion. The examples below are sample implementations that separate the banner ad from the interactive content, including custom navigational buttons.

Ad separated from app content by a border

Banner ads that remain on the screen while a user scrolls through other content may be placed at the top or the bottom of the screen, as long as there are appropriate borders and/or sufficient separation from the app content, especially from navigational elements such as menu bars. If using a border, it's recommended that the border is non-clickable. The examples below illustrate implementations of a banner ad either at the top or bottom of the app, with the ad separated clearly from the app content and/or custom navigation and menu buttons by a border.

Allocate a fixed space for the banner ad

Banner ads can load after the app content has loaded on the screen. Sometimes the delay in loading times can bump app content on the screen and the ad will appear where the app content was originally. Users may click on the ad accidentally instead of the actual app content. It's recommended that you allocate a fixed space for the banner ad so that no app content will appear in that space.

Implement smart banners to accommodate multiple device screen sizes

Smart Banners are ad units that will render screen-wide banner ads on any screen size across different devices in either orientation. Smart Banners account for the multiple devices and screen sizes on the market, and they help prevent a banner ad from appearing too small for the screen. When an image ad won't take up the entire allotted space for the banner, it'll centre the image and use a hexagonal textile filler (see example below) to fill up the remaining space. See the Google Developers page for more information.