Full site version
Don't forget to read the common technical requirements for the banner ads and technical requirements for the 728×90 banner on the Yandex Main page.
Requirements for formatting banners
- For a single line of text, the banner font must not be higher or wider than the capital letter “Ф” in the “Arial Bold” 36 pt font (that is, the height and width of a square with 26 px sides). For a two-line text, the font can be up to 25 pt (a square with 20 px sides). For a three-line text, the font can be up to 20 pt (a square with 15 px sides).
- The minimum font size is 11 pt (in logos, messages, illustrations, and disclaimers). Exceptions are photos of packages and products, as well as screenshots.
The indent from the edge of the banner to the text must be at least 10 px.
This requirement doesn't apply to placement of the age restriction.
A logo or a brand, product or technology icon or trademark can take up to 10% of the banner area.
- Complex multicolor backgrounds (with small elements over the entire area) or a background close to the font in color. Text should contrast with the background and be easy to read.
- Yellow background for the banner, as this color is used in standard elements of Yandex page designs. The acceptable yellow is #f0e5ad and lighter.
The banner must have a frame along all borders. The frame must contrast with the banner background color where they meet. The frame width must be 1px. The most suitable color is #dadada.
Duration of animation
- Banners and banner elements should not flash because this distracts the user from the webpage contents.
- Banner elements should not change more often than once every two seconds.
- The banner animation must be looped. One animation cycle can be up to 18 seconds. The pause between cycles must be at least 60 seconds. An HTML5 banner can feature the View again button for restarting the animation scenario. The HTML5 banner itself can be interactive and can react to the mouse cursor movements and/or clicks, changing the banner image depending on the user's action.
Readability of obligatory information
Obligatory legal information (for example, the bank name in the list of legal entities, terms of a promotional offer, and so on) must be clearly visible immediately, before the user interacts with the banner. For details, see additional recommendations.
Interface elements in the banner
- A banner can't be disguised as a user interface element, such as a Windows system window.
- A banner can't contain standard user interface elements (a cursor, search field, buttons or other elements) that don't perform the corresponding function.
- Don't use yellow in the interface elements, since this color is used in standard design elements on Yandex pages. The acceptable yellow is #f0e5ad and lighter.
Age restriction mark
If you need to put an age restriction mark on the banner:
- Place the age restriction mark at the top right corner of the banner.
- The font is “Arial regular” 12 pt.
- The color is #dadada.Note.
If the grey mark isn't readable, for example, against a multicolor background (with small elements over the entire area), it must be placed on a white base layer.
App store badge or button
- Maximum size of the button or badge: 40px high, 140 px wide.
- Don't use yellow for the button color, since this color is used in standard design elements of Yandex pages. The acceptable yellow is #f0e5ad and lighter.
- The app store badge must comply with the same requirements as logos.
Additional recommendations for the full and mobile site versions
Unreadable font is the cause of 90% of rejections during banner moderation.
- Try to avoid fractional coordinates when aligning the font in HTML5, as they can “blur” the text (you need to check this in all popular browsers).
- We recommend using vector fonts.Tip.
If vector fonts can't be used, save bitmap text blocks in the best possible quality (within the banner size restrictions).
- In some cases, the font in vector format also causes “blurring”.
There can be several reasons for this effect:
There are several ways to solve the problem of a “blurry” font, including in vector format:
- Small size
- Complex font shape (for example, serif fonts)
- Font isn't adapted for the web or it is designed for headers and large font sizes
- Increase the font size
- Replace the font with a simpler one
- Use a font adapted for the web and small font sizes
Avoid special effects and decorations
Decorations of fonts and text boxes (shadows, outlines, and 3D effects) can make the message less readable.
Reduce the number of fonts
- Use a maximum of two fonts or font styles.
- Use a maximum of three colors in fonts.
- The brand, product or technology logo.
- The disclaimer or mandatory legal information.
- The age restriction mark font.
- A font that is part of an illustration.
Don't use low-quality images/photos
- With file compression artefacts
- With blurring or excessive sharpness
Focus your message
Don't try to fit a lot of information in a narrow banner. Create a short and simple text so that the message can be grasped instantly.
Avoid small sizes
- Don't use small images with a lot of small details.
- Don't use photos with a lot of small details for the banner background.
Layout of obligatory legal information
Text should contrast with the background and be easy to read. The minimum font size is 11 pt.
- Dates of the promotional offer are shown in the first frames.
- Other information (obligatory for the customer) must be accessed from the “legal information” box when the user points the mouse at it .
The frame with obligatory information must be shown for at least three seconds.