How to fix 2 typical responsive errors made by professional ad designers

Adnamis guide for responsive banner ads:

How to fix 2 common responsive errors made by professional ad designers

With the free design tool Google Web Designer you ensure your HTML5-ads will appear correctly on your target groups screen devices, mobiles, laptops, televisions and the web medias displaying banner ads.

Two common responsive errors in banner ads

  • 1. The scaled ad is incorrectly cropped.
  • 2. The layered content is merged or overlapping when resized.

Who is this guide for?

This guide is first of all intended for banner ad suppliers and users of the Google Web Designer app, who now how to create a new ad and are familiar with the process how to choose formats, layout, text etc.  


It emphasize how to avoid your ads are distorted thus important information is omitted. Likewise responsive errors like overlapping layout objects and text can be prevented


Adnami recommends the Google Web Designer app (GWD) since this tool is developed specifically for Google Ads web banner design and hence a de facto web standard.


If you are a new user and need to acquire knowledge of the programme in general, you’ll find multiple instructive videos on YouTube and a link to download the app here.

Obviously there are tools available for banner ad design other than GWD. In the latter we are designing responsively as stipulated below. In alternative applications the process may be different yet the goal the same: To achieve ideal responsive banner ad performance.

PLEASE NOTE

If you are using other software than Google Web Designer:

Responsive errors are also generated by users of  apps and frameworks other than GWD and quite common in web design. We refer to YouTube and  web guides particularly directed these apps in question.

Responsive error No. 1


Banner ads in quadratic, portrait and landscape formats

The banner ad resizes, but the content is trimmed or cropped incorrectly

This instruction is particularly for ads intended for different sizes, but with identical ratio between hight and width.


An ad designed in ie. 600*600 pixels must display correctly in 300*300 pixels without unintended trimming. This also goes for other formats whether portrait or landscape.



Start. These options must be switched on as follows

  • Responsive panel: Responsive layout 
  • Menu: View / Responsive / Resize handles


Select any layout objects, text boxes and graphics:


In the properties panel: 

  • Choose percent units in stead of pixels: Select Use percentages.
  • Choose Scaling: Resize image to fit.
  • Choose Alignment: Top left.

Does the ad perform as expected? Try resize the ad. Whilst dragging the lower right corner press the shift key to constrain.

Responsive error No. 2

Banner ads in quadratic, portrait and landscape formats

The banner ad resizes, but the content overlaps unintentionally

Occasionally the ads are displayed in formats which does not match exactly the chosen pixel sets.


The procedure below ensures the layers not to merge together and overlap within the range of the chosen format size sets: When these are not met 100 %, by the end media platform (ie. a homepage) the ad will appear flexible enough and display the content acceptable. 

Use Sizes og Range media rules

1.

With Sizes you determine the exact pixel sizes in which the ad is intended to be displayed, and how the layered visual objects are placed herein.

2.

With Range media rules you control the layered visual objects flexibel positions within defined margin ranges.

Step one: In the Responsive panel you choses a selection of intended ad serving sizes

  • 1. Open the Responsive panel.
  • 2. Select the serving sizes in the Sizes section.


Library

  • 1. Open Library.
  • 2. Click Edit default rules.
  • 3. Drag the desired objects into the work area.

Properties panel

  • 1. Work area: Choose any visual objects (ctrl/cmd-A).
  • 2. Specify layout in percents: Check Use percentages.
  • 3. Specify offset of every graphic and text object: Scaling: Resize image to fit og Alignment: Top left.


Arrange the objects for the selected ad sizes accordingly.

You may choose any number. In this example only three sizes are indicated.

HINT

You can only specify Alignment when  Edit default values is active

If the visual objects are aligned center or close to the same corner you may want to experiment with an alternative alignment setting ie. centered or bottom right..

Range media rules are set on the Media rules manager page

To determine how the graphics are positioned within requested margins you can choose ie. three media range rules for the ad sizes indicated by yellow check mark boxes.

HINT

Mediarange rules

You may define as many media range rules as you desire: The more ranges defined the more precisely you control the responsiveness. 


Any time you can return and readjust the media rules ranges if necessary.

Subsequently the ad is adjusted according the chosen media ranges one by one.


By dragging the lower right corner you verify that the ad content is resized reasonably and the elements thus positioned acceptable.


The banner ad and its content is now performing responsively in an optimum manner!