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
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
Select any layout objects, text boxes and graphics:
In the properties panel:
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
Library
Properties panel
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!
