Dynamic creative design best practices

Designing assets for a dynamic creative involves extra attention and planning to ensure the design is flexible enough for changing content. This article includes tricks and tips for planning a dynamic concept, with a focus on dynamic assets.

Even if you're only using profile fields in your dynamic creative (simple key-value pairs that only have one possible value at a given time), it’s important to keep these best practices in mind as those values may change over time if you update the profile.

Dynamic text

Text elements in an ad, such as the headline and CTA (call-to-action), are often dynamic. In other words, text fields in the creative have their text set by code. You may lose some fine control over the creative's visual appearance, for example, kerning. The tradeoff is that dynamic text fields make it possible to customize the text for specific audiences.

Best practices:

• Limit the number of fonts. Each font adds 5-10 KB to the file size. Try to use one or, at most, two fonts for dynamic text. Each style of a font is unique. For example, Arial and Arial Bold are two fonts, each adding 5-10 KB (the exact amount depends on how many characters are embedded).
• Keep headlines short. All headlines must fit in the same space in the ad. The shorter the headline, the larger the text can be, making your message more visible. Likewise, try to choose headlines that work across all ad sizes. For example, a long word like "extravaganza" may not work well in a tall narrow ad size like 160x600. You may need to reduce font size to fit the entire word.
• Keep text length consistent. For each dynamic text field, keep the copy lines relatively consistent in length. Each line of dynamic text must fit in the text field you set up in the ad. So if your original assets have a text box designed to fit a line with ten words, but the dynamic text in the feed has lines that include 20 or 50 words, it's difficult to fit the copy lines in the text box without dramatically decreasing text size.
• Avoid heavily styled text. To add visual punch, designers sometimes format specific words in a headline or elsewhere with different font sizes, kerning, justification etc. This type of styling is difficult to recreate with dynamic text. More importantly, just because this styling looks good for one particular headline in a static ad does not mean it will work well for multiple headlines in a dynamic ad.
• Use animation sparingly in dynamic text. The more you animate specific segments of a headline separately from each other, the more difficult it is to make the animation sequence work for all possible headlines.

• Test special characters. Google spreadsheets supports the use of special, or non-Latin, characters with dynamic ads. For example, a register mark ® or copyright symbol ©. Google spreadsheets uses UTF-8 encoding that supports the use of special characters. A Microsoft Excel CSV file, which is encoded in Latin1, does not support non-Latin characters. Make sure you test the visual appearance of all special characters in your feed before publishing the content live.

  For languages like Chinese and Japanese, you should use standard system fonts (e.g. Arial), since using web fonts isn't practical for those languages. See Limit the number of fonts.

  Right-to-left (RTL) languages like Arabic or Hebrew have special considerations. If a creative will be used in both English and Arabic ads, and the headline is left-aligned in English, does the headline need to be right-aligned if the ad is served for an Arabic audience? If so, add code to the creative to dynamically flip the position of the headline.

Dynamic images

Dynamic images can be JPG, JPEG, GIF or PNG files, and are hosted on Google’s servers and loaded by your creative.

Images can't be hosted if they exceed the following limits:

• Maximum image filesize: 12,000 KB (or 12 MB).
• Maximum number of pixels per image: 6,000,000.

Best practices:

• Reduce file size. JPG or PNG files should be less than 1 MB. Balance the file size with the image dimensions and optimize as much as possible. The file size of any externally loaded file counts against your overall loading limit. You may need to have your designer rework some files.
• Reduce image dimensions. Optimize dimensions based on the dimensions the image will occupy in the ad space, rather than changing the scale of a loaded oversize image at serve time. This will reduce overall file size and load time.
• How many of each will you need? Some images may work well in one ad size but not in another. For example, a wide image like a car may display well in a 728x90 but not in a 160x600. You can scale down the image to fit, but it may still not create the desired visual effect, so you must decide whether to create individual images for each ad size. If you do, make sure you have a corresponding field for each image by ad size in the feed.  So, if you're running three ad sizes and using different images for each, include three columns in your feed and label them accordingly.
• Use the appropriate file type. JPG files are preferred because of their smaller file size. This works well if the background of the JPGs match the background of the ad, or if the images are displayed in a rectangular area in the ad. However, if you want images to display seamlessly against the background or other visual elements in the ad, use transparent PNG files that let the background show through.

• Transparent images usually take extra work. If your transparent PNG files include shadows or other visual effects, take time beforehand to check how they display against the background of your ad. Also check to see that your PNG files are sized consistently, including the transparent area around the image.

  For example, if two PNGs have the same size image within them, but one is 200x100 pixels while the other is 600x300 with a lot of empty space around the image, they'll display differently in the ad. Sometimes the best control for positioning individual images in an ad is making the PNG the same dimensions as the ad. (For example, use a 160x600 PNG in a 160x600 ad.) This allows your designer to adjust each image as needed within the PNG, without having to make adjustments in the creative file.

• Use RGB, not CMYK. The RGB color space is optimized for digital display. CMYK is designed for print. Studio cannot process images that use CMYK color profiles.
• Remove special characters. Images might not load properly if there's a special character in their name or the URL where they're hosted.

Dynamic color

You can set the colors of different elements in an ad, such as text and background, to change dynamically. Use hex values in the dynamic content rather than names of colors, for example 0xFF0000 instead of red. This allows for more control and makes it easier to update the color on the back end rather than in the creative file.

• Text color. Changing the color of individual words or phrases in the text, for example, "This is blue text" is a bit more work but can be done by adding HTML tags to the dynamic text value itself, for example, "This is <font color='#0000FF'>blue</FONT> text."
• Graphic color. Solid colors work best. Gradients can also be colored but will take more work and require two values in the dynamic content (one for each end of the gradient). Complicated gradients or complex structures (masks, shadows, etc.) may be difficult to color dynamically and may add extra time to production.

Dynamic URLs

Landing page URLs are commonly made dynamic. As with any Rich Media ad, you can modify the URL by changing your creative, but that may be more difficult. This is particularly true if the modifications must be inserted in the URL rather simply appended to it.

Other points

Best practices:

• File size. As with any Rich Media ad, consider file size limits. There must be enough remaining file size to add the Studio Enabler (if it’s not already included) as well as any fonts needed for dynamic text.
• Dependent elements. Test how your dynamic text, images, and other elements interact with one another, as well as the static portions of the ad. The dynamic variations of one element may unexpectedly impact the look of the others in the ad. For example, the color of a static text field may become an issue if you're using a dynamic background image with both dark and light variations. If text is white and one of the dynamic background images is ivory, the text becomes unreadable. Fix this by tailoring your background images or making the color of your text dynamic.
• Complexity. The production team needs to understand the structure of the ad files and the code within to insert the code that will make the ad dynamic. Creatives that are overly complex, poorly coded, or difficult to understand take more time to convert to dynamic.