Design Specs for Targeted Digital Ads With Metro Parent and Chicago Parent

Digital ads are everywhere we look on our screens. The risk of yours getting "tuned out" is real! That's why, beyond a compelling message, it's essential to make sure your specs are airtight. We're talking about the basic design elements that make your ad look and feel right.

When you run a targeted digital ad with Zoe Marketing & Communications, we ensure your ads fit those specifications. We've been designing targeted digital ads for over 15 years for our core regional websites, MetroParent.com in metro Detroit and ChicagoParent.com in Chicagoland.

We're here to help you optimize your ad so it looks its very best on multiple platforms and in various sizes.

In this blog, we'll outline these specs. Whether you're among the 50% of our clients who design your own ads or the 50% who have us do it, you'll get a full tour of:

• Dimensions of our most common ad sizes

• Maximum file sizes

• The best file types

• Resolution for digital ads

• The correct "color space" to use

• Why borders are important

• What to consider with animated ads

You'll end with a great grasp of the technical specs for your targeted digital ads. Let's jump in.

Dimensions of our most common ad sizes

At Zoe, we hone in on the top-performing sizes for our websites — MetroParent.com and ChicagoParent.com — and Google Ads. Here are those dimensions.

Display ad #1: 300x250 pixels

Called a "tile" or "medium rectangle," it's placed in left or right sidebars, or in the text of an article (aka "inline"). It's used on desktop or mobile views, on our sites and Google Ads.

Display ad #2: 728x90 pixels

This "leaderboard" is a classic banner ad at the top of a webpage or in-between articles. It's used for desktop and tablet views, on our sites and Google Ads.

Display ad #3: 320x50 pixels

The "mobile leaderboard" appears in the same places as a 300x250 ad, or at the bottom of a mobile screen. It's not for desktops. It works for both our sites and Google Ads.

'Billboard' ad: 4:1 or 6:1 aspect ratio

This large ad drops from the top of a web page and commands half the screen. It's available for our websites, but not Google Ads. And it's for desktop only.

These ads are proportion-based and can have an aspect ratio of 4:1 or 6:1. Which means the width is four or six times the height. As far as pixels go, it's:

• Maximum: 2,000x500 pixels

• Minimum: 1,440x240 pixels

‘The Cube’ ad: 300x600 and 300x250 pixels

These vertical rectangular ads feature a novel “revolving” cube that displays 3 or 6 images. The call-to-action and logo are static. It displays on both desktop and mobile. For the caption, there are two options:

• 1 brief caption: It’ll remain the same for all photos.

• 3 or 6 brief captions: Supply different text for each photo.

Photos need to be cropped to a 1:1 ratio, with a minimum of 300 pixels in width.

'Sneaker' ad: 728x90 and 320x50

This "sneaky" ad slides up from the bottom, side or top of our websites only. It appears on all screens but needs two sizes. The 728x90 is for desktop/tablet and the 320x50 for mobile.

'Sticky Note' ad: just text

The eye-grabbing, yellow, lined "Post-It" style note appears at the top right of the screen on our websites only. It shows on desktop only. The note is already designed, so you only need to provide the text: 25 words or 100 characters max.

Maximum file sizes

Bottom line: No file should be larger than 1 MB max. Most ads don't come close — except for some Billboards. The best practice for all three display ads is a max of 150K in size. With Zoe, though, we can typically work with bigger sizes.

The best file types

In a nutshell

• Yes: JPG, PNG, GIF and HTML5* files are all acceptable.

• No: Flash files. Most browsers no longer support Flash.

When JPG is best

JPG files are ideal for ads that use complex images and large text. They tend to have smaller file sizes, which means ads will still load quickly — and is essential to being seen.

When PNG is best

PNG is the way to go if you have more or small text. It allows for smoother lines, so fonts show up better. However, it doesn't display complex images as well as a JPG.

*The scoop on HTML5

These ads include a set of images, copy and code that are responsive to different sizes. They also can have animation. Zoe doesn't write or troubleshoot HTML5 code.

If you have designed HTML5 to submit, send a zipped folder that includes all assets: the images and an index.html file that includes the code itself.

(Is this confusing? No worries. Just focus on creating JPG, PNG and GIF ads.)

Resolution for digital ads

For screens, "resolution" means how many pixels are in an image. The standard screen resolution is 72 PPI, or pixels per inch. (It's like DPI, or "dots per inch" — the term used for print ads.)

Note: There's no benefit to increasing your ad's PPI; it simply makes it larger. If you double the resolution to 144 PPI, for instance, it's twice as many pixels in an inch of space.

We'll have to reduce the resolution back down to 72 PPI. 

How to check resolution

Make sure it's right at 72 PPI with these methods:

• Windows PC: Select the file. Right-click the image and then click "Properties." A window will appear with the image's details. Go to the "Details" tab to see the image's resolution.

• Mac: Right-click on the file in the Finder. Click "Get Info." Under "More Info," you'll find the resolution.

The correct 'color space' to use

There are two "color space" settings to select for your ad when creating it: RGB or CMYK.

RGB — or red, green and blue — is correct for screens. These are the primary colors of light that create vibrant images on screens.

On the other hand, CMYK — short for cyan, magenta, yellow and black — are the primary colors of ink that, when mixed, can create any color. This is used for print only. 

Do not save your digital ad as CMYK. Save it as RGB.

Tip: Always build your ad in RGB so you know exactly what you're getting. If you create it in CMYK and try converting it to RGB, it may change its appearance.

How to check color space

Use the same method you would to check the resolution. Again, that's:

• Windows PC: Select the file. Right-click the image and then click "Properties." A window will appear with the image's details. Go to the "Details" tab to see the image's color.

• Mac: Right-click on the file in the Finder. Click "Get Info." Under "More Info," you'll find the color.

Why borders are important

All ads need a border or "hard edge" to distinguish them from their surroundings. An ad with a white background that "bleeds" into the white background of a website is disorienting.

There are two options:

• A simple 1-pixel border on all four sides. If your ad has a white background and doesn't have this border, we'll add it for you.

• Your ad's image/background color can also extend to all four sides to create those edges.

What to consider with animated ads

If you want your ad to move, there are two options: GIF and HTML5. Remember, most browsers no longer support Flash. Here's a little look at both:

Go GIF for simple imagery

An animated GIF is a series of images that instantly play on a loop. It's suitable for short, simple animations, moving text or illustrations — and an easy way to add movement and interest. 

HTML5 is more complex

This sophisticated method is for complex animations like moving people, animals or other detailed images. It's also great for responsive design. The drawback is you'll likely need a developer to write the code or a special program.

Either way: 15 seconds max

Animation grabs attention, but attention is fleeting. So make it quick. Your logo and core message should be visible in the first few seconds. And the entire animation should be 15 seconds or less to keep your ad under 1MB. The last frame should be your call to action.

What are the next steps for my digital ads?

There are quite a few technical specs to consider for your targeted digital ads. In this blog, we broke down the big ones, so you can confidently design your ads.

First, we covered four essentials: The dimensions of our most common ads, max file size (1MB), best file types (JPG, PNG, GIF and HTML5) and ideal web resolution (72 PPI).

You also know to set your color space to RGB — and to include a border or hard edge around your ad. Finally, we reviewed a few details of animated digital ads (15 seconds or less!).

So what's next? If you're getting adjusted with your MetroParent.com or ChicagoParent.com digital ads, discover the onboarding process for targeted digital ads. And make sure your ads really resonate with our definitive tips on creating successful digital ads that drive conversions.