ClickToll.com — Field Notes & Guides

ClickToll.com | Banner Ads | Adtech | Affiliate Marketing | Lead Generation

Tue, 15 Sep 2026 10:00:00 +0000

The ad internet, explained

Make space
for attention.

Big ideas. Small rectangles. A colorful reference desk for banner ads, adtech, affiliate marketing, and the next step after the click.

Browse ad sizes Get campaign smarter

ClickToll / Your next good ideaField note 01

09Ad formats

10Field notes

01Clear next step

01 / The reference wall

Small space.
Big possibilities.

Nine useful fixed-size references. Compare the canvas, plan the message, and check the receiving platform’s specifications.

Desktop workhorses

Wide + tall

300 × 250Medium rectangle 728 × 90Leaderboard 160 × 600Wide skyscraper 300 × 600Half page

Mobile pocket hits

Small + sharp

320 × 50Mobile banner 320 × 100Large mobile banner 300 × 50Compact mobile banner

Design the message. Then choose the size. Start with the smallest canvas and keep the promise clear.

336 × 280Large rectangle ↗970 × 250Billboard ↗Specs before pixels.Use the delivery checklist ↗

02 / The creative lab

From pixels
to purpose.

Explore all nine sizes in editable CSS and real animated GIFs. Compare both formats at exact dimensions, control playback, and download each matched pair.

Enter the creative lab ↗Explore motion →

CSS + animated GIF300 × 250

300x250 exact-size example. View CSS and animated GIF versions · Download both.

One idea. A stronger hierarchy.

CSS + animated GIF320 × 100

320x100 exact-size example. View CSS and animated GIF versions · Download both.

Small canvas. Clear next step.

03 / The campaign desk

Don’t just click.
Connect the dots.

Put the creative in context: the audience, the technology, the offer, and the outcome.

01 / THE CAMPAIGN DESK

Display ads

Build a clear offer, choose your canvas, and connect the creative to its destination.

Explore the guide ↗

02 / THE CAMPAIGN DESK

Adtech

Understand the buyers, sellers, delivery systems, and signals behind an impression.

Explore the guide ↗

03 / THE CAMPAIGN DESK

Affiliates

Pair useful offers with relevant placements and understandable commercial relationships.

Explore the guide ↗

04 / THE CAMPAIGN DESK

Lead generation

Move beyond click counts to qualification, landing-page clarity, and useful follow-up.

Explore the guide ↗

01 / START WITH INTENTOne audience. One useful promise.

Write the campaign’s job before writing its headline. Decide who it helps and what happens next.

02 / RESPECT THE FRAMECreative includes the details.

Readability, dimensions, file weight, and the destination all belong in the brief.

03 / MEASURE THE JOURNEYClicks are a beginning.

Keep engagement, qualified leads, and completed outcomes distinct when you review results.

04 / ClickToll Field Notes

A little less guesswork.
A lot more context.

Long-form guides for people who plan, design, publish, and measure display campaigns.

Banner AdsJanuary 11, 2025

Banner advertising for beginners: from brief to launch

Start with a clear offer, choose a practical format set, and connect every click to a campaign you can evaluate.

Read the field note

Lead GenerationFebruary 15, 2024

Banner ads for lead generation: build the whole journey

Connect the creative promise to qualification, landing-page clarity, follow-up ownership, and real business conversations.

Read the field note

AdtechJanuary 27, 2025

Adtech explained: what happens behind a banner ad

Meet the buyer, seller, auction, ad server, and reporting layers without losing sight of the campaign’s purpose.

Read the field note

Affiliate MarketingApril 29, 2026

Affiliate banner marketing: offers, placements, and trust

Review program terms, match offers to reader needs, place disclosures clearly, and measure approved commissions.

Read the field note

Campaign StrategyJune 5, 2025

UTM tracking for banner campaigns: a cleaner campaign trail

Create a shared naming convention, maintain a link register, and test campaign destinations without exposing personal data.

Read the field note

Campaign StrategySeptember 3, 2026

Banner ad A/B testing: one useful question at a time

Plan a focused experiment, choose the primary outcome, keep the comparison fair, and report uncertainty honestly.

Read the field note

Explore all 10 field notes ↗Grab the checklists →

05 / A good place to start

Good questions.
Clear answers.

Not sure whether you need a format, a workflow, or a definition? Start here, then follow the reference that fits the job.

Open the glossary ↗

What is ClickToll.com?

A practical reference for banner formats, display advertising, adtech, affiliate marketing, and lead generation. Start with the size library or a long-form field note.

Which banner size should I create first?

Start with the placements accepted by your publisher or buying platform. Choose a small verified set, then compose the message for each canvas instead of stretching one image.

Are the gallery examples ready to upload as ads?

Every size includes an exact-dimension CSS example and a real animated GIF download. Use the editable source or blank SVG to adapt the creative, then check the receiving platform’s delivery requirements.

How can banner ads support lead generation?

Connect a specific offer to a relevant destination, define a qualified inquiry, and assign ownership for follow-up. Review the whole journey rather than treating every click as a lead.

Where should I start with affiliate banners?

Review the program terms, audience fit, destination, and commercial relationship. Keep relevant disclosures close to the recommendation and evaluate approved outcomes rather than pending commissions.

Banner ad sizes, without the guesswork.

Tue, 15 Sep 2026 10:00:00 +0000

The format desk / Nine canvases

Banner ad sizes, without the guesswork.

Explore nine fixed-size references for desktop and mobile. Every size includes exact-dimension CSS and animated GIF examples, editable HTML/CSS, a GIF download, and a blank SVG canvas.

9 formats shown

All sizes · HTML/CSS + animated GIFs ↓

Medium rectangle

300 × 250

300x250 exact-size example. View CSS and animated GIF versions · Download both.

A near-square composition for a clear headline, a recognizable visual, and one next step.

Size guide + source code ↗

Large rectangle

336 × 280

336x280 exact-size example. View CSS and animated GIF versions · Download both.

A slightly larger rectangular composition for an offer that needs a little more breathing room.

Size guide + source code ↗

Leaderboard

728 × 90

728x90 exact-size example. View CSS and animated GIF versions · Download both.

A wide, shallow canvas that calls for concise copy and a deliberate left-to-right reading order.

Size guide + source code ↗

Wide skyscraper

160 × 600

160x600 exact-size example. View CSS and animated GIF versions · Download both.

A tall, narrow canvas for short lines, strong contrast, and a readable vertical hierarchy.

Size guide + source code ↗

Half page

300 × 600

300x600 exact-size example. View CSS and animated GIF versions · Download both.

A roomier vertical format for a composed sequence of brand, promise, proof, and action.

Size guide + source code ↗

Billboard

970 × 250

970x250 exact-size example. View CSS and animated GIF versions · Download both.

A broad, substantial canvas for a short headline, one visual idea, and a clearly signposted destination.

Size guide + source code ↗

Mobile banner

320 × 50

320x50 exact-size example. View CSS and animated GIF versions · Download both.

A compact mobile canvas that favors a short promise and unmistakable brand recognition.

Size guide + source code ↗

Compact mobile banner

300 × 50

300x50 exact-size example. View CSS and animated GIF versions · Download both.

A narrow mobile strip for a very concise message, delivered at the exact requested dimensions.

Size guide + source code ↗

Large mobile banner

320 × 100

320x100 exact-size example. View CSS and animated GIF versions · Download both.

A taller mobile banner with space to separate the main message from its supporting brand and action.

Size guide + source code ↗

All CSS and GIF examples are displayed at 1:1 CSS-pixel size. Borders are included in the stated dimensions. Wide units scroll inside their preview instead of being squeezed or stretched.

Fixed dimensions are only part of the brief

A format tells you the shape of a creative. It does not settle the file type, package weight, click handling, animation limits, or publisher approval process. Keep the destination’s delivery instructions beside the artboard.

Understand the terminology

The IAB Tech Lab’s New Ad Portfolio includes flexible, aspect-ratio-based guidance. This library is a fixed-size reference, not a claim that these nine formats are the entire IAB portfolio. Specific platforms continue to publish their own accepted creative dimensions.

Start with the intended placement

Confirm where the campaign will run and which formats are accepted before building a large asset set. Use the composition notes on each format page, then review the delivery checklist. Recompose the message for a new shape instead of stretching a finished image.

The creative reference wall.

Tue, 15 Sep 2026 10:00:00 +0000

The gallery / Format meets focus

The creative reference wall.

Browse original ClickToll concepts in CSS and real animated GIF files. Every rectangle, tall unit, leaderboard, and mobile banner is displayed at its exact dimensions.

9 formats shown

All sizes · HTML/CSS + animated GIFs ↓

Medium rectangle

300 × 250

300x250 exact-size example. View CSS and animated GIF versions · Download both.

A near-square composition for a clear headline, a recognizable visual, and one next step.

Size guide + source code ↗

Large rectangle

336 × 280

336x280 exact-size example. View CSS and animated GIF versions · Download both.

A slightly larger rectangular composition for an offer that needs a little more breathing room.

Size guide + source code ↗

Leaderboard

728 × 90

728x90 exact-size example. View CSS and animated GIF versions · Download both.

A wide, shallow canvas that calls for concise copy and a deliberate left-to-right reading order.

Size guide + source code ↗

Wide skyscraper

160 × 600

160x600 exact-size example. View CSS and animated GIF versions · Download both.

A tall, narrow canvas for short lines, strong contrast, and a readable vertical hierarchy.

Size guide + source code ↗

Half page

300 × 600

300x600 exact-size example. View CSS and animated GIF versions · Download both.

A roomier vertical format for a composed sequence of brand, promise, proof, and action.

Size guide + source code ↗

Billboard

970 × 250

970x250 exact-size example. View CSS and animated GIF versions · Download both.

A broad, substantial canvas for a short headline, one visual idea, and a clearly signposted destination.

Size guide + source code ↗

Mobile banner

320 × 50

320x50 exact-size example. View CSS and animated GIF versions · Download both.

A compact mobile canvas that favors a short promise and unmistakable brand recognition.

Size guide + source code ↗

Compact mobile banner

300 × 50

300x50 exact-size example. View CSS and animated GIF versions · Download both.

A narrow mobile strip for a very concise message, delivered at the exact requested dimensions.

Size guide + source code ↗

Large mobile banner

320 × 100

320x100 exact-size example. View CSS and animated GIF versions · Download both.

A taller mobile banner with space to separate the main message from its supporting brand and action.

Size guide + source code ↗

All CSS and GIF examples are displayed at 1:1 CSS-pixel size. Borders are included in the stated dimensions. Wide units scroll inside their preview instead of being squeezed or stretched.

Fixed dimensions are only part of the brief

Understand the terminology

Start with the intended placement

Desktop ads. Built for the space.

Tue, 15 Sep 2026 10:00:00 +0000

Desktop advertising / Six formats

Desktop ads. Built for the space.

Compare wide, rectangular, and vertical desktop formats. Plan the reading order, preserve the canvas, and keep one campaign promise in focus.

All sizes · HTML/CSS + animated GIFs ↓

Medium rectangle

300 × 250

300x250 exact-size example. View CSS and animated GIF versions · Download both.

A near-square composition for a clear headline, a recognizable visual, and one next step.

Size guide + source code ↗

Large rectangle

336 × 280

336x280 exact-size example. View CSS and animated GIF versions · Download both.

A slightly larger rectangular composition for an offer that needs a little more breathing room.

Size guide + source code ↗

Leaderboard

728 × 90

728x90 exact-size example. View CSS and animated GIF versions · Download both.

A wide, shallow canvas that calls for concise copy and a deliberate left-to-right reading order.

Size guide + source code ↗

Wide skyscraper

160 × 600

160x600 exact-size example. View CSS and animated GIF versions · Download both.

A tall, narrow canvas for short lines, strong contrast, and a readable vertical hierarchy.

Size guide + source code ↗

Half page

300 × 600

300x600 exact-size example. View CSS and animated GIF versions · Download both.

A roomier vertical format for a composed sequence of brand, promise, proof, and action.

Size guide + source code ↗

Billboard

970 × 250

970x250 exact-size example. View CSS and animated GIF versions · Download both.

A broad, substantial canvas for a short headline, one visual idea, and a clearly signposted destination.

Size guide + source code ↗

All CSS and GIF examples are displayed at 1:1 CSS-pixel size. Borders are included in the stated dimensions. Wide units scroll inside their preview instead of being squeezed or stretched.

Fixed dimensions are only part of the brief

Understand the terminology

Start with the intended placement

Compose for a reading pattern

A leaderboard asks for a concise left-to-right arrangement. A rectangle can combine a headline with a useful visual. A tall unit can create a vertical sequence. These are composition options, not promises about which format will perform best in different inventory.

Keep the placement context visible

Judge an export inside a page mockup rather than only against an empty artboard. Surrounding headlines, backgrounds, and navigation can change how easily the brand and message are recognized. Check the entire visual hierarchy before introducing another creative variation.

Mobile ads. Keep the idea clear.

Tue, 15 Sep 2026 10:00:00 +0000

Mobile advertising / Three formats

Mobile ads. Keep the idea clear.

Design for the smallest useful canvas. Compare three compact banner formats, then review the phone experience that comes after the tap.

All sizes · HTML/CSS + animated GIFs ↓

Mobile banner

320 × 50

320x50 exact-size example. View CSS and animated GIF versions · Download both.

A compact mobile canvas that favors a short promise and unmistakable brand recognition.

Size guide + source code ↗

Compact mobile banner

300 × 50

300x50 exact-size example. View CSS and animated GIF versions · Download both.

A narrow mobile strip for a very concise message, delivered at the exact requested dimensions.

Size guide + source code ↗

Large mobile banner

320 × 100

320x100 exact-size example. View CSS and animated GIF versions · Download both.

A taller mobile banner with space to separate the main message from its supporting brand and action.

Size guide + source code ↗

All CSS and GIF examples are displayed at 1:1 CSS-pixel size. Borders are included in the stated dimensions. Wide units scroll inside their preview instead of being squeezed or stretched.

Fixed dimensions are only part of the brief

Understand the terminology

Start with the intended placement

Read it on a real phone

Start with a short promise, a clear brand cue, and an appropriate next step. Review the smallest exported version at its intended size. A larger phone canvas should improve spacing and hierarchy, not become a container for every detail removed from the desktop version.

Review what happens after the tap

Open the final campaign destination on a phone. Check that it delivers the offer, identifies the expected commitment, and lets a visitor use the main action without awkward scrolling or precision tapping. Continue with the mobile creative field note for a full review process.

300 × 250 Medium rectangle Banner Guide

Tue, 15 Sep 2026 10:00:00 +0000

The compact storyteller

Medium rectangle

300 × 250

A near-square composition for a clear headline, a recognizable visual, and one next step.

Get the blank canvas ↓Delivery checklist ↗

300x250 exact-size example. View CSS and animated GIF versions · Download both.

Two formats. One exact canvas.

Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 300 × 250 CSS pixels; the GIF’s encoded canvas is exactly 300 × 250 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.

Both versions show three scenes, two seconds per scene, repeated three times. The GIF contains nine encoded frames and no infinite-loop extension; it plays for 18 seconds and ends on the third scene. Play restarts the selected example; Stop shows its final frame. Reduced-motion preferences use a still preview.

Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF

View the complete 300 × 250 HTML + CSS source

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=300,height=250"><title>ClickToll 300 × 250 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:300px;height:250px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:300px;min-width:300px;max-width:300px;height:250px;min-height:250px;max-height:250px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}


</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-lime" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE IT
MATTER.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">ONE CLEAR
PROMISE.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">A BETTER
NEXT STEP.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>

View the exact-size animated GIF embed

<a href="https://clicktoll.com/display-advertising/">
  <img src="https://clicktoll.com/assets/banners/300x250/clicktoll-300x250-animated.gif"
       width="300" height="250"
       style="display:block;width:300px;height:250px;min-width:300px;max-width:none;flex:none;border:0"
       alt="Explore the ClickToll display advertising guide">
</a>

Where this canvas fits

An in-content or side-column placement where a concise offer can be understood as a single composition. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.

A useful way to compose the message

Build three visual layers: brand recognition, the useful promise, and the action. Keep one layer dominant rather than giving every element equal weight. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.

The mistake to avoid

Shrinking a full landing-page message into the available space. Move the explanation to the destination and keep the creative focused. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.

What the blank canvas includes

The download is a simple SVG at exactly 300 × 250 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.

Before you deliver

Check the actual output dimensions, file weight, supported format, destination, language, creative version, and any animation or click-handling rules. A browser preview is not a substitute for the receiving platform’s approval process. The ad specifications page explains the difference between a static image and an HTML creative package.

See the 336 × 280 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.

This pixel format is included in Google Ads’ uploaded display-ad specifications. Availability and delivery rules depend on the receiving platform or publisher.

728 × 90 Leaderboard Banner Guide

Tue, 15 Sep 2026 10:00:00 +0000

One line. One clear idea.

Leaderboard

728 × 90

A wide, shallow canvas that calls for concise copy and a deliberate left-to-right reading order.

Get the blank canvas ↓Delivery checklist ↗

728x90 exact-size example. View CSS and animated GIF versions · Download both.

Two formats. One exact canvas.

Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 728 × 90 CSS pixels; the GIF’s encoded canvas is exactly 728 × 90 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.

Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF

View the complete 728 × 90 HTML + CSS source

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=728,height=90"><title>ClickToll 728 × 90 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:728px;height:90px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:728px;min-width:728px;max-width:728px;height:90px;min-height:90px;max-height:90px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}

.ct-scene{flex-direction:row;align-items:center;padding:9px 16px 14px;gap:21px}.ct-brand{font-size:15px;width:121px;flex-shrink:0}.ct-copy{font-size:27px;line-height:1.01;letter-spacing:-1px;flex:1}.ct-bottom{border:0;padding:0;flex-shrink:0}.ct-caption{display:none}.ct-cta{font-size:12px;padding:12px 19px}.ct-art{right:140px;top:-36px}.ct-rainbow{height:6px}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">SMALL SPACE.
BIG IDEA.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">ONE MESSAGE.
CLEAR FOCUS.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-pink" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE EVERY
PIXEL COUNT.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>

View the exact-size animated GIF embed

<a href="https://clicktoll.com/display-advertising/">
  <img src="https://clicktoll.com/assets/banners/728x90/clicktoll-728x90-animated.gif"
       width="728" height="90"
       style="display:block;width:728px;height:90px;min-width:728px;max-width:none;flex:none;border:0"
       alt="Explore the ClickToll display advertising guide">
</a>

Where this canvas fits

A wide desktop placement above, between, or alongside page sections, when that size is accepted by the publisher. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.

A useful way to compose the message

Let the brand anchor one side, the message carry the middle, and the action finish the reading path. Keep supporting copy exceptionally brief. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.

The mistake to avoid

Forcing the same copy used in a rectangle into a much shallower canvas. Rewrite the message before reducing the type. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.

What the blank canvas includes

The download is a simple SVG at exactly 728 × 90 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.

Before you deliver

See the 970 × 250 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.

This pixel format is included in Google Ads’ uploaded display-ad specifications. Availability and delivery rules depend on the receiving platform or publisher.

160 × 600 Wide skyscraper Banner Guide

Tue, 15 Sep 2026 10:00:00 +0000

Stand tall. Stay clear.

Wide skyscraper

160 × 600

A tall, narrow canvas for short lines, strong contrast, and a readable vertical hierarchy.

Get the blank canvas ↓Delivery checklist ↗

160x600 exact-size example. View CSS and animated GIF versions · Download both.

Two formats. One exact canvas.

Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 160 × 600 CSS pixels; the GIF’s encoded canvas is exactly 160 × 600 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.

Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF

View the complete 160 × 600 HTML + CSS source

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=160,height=600"><title>ClickToll 160 × 600 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:160px;height:600px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:160px;min-width:160px;max-width:160px;height:600px;min-height:600px;max-height:600px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}

.ct-scene{padding:18px 13px 23px}.ct-brand{font-size:12px;letter-spacing:-.7px}.ct-copy{font-size:30px;line-height:1.12;letter-spacing:-1.3px}.ct-bottom{flex-direction:column;align-items:flex-start;gap:16px;padding-top:14px}.ct-caption{font-size:11px;max-width:115px}.ct-cta{padding:10px 13px;font-size:11px}.ct-art{top:78px;right:15px;width:120px;height:120px;border-width:12px;opacity:.18}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-pink" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE
SPACE
FOR
IDEAS.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">KEEP
YOUR
MESSAGE
CLEAR.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE
THE
NEXT
MOVE.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>

View the exact-size animated GIF embed

<a href="https://clicktoll.com/display-advertising/">
  <img src="https://clicktoll.com/assets/banners/160x600/clicktoll-160x600-animated.gif"
       width="160" height="600"
       style="display:block;width:160px;height:600px;min-width:160px;max-width:none;flex:none;border:0"
       alt="Explore the ClickToll display advertising guide">
</a>

Where this canvas fits

A desktop rail or other vertical slot with enough reserved height and an appropriate surrounding reading context. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.

A useful way to compose the message

Use a short headline near the top, one meaningful visual, and a clear action. Check long words before committing to the typography. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.

The mistake to avoid

Stacking too many benefits and leaving conditions as an unreadable block. Narrow the claim rather than compressing the entire brief. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.

What the blank canvas includes

The download is a simple SVG at exactly 160 × 600 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.

Before you deliver

See the 300 × 600 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.

This pixel format is included in Google Ads’ uploaded display-ad specifications. Availability and delivery rules depend on the receiving platform or publisher.

300 × 600 Half page Banner Guide

Tue, 15 Sep 2026 10:00:00 +0000

A little room to tell the story.

Half page

300 × 600

A roomier vertical format for a composed sequence of brand, promise, proof, and action.

Get the blank canvas ↓Delivery checklist ↗

300x600 exact-size example. View CSS and animated GIF versions · Download both.

Two formats. One exact canvas.

Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 300 × 600 CSS pixels; the GIF’s encoded canvas is exactly 300 × 600 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.

Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF

View the complete 300 × 600 HTML + CSS source

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=300,height=600"><title>ClickToll 300 × 600 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:300px;height:600px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:300px;min-width:300px;max-width:300px;height:600px;min-height:600px;max-height:600px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}

.ct-scene{padding:24px 23px 30px}.ct-copy{font-size:59px;line-height:1.04;letter-spacing:-3px}.ct-brand{font-size:16px}.ct-caption{font-size:12px}.ct-cta{font-size:13px}.ct-art{width:180px;height:180px;right:-40px;top:32px;border-width:24px}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">GOOD
ADS.
CLEAR
IDEAS.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-lime" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">ONE
STORY.
LESS
NOISE.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">A GOOD
IDEA
STARTS
HERE.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>

View the exact-size animated GIF embed

<a href="https://clicktoll.com/display-advertising/">
  <img src="https://clicktoll.com/assets/banners/300x600/clicktoll-300x600-animated.gif"
       width="300" height="600"
       style="display:block;width:300px;height:600px;min-width:300px;max-width:none;flex:none;border:0"
       alt="Explore the ClickToll display advertising guide">
</a>

Where this canvas fits

A vertical desktop placement where the publisher supports the format and the message benefits from additional height. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.

A useful way to compose the message

Create a top-to-bottom story with generous separation. Make the core promise understandable without requiring every detail to be read. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.

The mistake to avoid

Treating the extra area as permission to build a miniature brochure. Use space to improve hierarchy instead of adding unrelated claims. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.

What the blank canvas includes

The download is a simple SVG at exactly 300 × 600 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.

Before you deliver

See the 160 × 600 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.

This pixel format is included in Google Ads’ uploaded display-ad specifications. Availability and delivery rules depend on the receiving platform or publisher.

336 × 280 Large rectangle Banner Guide

Tue, 15 Sep 2026 10:00:00 +0000

Room for a better hierarchy.

Large rectangle

336 × 280

A slightly larger rectangular composition for an offer that needs a little more breathing room.

Get the blank canvas ↓Delivery checklist ↗

336x280 exact-size example. View CSS and animated GIF versions · Download both.

Two formats. One exact canvas.

Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 336 × 280 CSS pixels; the GIF’s encoded canvas is exactly 336 × 280 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.

Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF

View the complete 336 × 280 HTML + CSS source

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=336,height=280"><title>ClickToll 336 × 280 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:336px;height:280px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:336px;min-width:336px;max-width:336px;height:280px;min-height:280px;max-height:280px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}

.ct-scene{padding:21px 21px 26px}.ct-copy{font-size:47px;letter-spacing:-2.4px}.ct-brand{font-size:14px}.ct-caption{font-size:11px}.ct-art{width:136px;height:136px}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">A BETTER
NEXT STEP.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">ONE IDEA.
BIG FOCUS.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-pink" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">GIVE YOUR
IDEA SPACE.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>

View the exact-size animated GIF embed

<a href="https://clicktoll.com/display-advertising/">
  <img src="https://clicktoll.com/assets/banners/336x280/clicktoll-336x280-animated.gif"
       width="336" height="280"
       style="display:block;width:336px;height:280px;min-width:336px;max-width:none;flex:none;border:0"
       alt="Explore the ClickToll display advertising guide">
</a>

Where this canvas fits

In-content and side-column inventory that explicitly accepts this canvas, rather than assuming all rectangle slots are interchangeable. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.

A useful way to compose the message

Use the extra space to strengthen the main visual and improve spacing. Keep a consistent relationship between the promise and destination. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.

The mistake to avoid

Delivering a 300 × 250 file in place of the requested size. Similar proportions do not make the file dimensions identical. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.

What the blank canvas includes

The download is a simple SVG at exactly 336 × 280 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.

Before you deliver

See the 300 × 250 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.

This pixel format is included in Google Ads’ uploaded display-ad specifications. Availability and delivery rules depend on the receiving platform or publisher.

970 × 250 Billboard Banner Guide

Tue, 15 Sep 2026 10:00:00 +0000

Make a bold first impression.

Billboard

970 × 250

A broad, substantial canvas for a short headline, one visual idea, and a clearly signposted destination.

Get the blank canvas ↓Delivery checklist ↗

970x250 exact-size example. View CSS and animated GIF versions · Download both.

Two formats. One exact canvas.

Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 970 × 250 CSS pixels; the GIF’s encoded canvas is exactly 970 × 250 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.

Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF

View the complete 970 × 250 HTML + CSS source

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=970,height=250"><title>ClickToll 970 × 250 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:970px;height:250px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:970px;min-width:970px;max-width:970px;height:250px;min-height:250px;max-height:250px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}

.ct-scene{padding:26px 31px 31px}.ct-brand{font-size:20px}.ct-copy{font-size:53px;line-height:.98;letter-spacing:-2px;max-width:690px}.ct-bottom{position:absolute;right:32px;bottom:32px;display:flex;flex-direction:column;align-items:flex-start;border:0;gap:12px}.ct-caption{max-width:158px;font-size:13px}.ct-cta{font-size:15px;padding:15px 22px}.ct-art{width:200px;height:200px;top:-77px;right:26px;border-width:24px;opacity:.17}.ct-rainbow{height:10px}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-pink" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">GOOD ADS.
GREAT IDEAS.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MORE FOCUS.
LESS CLUTTER.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE SPACE
FOR YOUR IDEA.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>

View the exact-size animated GIF embed

<a href="https://clicktoll.com/display-advertising/">
  <img src="https://clicktoll.com/assets/banners/970x250/clicktoll-970x250-animated.gif"
       width="970" height="250"
       style="display:block;width:970px;height:250px;min-width:970px;max-width:none;flex:none;border:0"
       alt="Explore the ClickToll display advertising guide">
</a>

Where this canvas fits

A large desktop placement with sufficient width and an explicit publisher or platform specification for this format. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.

A useful way to compose the message

Use a confident split composition: a concise headline on one side and useful product or editorial imagery on the other. Preserve a clear action. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.

The mistake to avoid

Building several competing panels just because the format is large. The audience still needs one obvious idea to understand. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.

What the blank canvas includes

The download is a simple SVG at exactly 970 × 250 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.

Before you deliver

See the 728 × 90 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.

This pixel format is included in Google Ads’ uploaded display-ad specifications. Availability and delivery rules depend on the receiving platform or publisher.

320 × 50 Mobile banner Banner Guide

Tue, 15 Sep 2026 10:00:00 +0000

The smallest useful message.

Mobile banner

320 × 50

A compact mobile canvas that favors a short promise and unmistakable brand recognition.

Get the blank canvas ↓Delivery checklist ↗

320x50 exact-size example. View CSS and animated GIF versions · Download both.

Two formats. One exact canvas.

Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 320 × 50 CSS pixels; the GIF’s encoded canvas is exactly 320 × 50 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.

Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF

View the complete 320 × 50 HTML + CSS source

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=320,height=50"><title>ClickToll 320 × 50 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:320px;height:50px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:320px;min-width:320px;max-width:320px;height:50px;min-height:50px;max-height:50px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}

.ct-scene{padding:5px 7px 8px;flex-direction:row;align-items:center;gap:7px}.ct-brand{font-size:10px;letter-spacing:-.55px;width:70px;flex-shrink:0}.ct-copy{font-size:14px;line-height:1.04;letter-spacing:-.5px;flex:1}.ct-bottom{border:0;padding:0;flex-shrink:0}.ct-caption,.ct-art{display:none}.ct-cta{font-size:9px;padding:7px 7px;border-width:1px;box-shadow:2px 2px 0 #17131f}.ct-rainbow{height:4px;border-top-width:1px}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">ONE IDEA.
ONE TAP.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-lime" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">LESS NOISE.
MORE FOCUS.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE THE
TAP COUNT.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>

View the exact-size animated GIF embed

<a href="https://clicktoll.com/display-advertising/">
  <img src="https://clicktoll.com/assets/banners/320x50/clicktoll-320x50-animated.gif"
       width="320" height="50"
       style="display:block;width:320px;height:50px;min-width:320px;max-width:none;flex:none;border:0"
       alt="Explore the ClickToll display advertising guide">
</a>

Where this canvas fits

A mobile slot specifically configured for this size. Review how it sits beside surrounding content and controls. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.

A useful way to compose the message

Start at the intended display size. Use only essential words, a clear brand cue, and an honest destination label when space permits. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.

The mistake to avoid

Miniaturizing a desktop composition. Rebuild the message rather than making the type progressively smaller. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.

What the blank canvas includes

The download is a simple SVG at exactly 320 × 50 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.

Before you deliver

See the 320 × 100 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.

This pixel format is included in Google Ads’ uploaded display-ad specifications. Availability and delivery rules depend on the receiving platform or publisher.

320 × 100 Large mobile banner Banner Guide

Tue, 15 Sep 2026 10:00:00 +0000

Small screen. More breathing room.

Large mobile banner

320 × 100

A taller mobile banner with space to separate the main message from its supporting brand and action.

Get the blank canvas ↓Delivery checklist ↗

320x100 exact-size example. View CSS and animated GIF versions · Download both.

Two formats. One exact canvas.

Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 320 × 100 CSS pixels; the GIF’s encoded canvas is exactly 320 × 100 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.

Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF

View the complete 320 × 100 HTML + CSS source

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=320,height=100"><title>ClickToll 320 × 100 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:320px;height:100px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:320px;min-width:320px;max-width:320px;height:100px;min-height:100px;max-height:100px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}

.ct-scene{padding:9px 11px 13px}.ct-brand{font-size:10px}.ct-copy{font-size:24px;line-height:1.02;letter-spacing:-1px;max-width:225px}.ct-bottom{position:absolute;right:12px;bottom:16px;border:0;padding:0}.ct-caption{display:none}.ct-cta{font-size:9px;padding:8px 8px}.ct-art{width:90px;height:90px;right:-30px;top:-20px;border-width:10px}.ct-rainbow{height:5px}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-pink" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE THE
TAP COUNT.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">SMALL SPACE.
CLEAR IDEA.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">YOUR NEXT
GOOD IDEA.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>

View the exact-size animated GIF embed

<a href="https://clicktoll.com/display-advertising/">
  <img src="https://clicktoll.com/assets/banners/320x100/clicktoll-320x100-animated.gif"
       width="320" height="100"
       style="display:block;width:320px;height:100px;min-width:320px;max-width:none;flex:none;border:0"
       alt="Explore the ClickToll display advertising guide">
</a>

Where this canvas fits

Mobile inventory that supports a taller banner and can reserve the correct space without obscuring surrounding content. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.

A useful way to compose the message

Use the second line or extra height to clarify the promise. Keep the action visible and review the full destination on a phone. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.

The mistake to avoid

Filling the additional space with all the details removed from a desktop version. Keep the mobile message deliberately focused. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.

What the blank canvas includes

The download is a simple SVG at exactly 320 × 100 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.

Before you deliver

See the 320 × 50 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.

This pixel format is included in Google Ads’ uploaded display-ad specifications. Availability and delivery rules depend on the receiving platform or publisher.

300 × 50 Compact mobile banner Banner Guide

Tue, 15 Sep 2026 10:00:00 +0000

Keep only what matters.

Compact mobile banner

300 × 50

A narrow mobile strip for a very concise message, delivered at the exact requested dimensions.

Get the blank canvas ↓Delivery checklist ↗

300x50 exact-size example. View CSS and animated GIF versions · Download both.

Two formats. One exact canvas.

Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 300 × 50 CSS pixels; the GIF’s encoded canvas is exactly 300 × 50 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.

Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF

View the complete 300 × 50 HTML + CSS source

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=300,height=50"><title>ClickToll 300 × 50 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:300px;height:50px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:300px;min-width:300px;max-width:300px;height:50px;min-height:50px;max-height:50px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}

.ct-scene{padding:5px 7px 8px;flex-direction:row;align-items:center;gap:6px}.ct-brand{font-size:9px;letter-spacing:-.5px;width:64px;flex-shrink:0}.ct-copy{font-size:12px;line-height:1.05;letter-spacing:-.35px;flex:1}.ct-bottom{border:0;padding:0;flex-shrink:0}.ct-caption,.ct-art{display:none}.ct-cta{font-size:8px;padding:7px 5px;border-width:1px;box-shadow:2px 2px 0 #17131f}.ct-rainbow{height:4px;border-top-width:1px}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-lime" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">LESS CLUTTER.
MORE CLARITY.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">ONE MESSAGE.
ONE NEXT STEP.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">SMALL SPACE.
BIG IDEA.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>

View the exact-size animated GIF embed

<a href="https://clicktoll.com/display-advertising/">
  <img src="https://clicktoll.com/assets/banners/300x50/clicktoll-300x50-animated.gif"
       width="300" height="50"
       style="display:block;width:300px;height:50px;min-width:300px;max-width:none;flex:none;border:0"
       alt="Explore the ClickToll display advertising guide">
</a>

Where this canvas fits

Mobile placements configured for a 300-pixel-wide creative, not as an automatic substitute for a 320-pixel request. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.

A useful way to compose the message

Check the longest word first and leave a clear margin. Prefer a single idea that can be recognized without stopping to zoom. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.

The mistake to avoid

Stretching the file to 320 × 50. A small width change can distort type and does not satisfy an exact-size delivery request. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.

What the blank canvas includes

The download is a simple SVG at exactly 300 × 50 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.

Before you deliver

See the 320 × 50 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.

This pixel format is included in Google Ads’ uploaded display-ad specifications. Availability and delivery rules depend on the receiving platform or publisher.

Display advertising, with a clear purpose.

Tue, 15 Sep 2026 10:00:00 +0000

Campaign fundamentals / Start here

Display advertising, with a clear purpose.

Connect an audience, an offer, a creative format, and a useful next step. Build the campaign around the decision you need to make.

Start with a job, not a channel

Display advertising puts a visual message into a page, app, or other supported environment. The useful planning question is not simply whether you can buy space. It is whether the intended audience, context, and offer fit together.

Write a campaign objective that describes a meaningful outcome. A resource campaign might invite a relevant audience to inspect a sample. A lead campaign needs a definition of a qualified inquiry. A purchase campaign needs a clear order and revenue definition. Keep those outcomes separate instead of calling every interaction a conversion.

Choose between finished creative and an asset set

A fixed-size image preserves a specific composition. An HTML creative can provide structured layout or approved interaction. An asset-based ad supplies elements that the platform assembles. Google’s responsive display creative guidance explains that asset-based approach.

Choose the deliverable that matches your actual inventory and production needs. Do not assume that a square social image, a fixed-size banner, and a responsive asset pack are interchangeable. Start with the format library and confirm the receiving requirements before making exports.

Build a practical creative brief

Give the designer an audience, one useful promise, a reason to believe it, a destination, and the intended action. Add required branding and any conditions that affect the claim. A concrete brief is more useful than asking for a banner that is simply exciting, disruptive, or premium.

Work on the message and the destination together. If the banner invites visitors to see a comparison, the page should make that comparison recognizable. If the next step requires a conversation, describe the commitment honestly instead of disguising it as instant access to an unrelated resource.

Keep buying choices connected to context

Direct publisher placements and programmatic transactions create different operational paths. Ask who represents the inventory, who approves the creative, who reports delivery, and who handles problems. Our adtech overview explains the roles without treating every impression as an identical auction.

Avoid evaluating a placement on price alone. Review audience fit, the surrounding content, creative eligibility, measurement options, and the commercial terms. A cheap opportunity is not automatically a useful one.

Make measurement part of the brief

Choose a primary outcome, supporting signals, and a source of truth for each stage. Track creative versions and campaign destinations consistently. Record the normal time needed for an inquiry or purchase to mature before comparing recent activity with older campaigns.

Use the measurement field note to distinguish CPM, CTR, CPC, CPA, and ROAS. These calculations describe different relationships. None independently tells the whole story of audience relevance or business value.

A manageable first campaign

Start with a clear offer, a verified placement set, and a few deliberate creative versions. Check the final files and published links, then separate operational troubleshooting from a performance verdict. A campaign that has not delivered correctly cannot yet answer a question about creative quality.

Keep a decision record after the review. Describe what happened, what remains uncertain, and the next focused change. Read the beginner’s field note for a full brief-to-launch workflow.

Behind the banner. Beyond the acronyms.

Tue, 15 Sep 2026 10:00:00 +0000

Adtech / The systems desk

Behind the banner. Beyond the acronyms.

Understand the buyer, seller, auction, delivery, and reporting layers that connect a campaign to an advertising opportunity.

Follow one advertising opportunity

A publisher has a place where an ad may appear. An advertiser has a message and a campaign objective. Systems help connect those sides, check eligibility, arrange the transaction, and deliver the creative. Some inventory is sold directly, some through negotiated deals, and some through auctions.

Treat this as a working model, not a claim that every opportunity follows one identical path. Commercial products can combine roles, and a campaign’s actual setup may include additional systems.

Know the principal roles

The advertiser defines the campaign. A demand-side platform supports the buying side. A supply-side platform helps publishers make inventory available. An exchange supplies marketplace functions, and an ad server manages creative decisions or delivery. Measurement services observe particular events and report them under defined rules.

Draw a map of the actual vendors in a proposed campaign. Record who invoices the advertiser, who represents the publisher, who hosts the creative, and who owns each report. That map is more useful than assuming that a familiar acronym explains the commercial relationship.

Separate transaction from rendering

A decision to serve an ad does not guarantee that its files render correctly. The creative still needs to load, fit the placement, support the required click behavior, and satisfy the receiving environment’s rules. Use the delivery specification checklist to review these production details.

Keep approved creative versions identifiable. When an operator reports an issue, the team should be able to locate the exact package, destination, language, and approval record rather than guessing which “final” file was used.

Ask about the selling path

The IAB Tech Lab’s sellers.json documentation explains tools for identifying selling entities and the parties represented in a supply chain. Use transparency information to ask specific questions about the intermediaries involved in a purchase.

These mechanisms do not guarantee a campaign result. They help make parts of the commercial path inspectable. Ask how the buying partner validates the path, what is visible in reports, and which fees are included in the stated media cost.

Keep the reports in context

A served impression, a click, a measured visit, and a purchase describe different events. Systems can also use different time zones, counting rules, and attribution settings. Keep those definitions visible when reconciling reports.

For a lead campaign, connect early actions to qualification and follow-up rather than presenting all submitted inquiries as completed business value. The lead-generation guide shows how to define those stages.

Build the simplest useful stack

Start with the campaign’s requirements: audience approach, accepted formats, buying path, measurement questions, privacy responsibilities, and operational support. Add a capability because it meets a requirement, not because its name sounds sophisticated.

The adtech field note follows the process in more detail. For unfamiliar terms, use the advertising glossary and keep asking what each system actually does in your campaign.

Useful offers. Clear connections.

Tue, 15 Sep 2026 10:00:00 +0000

Affiliate marketing / The partner desk

Useful offers. Clear connections.

Build affiliate banner placements around audience relevance, understandable commercial relationships, approved creative, and realistic reporting.

Begin with the audience, not the commission

An affiliate arrangement can reward a publisher for a qualifying action, but the trigger and conditions are defined by the program. A large advertised commission does not make an offer relevant to the page where it appears.

Identify the reader’s task and explain how the offer supports it. Inspect the merchant’s destination, product details, major conditions, and customer experience before deciding to recommend it. Keep a record of why the offer belongs with the content.

Record the qualifying event, allowed traffic sources, geographic restrictions, validation process, reversal rules, payout timing, and approval contact. Check whether changes to supplied creative are permitted. Do not assume every click, submitted lead, or pending order becomes payable revenue.

Maintain a dated copy of the program instructions and keep campaign decisions tied to the applicable version. If the relationship changes, review existing placements rather than assuming previously approved assets remain appropriate indefinitely.

Make the commercial relationship understandable

A paid placement should not pretend to be an independent editorial result. Where a recommendation has a material commercial connection, communicate that relationship where it matters to the reader.

For U.S.-facing endorsements, the FTC’s affiliate and endorsement guidance discusses clear, conspicuous disclosures close to the recommendation. Review the actual mobile layout rather than relying on a statement hidden elsewhere on the site. Other markets require their own appropriate review.

Choose the placement and creative deliberately

A relevant comparison section, an end-of-guide resource area, and a sidebar serve different reading contexts. Choose a banner format that fits the available space. Preserve the creative’s proportions and inspect its normal display size before publishing.

Avoid accidental-click designs that imitate a system button or compulsory navigation. Keep the offer, brand, and optional destination apparent. When a merchant requires approved assets, use those assets and maintain an expiry plan for time-limited promotions.

Evaluate approved outcomes

Separate outbound clicks, merchant-reported actions, approved transactions, reversals, and paid commissions. The stages may not appear at the same time. Use settled values for decisions that depend on actual revenue, and label incomplete periods clearly.

Include the costs of production, distribution where permitted, and ongoing maintenance. A high pending commission figure is not the same as a profitable placement. The affiliate field note includes a hypothetical example to make the arithmetic transparent.

Keep the relationship maintained

Assign an owner to check destinations, expired offers, creative approvals, disclosure placement, and payment questions. Remove a banner when the offer no longer fits the audience or the destination fails to support the recommendation.

ClickToll’s outbound reference links are editorial resources, not commissioned affiliate links. The guidance here helps you plan your own relationships without treating a banner as a substitute for a clear agreement and a useful customer experience.

Better leads start before the click.

Tue, 15 Sep 2026 10:00:00 +0000

Lead generation / The next-step desk

Better leads start before the click.

Connect the advertising promise to a useful destination, a consistent qualification rule, and a follow-up process that is ready for the inquiry.

Define what the business actually needs

A lead campaign needs more than an action counter. Decide what makes an inquiry relevant and who will apply that definition. A submitted request, a qualified lead, an accepted opportunity, and a completed sale are different stages.

Write an entry rule for each stage and maintain useful rejection reasons. This helps distinguish a targeting problem from an unclear offer or a missed follow-up. A vague “lead” label can hide all three.

Match the offer to the visitor’s readiness

An unfamiliar audience may be ready to see a useful example before discussing a purchase. A more informed visitor may want a consultation. Describe the commitment honestly and choose a next step that fits the actual offer.

Do not collect information merely because a form could be added. A public sample may serve the visitor better than an unexplained gate. Where contact information is requested in your own campaign, explain the purpose and expected response clearly.

Carry the promise onto the destination

Use the same recognizable offer in the banner and the landing page. A specific action such as seeing a sample should lead to that sample, not a generic destination that forces the visitor to start over.

Review the page on a phone, inspect its supporting evidence, and check that the main action works. Read the landing-page field note for a structured promise-to-page review.

Build the handoff before buying traffic

Assign an owner to new inquiries, define routing, and prepare a response that acknowledges the visitor’s actual request. Decide how duplicates, out-of-area requests, and owner absences will be handled.

Keep a stage history so that the campaign review can separate weak traffic from a good inquiry that was never contacted. Additional spending cannot repair a missing operational handoff.

Connect later events thoughtfully

Google’s offline conversion overview describes ways to relate later outcomes to advertising interactions. Any implementation needs clear event definitions, suitable identifiers, and a reviewed information flow.

Do not put customer details into campaign URLs. Decide what information is needed, who receives it, and how it will be handled before using a matching or upload feature. Technical availability does not replace an appropriate data-handling decision.

Compare the right cost measures

In a hypothetical campaign, $1,200 divided by 60 inquiries gives a $20 cost per inquiry. If 15 inquiries qualify, the cost per qualified lead is $80. The second number answers a different question from the first; neither is a universal benchmark.

Continue through opportunities and sales when the normal business cycle provides enough information. Keep incomplete outcomes visible, then choose one focused improvement to the weakest confirmed step. The full lead-generation field note explains the complete workflow.

Specs before pixels.

Tue, 15 Sep 2026 10:00:00 +0000

Delivery / The production checklist

Specs before pixels.

Check the canvas, file type, package weight, motion behavior, and destination requirements before handing off advertising creative.

The receiving placement sets the rules

A familiar banner dimension does not create one universal upload specification. Confirm the requirements for the platform, publisher, campaign type, and creative format you are actually using. Keep that approved specification with the production brief.

The values below are a platform-specific reference, not limits applied to every ad environment. Google’s uploaded display-ad specifications distinguish static or animated image files from HTML5 packages. Consult the receiving documentation again at handoff.

Google Ads uploaded display creatives — format-specific reference
Deliverable	Published limit	What to review
GIF, JPG, PNG image ad	150 KB maximum	Accepted dimensions and the actual exported file.
Animated GIF	30 seconds maximum; below 5 frames per second	All looping stops within the total duration limit.
HTML5 creative ZIP	600 KB or smaller	Account eligibility, package structure, permitted assets, and click behavior.

Keep five requirements separate

Record the exact canvas, accepted file type, permitted weight, motion behavior, and click implementation. A successful image preview does not confirm all five. Inspect the final export or ZIP instead of assuming the design tool’s estimate matches the delivered asset.

Review a static image

Check width, height, file extension, actual byte size, spelling, line breaks, and the approved destination. Inspect at normal display size on the intended device. Make sure required conditions remain readable after compression.

Review an HTML creative package

Verify that the primary HTML file, styles, scripts, and referenced assets are included as required by the recipient. Review permitted external dependencies, declared dimensions, click handling, and any account eligibility requirements. A pure CSS illustration on a website is not automatically an accepted ad package.

Review animation deliberately

Know whether the format permits motion, how duration is counted, and what must happen when a loop ends. Design a useful final frame and provide a static version where the workflow needs it. Avoid relying on motion to communicate essential information.

Create an accountable handoff

Record the campaign, placement, creative version, format, language, destination, approval owner, and final file. Archive the package that was delivered, not only the source design. The launch checklist helps connect these details to the rest of the campaign.

Understand fixed and flexible sizing

The IAB Tech Lab portfolio guidance includes aspect-ratio-based flexible formats. The ClickToll size library focuses on nine practical fixed-size references. Confirm which deliverable your recipient expects instead of treating the two approaches as interchangeable.

CSS Ad Units & Editable Banner Example

Tue, 15 Sep 2026 10:00:00 +0000

The creative lab / CSS ad units

A tiny canvas. A useful experiment.

Nine fixed-size CSS banner examples, each with a matching animated GIF. Inspect the editable HTML and CSS, compare both formats, and download the exact canvas you need.

Nine sizes / Two real formats

Same canvas.
CSS + animated GIF.

Every example below is displayed at its exact pixel dimensions. Switch between CSS and GIF, then press Play. Both versions use the same three-scene creative and finish after 18 seconds.

Get all 9 sizes · CSS + GIF ↓

Medium rectangle

300 × 250

300x250 exact-size example. View CSS and animated GIF versions · Download both.

A near-square composition for a clear headline, a recognizable visual, and one next step.

Size guide + source code ↗

Large rectangle

336 × 280

336x280 exact-size example. View CSS and animated GIF versions · Download both.

A slightly larger rectangular composition for an offer that needs a little more breathing room.

Size guide + source code ↗

Leaderboard

728 × 90

728x90 exact-size example. View CSS and animated GIF versions · Download both.

A wide, shallow canvas that calls for concise copy and a deliberate left-to-right reading order.

Size guide + source code ↗

Wide skyscraper

160 × 600

160x600 exact-size example. View CSS and animated GIF versions · Download both.

A tall, narrow canvas for short lines, strong contrast, and a readable vertical hierarchy.

Size guide + source code ↗

Half page

300 × 600

300x600 exact-size example. View CSS and animated GIF versions · Download both.

A roomier vertical format for a composed sequence of brand, promise, proof, and action.

Size guide + source code ↗

Billboard

970 × 250

970x250 exact-size example. View CSS and animated GIF versions · Download both.

A broad, substantial canvas for a short headline, one visual idea, and a clearly signposted destination.

Size guide + source code ↗

Mobile banner

320 × 50

320x50 exact-size example. View CSS and animated GIF versions · Download both.

A compact mobile canvas that favors a short promise and unmistakable brand recognition.

Size guide + source code ↗

Compact mobile banner

300 × 50

300x50 exact-size example. View CSS and animated GIF versions · Download both.

A narrow mobile strip for a very concise message, delivered at the exact requested dimensions.

Size guide + source code ↗

Large mobile banner

320 × 100

320x100 exact-size example. View CSS and animated GIF versions · Download both.

A taller mobile banner with space to separate the main message from its supporting brand and action.

Size guide + source code ↗

Understand the structure

Each standalone example uses one linked container with an explicit width and height, border-box sizing, and three absolutely positioned CSS scenes. The border stays inside the declared dimensions. CSS keyframes provide the animation without an animation library; the viewer controls only start or stop it.

Make the destination explicit

Each creative links to the ClickToll display advertising guide. The link has a meaningful accessible name that is independent of the animation. Change the destination, accessible name, and visible action together when adapting the source.

Inspect the code

Open any size guide for its complete copyable HTML/CSS source and animated GIF embed. Every format also has a standalone HTML file, a CSS stylesheet, a text source file, and a combined download. These examples have no remote font, image, or animation-library dependencies.

View the 300 × 250 HTML + CSS source

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=300,height=250"><title>ClickToll 300 × 250 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:300px;height:250px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:300px;min-width:300px;max-width:300px;height:250px;min-height:250px;max-height:250px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}


</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-lime" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE IT
MATTER.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">ONE CLEAR
PROMISE.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">A BETTER
NEXT STEP.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>

Adapt the idea, not just the dimensions

A rectangle’s composition should not simply be squashed into a leaderboard. Revisit the headline length, hierarchy, and action for each canvas. Compare the wide and mobile formats before building the next version.

Prepare a production deliverable separately

This is an editable web prototype. A receiving ad platform may require a specific package structure, dimensions, click handling, asset policy, or account eligibility. Use the specifications guide to check those requirements before treating the example as a campaign upload.

Explore controlled motion

Every CSS example has a matching real GIF exported from the same three creative scenes. Each scene lasts two seconds and the sequence repeats three times, ending after 18 seconds. Play restarts the selected version; Stop displays its final frame. Reduced-motion preferences keep previews still.

Animated Banner Ideas & Controlled Creative Demo

Tue, 15 Sep 2026 10:00:00 +0000

The creative lab / Animated ad ideas

A little motion. A clear ending.

Real animated GIF banner examples in all nine sizes, paired with editable CSS versions. Inspect native-size units, control playback, and download each file at its exact dimensions.

Nine sizes / Two real formats

Same canvas.
CSS + animated GIF.

Every example below is displayed at its exact pixel dimensions. Switch between CSS and GIF, then press Play. Both versions use the same three-scene creative and finish after 18 seconds.

Get all 9 sizes · CSS + GIF ↓

Medium rectangle

300 × 250

300x250 exact-size example. View CSS and animated GIF versions · Download both.

A near-square composition for a clear headline, a recognizable visual, and one next step.

Size guide + source code ↗

Large rectangle

336 × 280

336x280 exact-size example. View CSS and animated GIF versions · Download both.

A slightly larger rectangular composition for an offer that needs a little more breathing room.

Size guide + source code ↗

Leaderboard

728 × 90

728x90 exact-size example. View CSS and animated GIF versions · Download both.

A wide, shallow canvas that calls for concise copy and a deliberate left-to-right reading order.

Size guide + source code ↗

Wide skyscraper

160 × 600

160x600 exact-size example. View CSS and animated GIF versions · Download both.

A tall, narrow canvas for short lines, strong contrast, and a readable vertical hierarchy.

Size guide + source code ↗

Half page

300 × 600

300x600 exact-size example. View CSS and animated GIF versions · Download both.

A roomier vertical format for a composed sequence of brand, promise, proof, and action.

Size guide + source code ↗

Billboard

970 × 250

970x250 exact-size example. View CSS and animated GIF versions · Download both.

A broad, substantial canvas for a short headline, one visual idea, and a clearly signposted destination.

Size guide + source code ↗

Mobile banner

320 × 50

320x50 exact-size example. View CSS and animated GIF versions · Download both.

A compact mobile canvas that favors a short promise and unmistakable brand recognition.

Size guide + source code ↗

Compact mobile banner

300 × 50

300x50 exact-size example. View CSS and animated GIF versions · Download both.

A narrow mobile strip for a very concise message, delivered at the exact requested dimensions.

Size guide + source code ↗

Large mobile banner

320 × 100

320x100 exact-size example. View CSS and animated GIF versions · Download both.

A taller mobile banner with space to separate the main message from its supporting brand and action.

Size guide + source code ↗

Build the static idea first

The final frame should communicate the brand, promise, and next step without depending on the viewer having watched every earlier frame. Someone may encounter the creative partway through a sequence or use a static fallback.

Make each frame earn its place

Use a sequence to clarify one idea rather than to squeeze several unrelated claims into a small canvas. Keep the reading time practical and avoid rapid flashing or continuous distraction. Review the message at normal display size.

Download the actual GIF

These are real GIF image files, not HTML frames pretending to be GIFs. Each file’s encoded dimensions match its label, and the CSS companion uses the same-sized border box. Use the GIF download directly as an image, or adapt the HTML/CSS source for a web placement. The platform-specific delivery checklist still applies.

Check the recipient’s motion rules

Google’s uploaded display-ad specifications include specific limits for animated GIF length, looping, and frame rate. Other destinations can use different requirements. Confirm the current rule for your actual creative type instead of assuming one limit applies everywhere.

Preserve user control

The previews start still. Select CSS or Animated GIF and press Play to start an 18-second sequence. Stop replaces the animation with its final frame; playback also stops when the page is hidden. Reduced-motion preferences keep the on-page examples still, while the original GIF file remains available to download.

Use motion as a testable choice

Compare a static message with a motion concept only under a suitable campaign test design. Keep the underlying offer and destination clear, define the primary outcome, and avoid claiming that movement alone guarantees better results. The testing field note explains how to turn that idea into a focused question.

The Hoppr.Creatives GIF collection contains actual GIF creative assets. The banner-boi repository demonstrates a multi-size HTML5 workflow with GIF backup previews. These are external references; the files supplied here are original ClickToll creatives, not copies of third-party campaign artwork or repository code.

Advertising Checklists, Worksheets & References

Tue, 15 Sep 2026 10:00:00 +0000

Resources / The working desk

A better brief. A cleaner handoff.

Practical reference pages, plain-text worksheets, and blank format canvases for the work between a good idea and a published campaign.

Plain-text download

Campaign launch checklist

Review the offer, exported creative, published destination, measurement definitions, and response ownership before launch.

Download the worksheet ↓

Plain-text download

Creative brief worksheet

Start with the audience’s problem, the useful promise, the action, the placement, and the people responsible for approval.

Download the worksheet ↓

Plain-text download

Creative experiment plan

Write the hypothesis, controlled variable, primary outcome, assignment method, stopping rule, and decision record before testing.

Download the worksheet ↓

HTML / CSS / GIF download

CSS + GIF banner examples

All nine exact-size banner pairs, including standalone HTML/CSS, animated GIFs, source files, and static frames. No build step or external animation library.

Download all 9 sizes ↓

Start from the correct canvas.

Each size page includes matching CSS and animated GIF examples, editable source, and a blank SVG at the stated dimensions. Download the exact canvas and adapt the composition for your campaign.

300 × 250 ↗728 × 90 ↗160 × 600 ↗300 × 600 ↗336 × 280 ↗970 × 250 ↗320 × 50 ↗320 × 100 ↗300 × 50 ↗

Primary references

Go to the source.

Official documentation for the factual and platform-specific details behind the guides.

Creative dimensions

Google Ads uploaded display-ad specifications

Verify accepted sizes, image-file limits, GIF motion requirements, and HTML5 packaging.

Read the official reference ↗

Flexible formats

IAB Tech Lab New Ad Portfolio

Understand the distinction between fixed pixel dimensions and flexible aspect-ratio-based formats.

Read the official reference ↗

Commercial relationships

FTC endorsement guidance

Review the U.S. guidance on endorsements and material relationships, including affiliate recommendations.

Read the official reference ↗

Campaign labels

Google Analytics campaign URLs

Check the documented use of UTM parameters and campaign-source reporting.

Read the official reference ↗

Image links

W3C functional image guidance

Review meaningful text alternatives for images that provide a function or link destination.

Read the official reference ↗

Supply-chain visibility

IAB Tech Lab sellers.json

Explore how selling entities and supply-chain participants can be represented.

Read the official reference ↗

Advertising & Adtech Glossary

Tue, 15 Sep 2026 10:00:00 +0000

Glossary / Less acronym fog

The advertising glossary.

Plain-language definitions for the terms that appear in a creative brief, an adtech discussion, or a campaign report.

Ad server: A system that manages advertising decisions or creative delivery. Its exact responsibilities depend on the campaign and publisher setup.
Affiliate commission: Compensation tied to a qualifying action under an affiliate program’s terms. Pending activity, approved commissions, and paid amounts can differ.
Aspect ratio: The relationship between a canvas’s width and height. Preserving the ratio avoids stretching the design when a preview scales.
Attribution: The rules or model used to assign credit for an outcome to marketing interactions. Attribution is not automatically proof of causal impact.
Banner ad: A visual advertising unit designed for a particular placement or supported layout. Its creative, destination, and delivery requirements work together.
Call to action: The invitation to take the next step, such as seeing a sample or exploring a product. Its wording should match the actual destination.
Conversion: A recorded action defined as meaningful for a campaign. Name the action clearly; an inquiry, purchase, and qualified opportunity are different outcomes.
Conversion rate: Counted outcomes divided by a stated opportunity count, expressed as a rate. Identify whether the denominator is clicks, sessions, users, or another measure.
CPA: Cost per action or acquisition: the stated spend divided by the defined outcome count. Label the action rather than using an unexplained conversion total.
CPC: Cost per click: the stated spend divided by the reported click count. It describes cost, not the business value of each click.
CPM: Cost per thousand impressions: spend divided by impressions, multiplied by 1,000. Keep the cost definition and source of the impression count visible.
CTR: Click-through rate: clicks divided by impressions, usually expressed as a percentage. It measures click activity relative to the stated impression count.
DSP: Demand-side platform. A system used on the buying side to manage access to advertising opportunities and campaign decisions.
HTML5 creative: An advertisement delivered as structured web content rather than only a flat image. Accepted files, click handling, assets, and packaging depend on the recipient.
Impression: A counted advertising delivery or display event under the reporting system’s definition. Do not assume every impression was noticed by a person.
Landing page: The destination reached after following an ad. It should make the advertised offer and the next step recognizable.
Programmatic advertising: Advertising transactions supported by automated systems. It can include different buying arrangements rather than one identical auction path.
Qualified lead: An inquiry that meets a business’s agreed relevance criteria. The definition should be shared by the people generating and handling the inquiry.
Responsive creative: Creative designed to adapt to an allowed environment or assembled from assets. Clarify the requested deliverable rather than treating all responsive approaches as the same.
ROAS: Return on ad spend: attributed revenue divided by the stated advertising spend. It is a revenue ratio, not a complete measure of profit.
SSP: Supply-side platform. A system supporting the publisher or selling side in making advertising inventory available.
UTM parameters: Campaign labels added to a destination URL to describe referral context for a compatible measurement setup. Keep personal information out of these fields.
Viewability: A measurement of whether an ad met defined visibility conditions. Check the applicable method and threshold; this is different from attention or business value.
Creative version: An identifier tying an approved concept to its actual file, format, language, destination, and delivery record. It makes campaign changes traceable.

Go deeper in the measurement field note and adtech field note. For the official definition of click-through rate, see Google Ads’ CTR documentation.

A reference desk for the advertising web.

Tue, 15 Sep 2026 10:00:00 +0000

About / ClickToll.com

A reference desk for the advertising web.

ClickToll.com brings formats, creative ideas, adtech explanations, and practical campaign workflows into one colorful place.

Make the next decision clearer

ClickToll.com is an informational website for people who plan, design, publish, and evaluate display advertising. The site connects small creative canvases to the larger questions behind them: who is the offer for, where will it appear, what happens after the click, and how will the result be understood?

The visual language takes its cue from bold billboards and vintage advertising. The editorial approach is more deliberate: explain the terms, show the proportions, keep the assumptions visible, and give readers a useful next step.

Explore three connected desks

The format desk contains nine dedicated fixed-size references with proportion-preserving creative examples and blank SVG canvases. The creative lab adds inspectable HTML and CSS, alongside a controlled animation demonstration.

The campaign desk connects advertising fundamentals with adtech, affiliate marketing, and lead generation. The Field Notes blog develops those ideas through ten long-form articles covering planning, production, measurement, and testing.

Use examples as working methods

Creative previews are examples for studying layout and hierarchy. Worked calculations use explicitly hypothetical values to make the method understandable. They are not reported client results or universal performance targets.

Platform-specific statements link to official documentation where relevant. Specifications and program terms belong to the actual receiving platform or relationship. Use the resources page to find primary references and practical worksheets.

Read, inspect, and keep moving

You do not need an account to use the library. There is no checkout, campaign-buying service, or lead-submission form on this site. The downloadable materials are immediately accessible from their relevant pages.

The articles are credited to ClickToll.com as the publishing organization. Questions, broken-link reports, and suggested corrections can be sent through the contact page. The editorial policy explains how source-backed statements, examples, and commercial links are handled.

Banner ad A/B testing: one useful question at a time

Thu, 03 Sep 2026 10:00:00 +0000

A creative test should answer a question that matters to the next campaign decision. “Which banner looks better?” is usually too vague. “Does a specific product benefit attract more qualified inquiries than a general brand message in this placement?” is more useful because it identifies the change, the audience context, and the outcome being evaluated.

Testing does not turn uncertainty into certainty automatically. Small samples, different audiences, changing offers, and incomplete outcomes can all make a result difficult to interpret. This guide explains how to plan a focused banner experiment, keep the comparison understandable, and write a decision that respects the evidence. The emphasis is on useful learning rather than on finding a winner at any cost.

Start with a decision and a hypothesis

Write the decision the test will inform. You may need to choose a message for the next campaign, decide whether a clearer action improves qualified responses, or determine whether a visual distracts from the offer. A test without an upcoming decision can produce interesting numbers without changing anything useful.

Then write a hypothesis that explains why the variation might matter. For example: “A headline naming the specific planning problem will attract more relevant inquiries than a broad growth slogan because the intended audience can recognize its own need.” This is a proposed explanation, not an established fact.

Define what would count against the idea as well. The more specific message might reduce clicks without improving qualification. The result might be too uncertain to distinguish the versions. Include those possibilities before launch so that the team does not reinterpret every outcome as support for its preferred creative.

Change one meaningful variable at a time

Google’s experimentation guidance recommends isolating a variable and choosing success metrics before a test begins. For a banner comparison, that could mean changing the headline while keeping the offer, destination, format, and other major elements stable.

Do not call a complete redesign a headline test. If the image, color, call to action, layout, and message all change together, the comparison can still tell you something about the two complete concepts, but it cannot identify which individual change caused the difference.

Label the experiment honestly. A concept test compares packages of choices. A focused element test isolates a narrower change. Both can be useful when they answer the intended question. Confusion begins when a broad concept result is presented as proof about one small design decision.

Choose a primary outcome and sensible guardrails

Select the main outcome that connects to the campaign objective. For a lead campaign, that may be qualified inquiries rather than clicks. For a purchase campaign, it may involve completed orders or a clearly defined cost measure. Keep the definition consistent across both versions.

Choose supporting guardrails that identify unacceptable trade-offs. A variation might generate more clicks while attracting less relevant traffic, creating a misleading expectation, or producing an unusable mobile experience. Review these problems even when the primary metric appears favorable.

Avoid switching the success metric after seeing the results. When several numbers are inspected and only the best-looking one is reported, the apparent conclusion becomes less credible. The advertising metrics guide explains how to keep denominators and business meanings visible during the review.

Keep exposure as comparable as possible

Use the platform’s appropriate experimentation capability when it supports the campaign and question. Understand how traffic or users are assigned, what is kept separate, and which settings remain shared. Running two unrelated campaigns side by side is not automatically a controlled test.

Check whether the versions receive different placements, devices, audiences, schedules, or budgets. Those differences can complicate the interpretation. If an ad appears mainly on mobile and another mainly on desktop, the observed result is not solely a comparison of their words or visuals.

Record the setup so it can be reviewed later. Include the experiment identifier, campaign settings, creative versions, destination versions, and assignment method. If the platform cannot support the intended comparison cleanly, narrow the question or explicitly treat the result as observational evidence rather than a controlled experiment.

Plan duration around information, not impatience

Before launch, consider the normal volume of the primary outcome, the size of the improvement that would matter, and the time needed for outcomes to mature. A rare qualified lead requires a different plan from a common page interaction. There is no universal number of days that makes every advertising experiment reliable.

Where the decision is important, use an appropriate statistical plan and involve someone who can evaluate the assumptions. Define how uncertainty will be assessed and how repeated checking will be handled. Do not stop the test simply because one variation briefly moves ahead.

Also plan for operational limits. If the campaign cannot generate enough information to answer a narrow performance question, a structured qualitative review or a larger concept comparison may be more useful. An honest “not enough evidence” conclusion is better than a confident winner chosen from noise.

Protect the experiment from avoidable changes

Freeze the relevant offer and destination during the planned comparison where possible. Record any unavoidable change, such as a product becoming unavailable, a page repair, or a change in sales follow-up. These events may affect how the results should be interpreted.

Keep a launch checklist. Verify that both creatives are approved, that their links reach the intended destination, and that the measurement setup recognizes the versions correctly. A broken variation is an operational fault, not evidence that the other creative is more persuasive.

Assign an owner to monitor delivery and technical problems without casually editing the treatment. Separate necessary maintenance from optimization. If the experiment must be changed materially, document the reason and decide whether a new comparison is required rather than silently combining incompatible periods.

Interpret the result with its uncertainty intact

Review the primary outcome first

Review the primary outcome first, then the guardrails and context. Compare the estimated difference with the level of uncertainty and the minimum improvement that would justify action. A tiny apparent gain may not be worth additional complexity, especially when the data cannot distinguish it clearly from ordinary variation.

Inspect whether later business outcomes tell the same story as early clicks. A more attention-grabbing headline may attract curiosity without improving qualified interest. A more specific headline may draw fewer visits while producing a different mix of inquiries. The correct decision depends on the objective defined before launch.

Keep causal claims proportionate to the design. A clean randomized comparison supports a different type of conclusion from two campaigns run in different weeks. Explain what the test actually compared, what remained uncontrolled, and where the result should not be generalized.

Write a test note that the next team can use

Create a short record with the question, hypothesis, versions, assignment method, primary metric, relevant dates, outcome, uncertainty, and decision. Add screenshots and identifiers so another person can find the exact creative. Record unexpected problems rather than removing them from the story.

Distinguish a winning implementation from a reusable principle. A particular headline may work for one offer and audience without becoming a permanent rule for every banner. State the conditions under which the result is most relevant and identify the next question it raises.

Testing becomes valuable when it accumulates clear decisions instead of a folder of unexplained winners. Ask one useful question, preserve a fair comparison, allow enough information to emerge, and report what the evidence supports. A disciplined inconclusive result can improve the next campaign more than an exciting conclusion that cannot survive inspection.

Affiliate banner marketing: offers, placements, and trust

Wed, 29 Apr 2026 10:00:00 +0000

Affiliate banner advertising connects three interests: a merchant wants relevant customers, a publisher wants a useful commercial relationship, and a reader wants an offer that makes sense in the surrounding content. The banner is only the visible surface of that arrangement. The program terms, destination, disclosure, measurement, and payment rules determine whether the relationship can be managed responsibly.

Start by asking whether the offer genuinely belongs with the audience. A high advertised commission does not make an unrelated promotion useful. This guide presents a practical workflow for reviewing an affiliate offer, placing banners, keeping the commercial relationship understandable, and evaluating approved outcomes rather than optimistic headline numbers. It does not assume that every click earns money or that affiliate revenue is predictable.

Understand what triggers a commission

Read the program’s definition of an eligible action. A commission might depend on a completed purchase, an approved lead, a subscription, or another specified event. Programs can also include validation periods, exclusions, reversals, minimum payout rules, and restrictions on promotional methods.

Build a summary before publishing anything. Record the qualifying event, permitted traffic sources, geographic limits, attribution terms, payment timing, and the contact for disputes. Note whether existing customers, canceled orders, duplicate leads, or discounted products are treated differently. Keep a dated copy of the agreement or the relevant program instructions.

Then describe the arrangement in ordinary language. If you cannot explain when a sale becomes payable and when it might be reversed, you are not ready to forecast the campaign. A banner can attract interest while the underlying transaction still fails to qualify under the merchant’s rules.

Match the offer to an actual reader need

Consider what the person is trying to accomplish on the page. A guide to choosing a bookkeeping workflow may provide context for a relevant software comparison. An unrelated high-commission product may interrupt the task without adding useful information. Relevance is a planning judgment that should be tested against the real audience, not assumed from a broad demographic label.

Inspect the merchant’s destination before recommending it. Check that the product, availability, price presentation, and major conditions match the banner. Look for an understandable description of what the customer receives and what happens after the click. A publisher’s credibility can be affected by the destination even when the publisher does not control it.

Keep a record of why the offer was selected. This makes later review more disciplined. “It solves this specific reader problem” is a better starting explanation than “the commission looked high.”

Separate advertising from editorial judgment

Decide how commercial placements relate to the surrounding content. A clearly labeled advertisement should not be disguised as a neutral editorial recommendation. A recommendation influenced by a material commercial relationship needs to make that relationship understandable to the reader.

The FTC’s endorsement guidance explains that affiliate relationships connected to endorsements should be disclosed clearly and conspicuously. It also warns that readers may not understand the label “affiliate link” by itself. In a U.S.-facing recommendation, describe the commission relationship plainly and close to the relevant content; assess other markets under their applicable requirements.

Treat disclosure as part of the page’s information design. A statement that is technically present but separated from the recommendation by several screens may not communicate the relationship when it matters. Review the actual mobile page, including how the banner and nearby explanation appear together.

Choose placements that respect the reading task

Place the banner where the offer connects naturally to the topic without obstructing the content. A comparison section, an end-of-guide resource area, or an appropriately labeled sidebar can each serve a different purpose. None is a universal winner. The correct choice depends on the page, audience, device, and commercial arrangement.

Use the banner size library to select a canvas that fits the available space. Do not squeeze a large merchant creative into a smaller slot simply because it exists in the affiliate dashboard. Preserve its proportions and check readability, or request an approved alternative that matches the placement.

Avoid making the ad resemble a required navigation step or a system control. The reader should understand that choosing the offer is optional. A placement that produces accidental clicks may inflate a shallow metric while creating a poor experience and unreliable evidence about genuine demand.

Keep the creative within approved claims

Use approved assets when the program requires them, and check whether editing is permitted. A merchant may restrict changes to prices, trademarks, claims, or promotional language. Even where customization is allowed, do not add a performance promise, review score, or urgency statement that you cannot support.

Assign one person to verify offers before launch and during the placement’s life. A banner with a time-limited promotion needs an expiry plan. A product that becomes unavailable needs a replacement or removal decision. Old creative can remain visible long after the team has forgotten why it was published.

Maintain a compact asset register containing the creative identifier, size, destination, program, page location, approval status, and review date. A disciplined register is particularly useful when the same offer appears across several articles or when multiple editors can update the site.

Track the path without hiding its limits

Where the program supports them, use its approved sub-identifiers or placement labels to distinguish the sources of referrals. Keep the labels descriptive and free of personal information. Do not add parameters that break the merchant’s tracking or conflict with the program’s instructions.

Compare the stages separately: outbound clicks, merchant-reported actions, approved actions, reversals, and paid commissions. A click count from your site and a transaction count from the program describe different events. Timing, attribution rules, validation, and measurement gaps can all complicate a simple one-to-one comparison.

Document the reporting definitions alongside the numbers. The campaign measurement article provides a framework for choosing denominators and keeping financial outcomes distinct from early engagement. Use the program’s approved and paid values for the decisions that depend on actual commission revenue.

Evaluate economics using a worked scenario

Distinguish approved revenue from forecasts

Imagine an illustrative placement with 1,000 outbound clicks, 20 approved purchases, and a paid commission of $15 per purchase. The commission total would be $300, or $0.30 per outbound click. These are invented numbers for explaining the arithmetic, not a forecast or a benchmark for your niche.

Now add the costs you actually control: content production, creative work, paid distribution where permitted, maintenance, and administrative time. If the merchant later reverses some purchases, the final revenue changes. A report based only on pending commissions can make a placement look stronger than its settled economics.

Use scenarios to identify which assumptions matter most. A higher commission can be offset by lower approval rates, a poor audience fit, or expensive acquisition. Compare realistic combinations rather than selecting the most favorable assumption in every column and calling the result a plan.

Set a regular review that covers offer relevance, customer experience, disclosure placement, approved creative, broken destinations, reporting discrepancies, and payment status. Keep an escalation path for problems. A useful affiliate relationship should be understandable and maintainable, not merely easy to start.

Record why a placement is continued, revised, or removed. If the audience has changed or the merchant’s offer no longer fits the page, a previously reasonable banner may need to disappear. Removing an irrelevant placement is a legitimate editorial and commercial decision, not a failure to monetize every available pixel.

Affiliate marketing works best as a managed relationship between a useful recommendation, an understandable commercial arrangement, and an appropriate customer destination. Begin with relevance, communicate the relationship clearly, maintain the creative, and judge the outcome using approved evidence. The banner should support the reader’s decision rather than obscure how the publisher is paid.

Landing pages for display ads: keep the promise

Fri, 02 Jan 2026 10:00:00 +0000

A display ad makes a small promise. The landing page has to make that promise understandable, believable, and easy to act on. When the two disagree, the visitor has to decide whether the advertisement was vague, the destination is wrong, or the offer is more complicated than expected. That uncertainty is a design problem you can inspect before buying more traffic.

A strong destination does not need to be aggressive. It needs to answer the questions raised by the ad and offer a sensible next step. This guide presents a page-review framework for display campaigns, with particular attention to unfamiliar visitors and mobile use. It focuses on clarity and operational consistency rather than promising that a particular color, layout, or button will produce a universal conversion improvement.

Begin with the promise-to-page comparison

Place the finished banner next to the first screen of its destination. Underline the noun in the offer, the benefit being described, and the action being requested. Those elements should have recognizable counterparts on the page. If the banner says “See the sample,” the visitor should not have to search for a sample inside a generic company website.

Google’s ad and landing-page optimization guidance emphasizes alignment between the advertisement and its destination. Use that alignment as a practical review question: does the destination actually deliver what this creative leads a reasonable visitor to expect?

Keep the comparison specific. Matching colors can help recognition, but visual similarity does not repair an offer mismatch. The product, resource, eligibility, price presentation, and next step need to agree. Check the exported creative and live page rather than an outdated design file.

Orient a visitor who knows nothing about you

Assume the person has not read your homepage, seen a product demonstration, or encountered the brand before. State what the offer is and who it serves. Replace internal terminology with language that helps the visitor understand whether the page is relevant to the problem that attracted the click.

An opening section can answer three questions: what is available, why might it be useful, and what can I do next? It does not have to answer every possible objection at once. Keep the main idea prominent, then provide supporting detail in a clear reading sequence.

Avoid using a decorative slogan as the only explanation. “A brighter way forward” may fit a brand campaign, but a new visitor still needs to know whether the page offers a publication, a service, or a software product. Pair expressive writing with a concrete description of the actual offer.

Match the action to the commitment

Different actions ask for different levels of trust. Viewing a sample, reading a comparison, requesting an estimate, and booking a consultation are not equivalent commitments. The banner and page should make that commitment apparent rather than hiding it behind a vague button label.

Choose one primary next step and make its result clear. If a manual response is required, explain that. If the action opens an email application, say so rather than making it resemble an instant online booking. If a visitor will receive a resource, confirm what the resource includes before asking for information.

A page can still provide supporting navigation. The question is whether the visitor can identify the main path without losing access to useful context. Do not remove essential information simply to create a forced funnel. Informed decisions are more valuable than actions produced by withholding basic details.

Put evidence close to the claim

A specific claim needs a specific basis. A product feature can be shown with a relevant screenshot or a clear explanation. A service scope can be described in concrete terms. A sample can demonstrate the format and depth of a resource. Use evidence that relates directly to what the visitor is being asked to believe.

Do not fill an empty section with invented customer quotes, awards, partner logos, or performance percentages. When real evidence is unavailable, narrow the claim and describe the offer honestly. A useful explanation is preferable to a persuasive-looking page that cannot support its own statements.

Review the quality of the evidence as well as its presence. A tiny screenshot with unreadable labels may be decorative rather than informative. A testimonial about a different product does not necessarily support the current offer. Make the connection visible and keep important conditions beside the relevant claim.

Make mobile use a first-class review

Try the complete path on a phone

Open the campaign URL on a phone and try the entire path. Read the first screen, find the offer, inspect supporting details, and complete the intended action where appropriate. Check that navigation does not obscure the page and that no section requires horizontal scrolling to understand basic information.

Review image weight and loading behavior as part of the production process. A large decorative asset should not prevent the visitor from finding the actual offer. Include clear dimensions for images and reserve their space so the page does not unexpectedly rearrange itself during reading.

Inspect keyboard access and focus visibility too. The page should remain understandable without precise pointer movement. Meaningful headings, readable text, descriptive links, and restrained motion improve the quality of the interaction. The mobile banner guide explains how to connect these destination checks with the small creative that starts the journey.

Remove friction without removing useful qualification

Not every additional step is bad, and not every shorter path is good. A question that helps route a specialized inquiry may be useful. A question that nobody uses adds unnecessary effort. Review every requested piece of information by asking who needs it, what decision it supports, and whether it is appropriate at this stage.

Where a campaign collects inquiries, explain what will happen next and how the information will be used. Do not disguise a sales request as a neutral download. Keep essential conditions and commercial relationships visible where they affect the visitor’s choice.

The right balance depends on the offer. A high-consideration service may require enough context to start a useful conversation. A simple public guide may not need data collection at all. Treat the design as a decision about the relationship with the visitor, not merely a way to maximize the number of completed fields.

Make the page measurable without making it intrusive

Identify the primary event that represents progress toward the campaign objective. Then separate supporting events such as reading a sample, opening a detail section, or following a contact link. Do not call every interaction a sale or combine distinct actions into an unexplained conversion total.

Use consistent campaign labels and test the exact destination links. Our UTM naming guide explains how to keep campaign references organized. Avoid putting personal information into destination parameters. Keep the measurement setup proportionate to the campaign and review any customer-data handling with the responsible team.

Record the page version used during a campaign. If the headline, offer, or primary action changes, the reporting period needs that context. Without version information, an apparent creative result may actually reflect a destination change made halfway through the test.

Review problems in the order visitors encounter them

Start with arrival. Does the URL resolve correctly? Next inspect recognition: does the page match the ad? Then review understanding, evidence, and the action. Finally inspect what happens after the action, including delivery of the promised resource or routing of an inquiry.

Ask a reviewer unfamiliar with the project to narrate what they think the page offers. Record confusion without explaining away the interface. Their uncertainty can reveal missing context that the project team no longer notices because everyone already knows the product.

Choose one focused improvement and preserve a record of the previous version. A clearer opening description, a more precise action label, or a better-positioned sample can each be tested. The goal is a landing experience that earns the next step by fulfilling the advertisement’s promise, not a page that merely looks finished in a design presentation.

UTM tracking for banner campaigns: a cleaner campaign trail

Thu, 05 Jun 2025 10:00:00 +0000

A campaign link is a small piece of infrastructure. When its labels are consistent, it helps a team connect visits with the banners, placements, and offers that introduced them. When labels are improvised, a single campaign can split into several confusing report rows, and several different campaigns can collapse into one misleading label.

UTM parameters are useful for organizing that referral context. They are not a complete identity system, a guarantee that every visit will be measured, or proof that a campaign caused a later purchase. This guide explains how to create a practical naming convention, review destinations, and maintain a campaign-link register without turning a simple tracking task into an unnecessary collection of personal information.

Understand the basic purpose of campaign parameters

Campaign parameters add descriptive labels to a destination URL. Google’s campaign URL documentation explains how UTM values can identify referring campaigns in Analytics. The labels are useful only when the destination and measurement setup actually process them as intended.

Think of the parameters as a shipping label for referral context. They can describe where the link was placed, the marketing channel, the campaign, and a creative variation. They do not explain whether the visitor liked the offer or whether a later outcome should be attributed to that interaction.

Before adopting a convention, identify the reporting questions. You may need to compare publishers, creative concepts, formats, or campaign offers. Choose labels that answer those questions without encoding every detail of the media plan into one enormous URL.

Give each field a defined job

Use utm_source to identify the referring source according to your convention, such as a publisher or partner. Use utm_medium for the channel label you have agreed to use. Use utm_campaign for a stable campaign identifier. Where supported and appropriate, use utm_content to distinguish creative or placement variations.

The important part is consistency. Do not use a publisher name in the source field for one campaign and a creative concept in the same field for another. A field that changes meaning makes cross-campaign analysis difficult even when every individual URL is technically valid.

Write a short dictionary with allowed patterns and examples. Decide how you will represent spaces, capitalization, language, offer names, and versions. A lower-case, hyphen-separated convention is a straightforward organizational choice. Whatever you choose, use it deliberately and document exceptions rather than inventing new patterns under deadline pressure.

Build a compact campaign-link register

Create one row per approved destination variation. Record the base destination, source, medium, campaign, content label, placement, creative identifier, owner, and review status. Keep the final assembled URL in the same record. This gives reviewers a complete view of what will actually be used.

A useful example might identify a publisher, display channel, autumn sample campaign, and a rectangle creative version. These are fictional planning labels, not actual traffic records. The register should be detailed enough that a teammate can understand the link without guessing what a cryptic abbreviation means.

Keep the campaign identifier stable while versions change where necessary. A new creative variant usually needs a distinct creative label, not an unrelated campaign name. Conversely, a materially different offer may deserve a separate campaign record so that later reporting does not combine unlike activity.

Assemble URLs without damaging the destination

Inspect the complete address

Start with the final intended page. Check whether it already contains a query string, whether the destination expects existing parameters, and whether a fragment identifies a section on the page. Use a reliable URL-building process that encodes values correctly instead of manually concatenating uncertain punctuation.

Inspect the finished result for accidental spaces, duplicate parameter names, missing separators, and copied tracking values from a different campaign. A URL can look plausible in a document while sending a visitor to the wrong offer or carrying the wrong campaign identity.

Avoid changing the destination path merely to make the label look cleaner. The visitor experience takes priority. When a campaign moves to a new page, update the register and recheck the actual link rather than assuming an old redirect will preserve every part of the intended experience indefinitely.

Keep personal information out of campaign labels

Do not put names, email addresses, phone numbers, customer account identifiers, or other personal information into UTM fields. These parameters are visible in the URL and can appear in logs, analytics records, copied links, and other systems. Campaign organization does not require turning the address bar into a customer record.

Use labels for campaigns and placements, not individuals. Where a business needs a separate customer-data or conversion-matching process, that process should be designed and reviewed on its own terms. Do not improvise it inside a field meant to describe a marketing source.

Review exported spreadsheets and shared documents for the same issue. A campaign register should be safe to share with the people who need to launch and inspect creative. Limiting it to operational campaign metadata makes that collaboration simpler and reduces the risk of exposing unrelated information.

Test the published path, not only the constructed link

Open the URL from the environment where it will be used, when feasible. Follow any redirects and confirm that the destination, offer, and campaign labels behave as expected. Check both a desktop and a phone. A link can be correct in the register but incorrectly pasted into the final creative or buying platform.

Coordinate measurement testing with the person responsible for analytics. Use the approved testing and debugging process for that implementation, and distinguish test activity from production reporting where possible. A successful page load does not by itself prove that a campaign label was recorded correctly.

Keep a review record containing the final destination, creative version, date of the check, and any known limitations. Our campaign launch checklist brings link checks together with creative approval, destination review, and ownership of the primary business outcome.

Reserve campaign tagging for the referral contexts covered by your measurement plan. Adding acquisition-style campaign labels to ordinary links between pages on your own site can make reports more difficult to interpret. For internal promotions, choose an appropriate event or content-reporting approach with the analytics owner rather than assuming every link needs UTM parameters.

Keep manually tagged campaigns distinct from any platform auto-tagging or integration behavior. Understand which identifiers are being added and how the destination reporting setup interprets them. Do not strip or overwrite parameters casually because they look unfamiliar.

When two systems disagree, inspect definitions before rewriting every URL. Compare campaign labels, attribution settings, time ranges, redirects, and counting methods. A clean naming convention helps this investigation, but it cannot eliminate differences between systems that observe or attribute events differently.

Maintain the convention as a shared operating habit

Appoint an owner for the naming dictionary and register. Review new campaign patterns before launch, retire outdated links when offers change, and preserve enough history to interpret older reports. Keep the process small enough that people will actually use it rather than bypassing it under pressure.

At the end of a campaign, record which labels were useful and which created confusion. Remove unnecessary complexity from the next version. A convention that explains source, channel, offer, and creative is often more valuable than a long code that only one analyst understands.

Reliable tracking starts with reliable organization. Define the fields, assemble the destination carefully, exclude personal information, test the published path, and keep a shared record. Then use the resulting campaign context alongside real outcomes, not as a substitute for understanding whether the advertising served the intended audience.

Adtech explained: what happens behind a banner ad

Mon, 27 Jan 2025 10:00:00 +0000

Adtech becomes easier to understand when you follow one advertising opportunity instead of memorizing a wall of acronyms. A publisher has space for an ad. An advertiser has a message and a reason to reach an audience. Between those two sides, systems decide whether a creative is eligible, whether a purchase should happen, how the creative will be delivered, and what can be measured afterward.

The path below is a simplified model of programmatic display advertising. Real arrangements differ: some inventory is sold directly, some is covered by negotiated deals, and some enters an auction. A diagram is useful when it helps you ask better operational questions. It becomes misleading when it suggests every impression follows one identical route or that technical complexity is itself evidence of campaign quality.

Separate the buyer, seller, and delivery roles

The advertiser sets the campaign objective, budget, audience approach, and acceptable creative. A demand-side platform, commonly shortened to DSP, helps buyers manage access to advertising opportunities. On the publisher side, a supply-side platform, or SSP, helps make inventory available to buyers. An exchange provides a marketplace function, although commercial products can combine several roles.

An ad server manages decisions and delivery associated with creative placements. Measurement and verification services may provide additional information about delivery, context, or reported outcomes. These labels describe functions, not a guarantee that each function belongs to a different company.

When evaluating a proposed campaign, draw a simple map of who does what. Identify who invoices the buyer, who represents the publisher, who hosts the creative, and who produces each report. This is more useful than assuming every vendor with a familiar acronym performs the same job in every transaction.

Start with an advertising opportunity

Imagine a publisher page that contains a defined ad slot. When that slot becomes available, the advertising system needs enough information to decide what can appear there. The request can include characteristics such as the placement’s dimensions, supported creative types, page or app context, and other signals permitted by the environment and applicable rules.

The existence of an opportunity does not mean a person will definitely notice the resulting ad. The page may change, the slot may be outside the current view, or the creative may fail to finish loading. Keep the opportunity, the served impression, and subsequent measurement separate in your mental model.

For an advertiser, the practical question is whether the available context fits the campaign. A low-cost opportunity is not automatically useful. The placement needs to support the creative, reach an appropriate environment, and contribute to the intended outcome under the campaign’s constraints.

Understand what the auction is deciding

In an auctioned transaction, participating buyers evaluate an opportunity and may submit bids. Their decisions can depend on campaign settings, budgets, eligibility, targeting rules, and other available information. The seller’s systems apply the relevant auction and deal rules to decide what can be served.

Do not assume that the most dramatic creative wins the auction, or that every auction follows a single pricing model. Buying settings and commercial arrangements matter. A campaign can also lose access to inventory because its creative is ineligible or its budget has already been used, not because the headline is weak.

Ask a platform to distinguish delivery constraints from performance feedback. “Limited reach” is a starting point for investigation, not a complete diagnosis. The campaign operator should be able to check eligibility, targeting, available inventory, budget behavior, and approval status before recommending a wholesale creative redesign.

Follow the creative through delivery

After a decision is made, the winning or selected creative still needs to load and render. That can involve creative files, hosting, tracking references, and a controlled rendering environment. A finished image and an HTML creative have different packaging requirements even when their visible dimensions are identical.

This is why ad specifications belong in the campaign plan. Missing files, unsupported behavior, an invalid destination, or a package that exceeds the recipient’s limits can interrupt delivery. Creative quality includes the production details that allow the message to appear correctly.

Keep a stable identifier for each creative version. When a delivery report refers to an asset, the team should be able to find the approved file, destination, language, and review notes. Without that connection, a technical investigation can become a debate about which version someone remembers seeing.

Make the supply chain visible

Identify the parties in the path

Programmatic buying can involve intermediaries. The IAB Tech Lab’s sellers.json and SupplyChain explanation describes mechanisms for identifying selling entities and showing parties involved in selling or reselling an opportunity. These tools support transparency; they are not a universal promise that every impression is valuable or every report is complete.

For a practical review, ask the buying partner how it evaluates the declared sellers and the path used for a purchase. Ask which intermediaries are involved, what reporting is available, and whether the commercial relationship is understood. Do not confuse a shorter list of names with an automatically better outcome without reviewing the actual arrangement.

Document what you can verify and what remains unknown. A useful vendor discussion produces named responsibilities and inspectable records. An answer consisting only of “premium inventory” or “advanced technology” is not enough to explain where the advertising will run.

Keep delivery metrics and business outcomes distinct

An impression report describes a part of the delivery process. A click report describes another event. A conversion report depends on the conversion definition, measurement setup, and attribution rules. These are related records, not interchangeable measures of success.

For example, a software campaign may produce visits, product evaluations, inquiries, qualified opportunities, and later subscriptions. Different systems may observe different stages. The lead-generation overview shows how to organize those stages without treating every inquiry as a completed sale.

Set up a reconciliation process before a reporting disagreement becomes an emergency. Compare time zones, date ranges, identifiers, counting methods, and conversion windows. Some differences may remain because systems observe different events. Record that limitation and decide which source will govern each business decision rather than quietly selecting whichever number looks best.

Do not build a campaign plan around the assumption that every visitor can be recognized across every environment. Browser behavior, user choices, platform rules, and applicable requirements can limit what information is available. A campaign should still have a coherent audience and measurement plan when some signals are absent.

Ask what information is collected, why it is needed, who receives it, and how long it is kept. Keep personal information out of casual campaign labels and destination parameters. A more elaborate identity workflow is not automatically a better choice for a simple contextual campaign.

Assign responsibility for any implementation that handles customer information. Marketing, analytics, engineering, and privacy reviewers need to agree on the actual data flow. A vendor’s description of a feature does not replace that review. Clear responsibilities make both campaign troubleshooting and customer communication more straightforward.

Ask operational questions before buying complexity

Request a sample report and walk through a hypothetical problem. What happens when a creative is rejected? Who investigates an unexpected placement? How are invalid outcomes handled in the commercial agreement? Which fees appear in the reported media cost, and which are invoiced separately? Who can change targeting or destinations after launch?

These questions reveal whether the proposed system can support the campaign’s real needs. They also expose unnecessary complexity. A small, specific campaign may not need every available integration, audience product, or reporting layer. Choose capabilities because they answer a requirement, not because the proposal makes them sound sophisticated.

Adtech is ultimately infrastructure for connecting advertising decisions to delivery and evidence. Understand the roles, follow the creative, inspect the commercial path, and define the outcomes that matter. Then use the technology to make the campaign clearer rather than allowing the technology to become the campaign’s only explanation.

Banner advertising for beginners: from brief to launch

Sat, 11 Jan 2025 10:00:00 +0000

A banner campaign starts long before someone opens a design application. It starts with a decision about who should notice your message, what that person should understand, and what should happen next. A beautiful rectangle cannot rescue an unclear offer. Equally, a useful offer may go unnoticed when its message is squeezed into a layout that nobody can read.

This guide gives you a practical way to plan a first display campaign without treating clicks as the whole business outcome. The examples are planning exercises, not results from a live advertiser. Use them to create your own brief, choose a manageable creative set, and decide what evidence would justify another round of spending. The aim is a campaign you can explain and improve, not a complicated dashboard that hides an unanswered question.

Give the campaign one clear job

Write a sentence that joins an audience, an offer, and an action. For example: “Help independent shop owners discover our stock-planning checklist and read the sample.” That is more useful than “increase awareness and generate leads and grow revenue.” Those outcomes can be related, but they require different evidence and often different creative.

Choose a primary outcome before picking a headline. An introductory campaign might be evaluated through relevant visits and useful engagement. A consultation campaign needs a definition of a qualified inquiry. A purchase campaign needs orders, cancellations, and a sensible revenue definition. Record the secondary signals you will watch, but do not let a favorable secondary number quietly replace a disappointing primary result.

Write down what is outside the campaign’s scope as well. You might exclude existing customers, territories you cannot serve, or an audience that needs a different product. A specific brief makes it easier to reject an attractive but irrelevant placement later.

Distinguish the message from the delivery format

A fixed-size banner is a finished composition for a particular canvas. Asset-based display advertising is a different production approach: you supply components that a platform combines. Google’s responsive display creative guidance describes assets such as headlines, images, descriptions, and logos. Those components should make sense in different combinations, rather than depending on one locked layout.

Neither approach gives every campaign an automatic advantage. Choose based on the inventory you can buy, the amount of creative control you need, and the production capacity you have. A tightly art-directed launch may call for several finished banners. A broader placement plan may benefit from a well-organized asset set.

Keep the underlying promise consistent across both approaches. Someone who sees a wide banner and later a compact asset combination should encounter the same offer, even when the wording and visual hierarchy change. Our display advertising overview explains where these creative decisions fit in the wider campaign.

Build a brief that a designer can actually use

Include the audience’s immediate problem, the offer, the required brand elements, the destination, and any conditions that affect the claim. Replace vague adjectives with decisions. “Confident and clear” becomes more actionable when you add “one product image, a five-word headline, and an invitation to view the comparison.”

Provide a reason to believe the promise. That might be a visible product feature, a specific example from the resource, or an accurately described service scope. Do not invent a rating, testimonial, countdown, or certification to fill a gap in the composition. An honest concrete detail is a stronger starting point than an unsupported superlative.

Ask the designer to show the message at its intended viewing size, not only enlarged on a presentation slide. The brief should also identify the person responsible for checking the destination and the person authorized to approve claims. Those are different responsibilities, even when one small team handles both.

Choose a small, deliberate format set

Begin with the placements available in your buying plan. Then select enough shapes to learn how the message behaves across those placements. A rectangle, a wide unit, and a compact mobile format can form a useful planning exercise, but they are not a universal purchase recommendation. Your publisher or platform may offer a different set.

Use the banner size library to compare proportions. A wide unit invites a left-to-right relationship between a short message and an action. A rectangle can support a stronger visual hierarchy. A tall unit may suit a vertical sequence, provided it does not become an unreadable brochure.

Do not resize one exported image into every slot. Recompose the content, preserve the intended proportions, and check the actual file against the destination’s requirements. Keep a version register so the campaign operator can tell the approved rectangle from the abandoned draft with an almost identical filename.

Make the landing experience part of the creative

Open the banner and its destination side by side. Can a visitor immediately recognize the promised resource, product, or service? Does the action described in the ad exist on the page? Are price, eligibility, delivery, and contact expectations consistent? Fix these mismatches before writing another headline variation.

Consider the commitment you are requesting. An unfamiliar visitor may be ready to inspect a useful example but not ready to book a lengthy sales call. You can choose a lower-commitment action without pretending it is a purchase. Keep separate reporting for reading, inquiry, qualification, and sale.

For a lead campaign, decide who receives inquiries and how the response is handled. More visits will not fix an unattended inbox. The lead-generation guide connects the advertising promise to qualification and follow-up so that the click is only one step in a coherent journey.

Put a measurement plan beside the media plan

Create a simple record of campaign name, creative version, placement, destination, planned spend, and primary outcome. Use consistent campaign labels so reports can be compared. Define whether a conversion means one event, one person, one account, or one completed order. Ambiguity here will be amplified when numbers move between tools.

Write down a decision rule before launch. For instance, you may decide to review delivery and technical errors first, then compare qualified outcomes only after allowing the normal response cycle to complete. This is a planning discipline, not a promise that a fixed number of days will produce a reliable result.

Give reporting uncertainty a place in the review. Missing consent, blocked measurement, inconsistent identifiers, and different attribution settings can create gaps. A campaign can be worth improving even when every system does not agree, but the disagreement should be understood rather than concealed.

Run a quiet launch check

Inspect the published version

Inspect the real destination on a phone and a desktop. Follow the published link, not the URL pasted into a planning document. Check for redirects, unavailable offers, obscured content, missing images, and a broken primary action. Review spelling and cropping on the exported files. Confirm that the right version has been assigned to the right placement.

Keep the first operational review separate from the performance verdict. An ad that has not been approved, an unavailable placement, and a campaign with disappointing qualified outcomes are three different problems. Establish that the campaign can deliver correctly before interpreting a small early result as a creative conclusion.

A useful launch record contains screenshots, version identifiers, destination addresses, approval notes, and the time the campaign became active. This gives the team a reference when someone later asks whether the new headline was already running during a particular reporting period.

Review the whole chain, then choose one improvement

At review time, move in order from delivery to visits to the primary business outcome. Ask whether the campaign reached the intended context, whether the creative made the offer understandable, whether the destination fulfilled the promise, and whether follow-up happened. Diagnose the weakest confirmed link rather than changing everything at once.

Record what you learned in ordinary language. “The checklist attracted relevant shop owners, but the consultation offer was unclear” is more actionable than “engagement underperformed.” Turn that observation into one next test, with a named owner and a clear comparison.

The best first campaign is not necessarily the one with the biggest number. It is the one that leaves you with a credible explanation of what happened, a reusable production process, and a defensible reason to stop, revise, or continue. Start with a clear job, connect every step, and let the next decision follow the evidence.

Mobile banner creative: small canvas, clear message

Tue, 24 Dec 2024 10:00:00 +0000

A small banner is not a large campaign poster viewed from far away. It is a separate communication problem. The audience may be reading an article, moving through an app, or using one hand while something else competes for attention. Your creative has to remain understandable without asking the viewer to pause, zoom, and interpret a miniature brochure.

The practical answer is not simply to make everything brighter. It is to decide what matters most, remove what does not survive the smaller canvas, and connect the tap to an appropriate destination. This guide offers a mobile-first review process for compact banner advertising. Use the suggestions as design hypotheses and inspect the actual placement rather than assuming that one layout will work everywhere.

Define the single useful idea

Begin with the audience’s immediate question. A shop owner may want a simpler way to plan stock. A new subscriber may want to see what a publication covers. A software buyer may want to compare a specific feature. Write the useful idea in a plain sentence before turning it into a headline.

Then remove any detail that belongs on the destination rather than in the banner. The mobile unit does not need to explain every qualification, but it must not imply an offer that the destination cannot support. Where a condition is necessary to understand the promise, simplify the claim so that both the promise and its condition can remain clear.

Ask someone who has not seen the brief to describe the banner after a normal glance. Treat confusion as a design finding, not a failure by the reviewer. If the person remembers a decorative slogan but cannot identify the offer, the visual hierarchy needs another pass.

Design the smallest version first

Start with the 320 × 50 mobile banner or the smallest format in your actual media plan. Work at its intended display size. A logo that appears delicate but attractive at four times scale can disappear when viewed normally. The same is true of light type, narrow spacing, and detailed product imagery.

Build a layout using only essential elements. Try a brand cue, a short promise, and a concise action. If those cannot fit comfortably, shorten the message rather than compressing all three. The destination can carry supporting detail; the banner needs to explain why a visitor might choose to go there.

Once the smallest composition works, expand deliberately into the 320 × 100 format. Use the extra space to improve hierarchy or show one useful visual. Do not refill it with all the copy you just removed.

Create contrast without creating chaos

Choose a dominant background and a clear text color. Then reserve an accent for the element you want people to notice next. A rainbow palette can work as a strong brand treatment, but every line of text should not compete with a separate high-energy background.

Inspect the creative in grayscale as a practical diagnostic. This does not replace a proper contrast check, but it can reveal whether hierarchy depends entirely on hue. Review the ad next to both light and dark surrounding content, because a border or edge treatment may be needed to distinguish the unit from its environment.

Keep the type system restrained. One heavy display style and one supporting style are often enough for a compact concept. Decorative lettering should not make the company name or action difficult to recognize. A memorable visual identity is useful only when the message remains readable.

Make the action honest and specific

A compact action such as “See the sample” explains a destination more clearly than an unexplained “Go.” It also helps set the expected level of commitment. “Book a demo” should not land on a generic company homepage where the visitor has to find the demo path independently.

Avoid creative that imitates a system alert, a download control, or a close button. An accidental tap is not evidence of useful interest. It creates noise in campaign reporting and can frustrate the person who encountered the ad. Make the unit look like an advertisement with an understandable destination.

For linked images, the W3C guidance on functional images explains that alternative text should communicate the function or destination. Apply that principle to the surrounding implementation when you control it, rather than describing decorative colors while leaving the actual action unnamed.

Think about motion as optional emphasis

Design a complete static message before adding animation. Someone may encounter the unit late in its sequence, use a reduced-motion setting, or see a static fallback. The brand, promise, and action should not depend on watching an entire miniature presentation.

Use motion to support hierarchy, not to create a constant contest with the surrounding content. A short transition between two useful states can be easier to understand than several flashing phrases. Check the specific delivery requirements for animation length, looping, and file size with the receiving platform or publisher.

For prototypes, our animated creative page demonstrates a controlled message sequence with play and pause controls. A web demonstration is not automatically a production ad package. Final delivery still needs the recipient’s approved format, required click behavior, and any supporting assets or fallbacks.

Check the tap-to-page transition

Review the exact destination

Open the destination on a phone using the exact campaign URL. Inspect the first visible content, the promised offer, and the next action. A dramatic campaign headline followed by an unrelated opening section forces the visitor to work out whether the tap led to the right place.

Keep the page understandable when the visitor has not read any other material about the brand. State what is being offered, who it is for, and what happens next. Make important conditions visible where they matter. Do not bury the purpose of the page beneath a large decorative block that adds no useful information.

Review practical obstacles too. Look for horizontal scrolling, menus covering the content, text that becomes tiny, and interactions that depend on precise pointer movement. A mobile campaign needs a mobile destination review, not merely a successful desktop screenshot.

Evaluate quality beyond tap volume

Before testing, define what a useful visit or lead looks like for this campaign. A tap can lead to a relevant reading session, an inquiry, an accidental departure, or no measurable outcome. These should not all be treated as equivalent evidence that a creative concept is working.

Compare the full sequence using consistent definitions. Inspect delivery, taps, destination behavior, and the primary business outcome. Keep device and placement context visible, because an apparent creative difference may actually reflect different inventory or audience exposure. Record gaps in measurement rather than filling them with confident assumptions.

For lead generation, include qualification and follow-up. A creative that attracts fewer but more relevant inquiries might serve the business better than one that produces a large number of vague requests. The conclusion depends on your economics and definitions; there is no universal conversion rate that makes that decision for you.

Use a repeatable mobile review sheet

Give each creative a version identifier and record the intended size, placement, destination, primary message, and approval owner. Capture a screenshot at normal display size. Ask a reviewer to describe the promise and expected action, then record any points of uncertainty.

Run a second pass for accessibility and behavior: legible text, meaningful link labeling where applicable, restrained motion, recognizable boundaries, and a usable destination. Inspect the exported file, not just the source design. A font substitution, unexpected crop, or compressed image can change the final result.

Finally, choose one improvement to test. You might simplify the promise, replace a vague action, or remove an image that competes with the headline. Keep a record of what stayed constant so the next review has a useful comparison. Mobile banner design becomes easier when every version starts with a clear purpose, respects its small canvas, and earns the next step honestly.

CPM, CPC, CPA, and ROAS: measure what matters

Thu, 24 Oct 2024 10:00:00 +0000

Advertising metrics become useful when every number has a definition, a denominator, and a decision attached to it. A dashboard can display impressions, clicks, conversions, revenue, and cost while still leaving the team unsure whether the campaign helped the business. The problem is often not a lack of data. It is a lack of agreement about what the data represents.

This guide explains common display-advertising calculations using one hypothetical campaign, then shows how to connect them to a review. All example values are invented for arithmetic and should not be treated as market benchmarks. The purpose is to help you ask whether a comparison is fair, whether a result is complete, and whether a metric is being used for the job it can actually perform.

Begin with a consistent example

Define the inputs before calculating

Imagine a campaign with $2,000 in media spend, 500,000 reported impressions, 1,000 reported clicks, 40 recorded purchases, and $6,000 in attributed revenue. Before calculating anything, define the reporting period, currency, time zone, attribution settings, and whether canceled orders or refunds have already been removed.

Keep the source of each number visible. Media spend may come from the buying platform, visits from analytics, and completed orders from a commerce system. These records do not necessarily count identical events. A click can occur without a successfully measured visit, and a purchase can be observed under different attribution rules.

Write down which source governs which decision. The payment record may govern settled revenue, while the platform record may govern media billing. A consistent review is more defensible than selecting whichever dashboard happens to show the most favorable number.

CPM describes the cost of reported impressions

CPM means cost per thousand impressions. Calculate it as spend divided by impressions, multiplied by 1,000. In the example, $2,000 divided by 500,000, multiplied by 1,000, produces a $4 CPM. That describes the relationship between the stated spend and the stated impression count.

It does not tell you whether the audience was relevant, whether the ad was noticed, or whether the destination was useful. A lower CPM can be attractive when the opportunities are comparable, but different placements and audiences can make a simple comparison misleading.

Ask whether all relevant costs are included. Platform fees, creative costs, verification charges, or other expenses may sit outside a headline media number. Decide whether the review needs media-only CPM or an all-in cost view, label the calculation clearly, and avoid switching definitions between campaigns.

CTR describes clicks relative to impressions

Click-through rate is clicks divided by impressions, expressed as a percentage. The example has 1,000 clicks from 500,000 impressions, giving a CTR of 0.2%. Google’s CTR definition uses that relationship between clicks and impressions.

CTR can help investigate whether a creative and placement are generating click activity. It cannot tell you by itself whether those clicks are relevant or profitable. A misleading action label could attract clicks that do not represent useful interest. A campaign designed for another objective may also need evidence beyond direct click behavior.

Compare like with like where possible. Device, placement, audience, offer, and timing can influence what the ratio means. Treat a difference as a prompt for investigation rather than automatically crediting the headline. Inspect the destination and later outcomes before deciding that the highest CTR creative should receive more budget.

CPC describes the cost of reported clicks

Average cost per click is spend divided by clicks. The example’s $2,000 spend and 1,000 clicks produce a $2 CPC. This is a useful cost relationship, but it does not establish the value of a click. That value depends on what happens afterward and on the economics of the offer.

A campaign with a higher CPC can still produce a lower cost per qualified outcome when its traffic is more relevant. Conversely, cheap clicks can be expensive when almost none lead to useful activity. Keep click cost connected to the campaign’s primary objective.

Review discrepancies between clicks and measured sessions without assuming one system must be wrong. Redirects, blocked measurement, interrupted page loads, and counting differences can create gaps. Establish whether the gap affects the decision you are making, then investigate the implementation with the relevant technical owner.

CPA requires a clearly named action

Cost per acquisition or cost per action is spend divided by the counted outcomes. In the example, 40 purchases from $2,000 in spend yield a $50 cost per purchase. The label matters: replacing “purchase” with the vague word “conversion” can hide important differences.

For a lead campaign, calculate separate costs for inquiry, qualification, accepted opportunity, and sale when the data supports those stages. The lead-generation guide explains why a form submission should not automatically be treated as a qualified business opportunity.

Be careful with incomplete outcomes. Recent inquiries may not have had time to qualify, and recent orders may still be subject to cancellation. Label immature reporting periods and compare cohorts with similar opportunity to progress. A precise formula applied to an unfinished denominator can still lead to a poor decision.

ROAS is a revenue ratio, not profit

Return on ad spend is attributed revenue divided by advertising spend. With $6,000 in attributed revenue and $2,000 in media spend, the example has a ROAS of 3, often written as 3× or 300%. That means three dollars of attributed revenue per dollar of the stated ad spend.

It does not mean three dollars of profit. Product costs, fulfillment, returns, discounts, payment fees, creative production, staff time, and other expenses may still need to be considered. Revenue attribution also depends on the measurement rules used by the reporting system.

Make a separate contribution calculation using the business’s actual definitions. A revenue ratio can help monitor campaigns, but it should not be presented as a full profitability analysis. Keep reported attribution distinct from a causal claim that the campaign created all of the revenue assigned to it.

Conversion rate depends on the denominator

In the example, 40 purchases divided by 1,000 clicks gives a click-to-purchase rate of 4%. If you use measured sessions instead of clicks, the denominator may differ and so will the result. Neither label should be silently substituted for the other.

Specify whether you are counting events, users, sessions, orders, or accounts. A person who purchases twice can affect an event-based calculation differently from a user-based one. A reporting tool may also apply its own counting and attribution conventions. Read those definitions before combining numbers in a spreadsheet.

Use the rate to locate a question, not to supply a diagnosis automatically. A change can reflect audience mix, offer availability, page behavior, measurement changes, or delayed outcomes. Review the full context before declaring that a design change caused the movement.

Turn the calculations into a decision record

Create a review with the primary outcome, supporting metrics, total costs, relevant context, and known limitations. State what changed during the reporting period. Include campaign and creative versions, destination updates, offer changes, and any operational interruptions that could affect the comparison.

Then write the decision in plain language: continue the current plan, investigate a delivery issue, improve the destination, stop an irrelevant placement, or run a focused test. Explain which evidence supports the choice and what evidence would change it. The creative testing guide helps turn uncertainty into a cleaner comparison.

Good measurement does not require every number to improve simultaneously. It requires the team to understand trade-offs without changing definitions midstream. Keep the arithmetic transparent, distinguish early activity from completed value, and use each metric to answer the question it is capable of answering.

Banner ad sizes: choose the format, not the guesswork

Tue, 13 Aug 2024 10:00:00 +0000

Choosing banner dimensions is a media-planning decision as much as a design decision. The shape of a placement affects how much information can be shown, where the message can appear, and how the creative must be arranged. A familiar size is useful only when the publisher or platform accepts it and the composition remains legible in context.

Treat an ad-size list as a reference, not a ranking of guaranteed winners. This guide explains how to build a format plan around actual inventory, how to recompose rather than stretch a master design, and how to check the finished files. It also distinguishes fixed dimensions from flexible layouts, which is important when a team casually uses “standard banner” to describe several different production requirements.

Start with the placement, not the artboard

Ask where the campaign is expected to run. A desktop editorial rail, an in-content rectangle, and a small mobile slot have different spatial constraints. Get the accepted dimensions, supported formats, file limits, and delivery instructions from the actual buying destination. Keep that information with the brief rather than relying on a remembered specification from another campaign.

Build a placement matrix with one row per intended environment. Include the publisher or platform, the device context, the requested canvas, the destination URL, and the person responsible for approval. Mark unconfirmed inventory as unconfirmed. This prevents a production team from treating a speculative format as a booked placement.

The creative plan should follow this matrix. Producing a large library can be worthwhile, but only when the additional formats serve a specific distribution need. A smaller verified set is easier to approve, inspect, and maintain than a folder full of unused variations.

Know what fixed and flexible actually mean

A fixed-size ad is designed for a stated width and height, such as 300 × 250 pixels. A flexible ad can scale within an allowed range while retaining its defined relationship between width and height. The IAB Tech Lab New Ad Portfolio guidance describes an aspect-ratio-based approach to flexible sizing.

That distinction does not mean every existing placement has become flexible, or that every fixed canvas is obsolete in every buying environment. It means you need to identify the actual specification being requested. A fixed creative, a responsive container, and an asset-based ad assembled by a platform are related ideas, not interchangeable deliverables.

Ask the recipient a concrete question: do they want finished files in named pixel dimensions, a responsive HTML creative, or separate image and text assets? Answering that question early prevents an otherwise polished design from arriving in the wrong format.

Use rectangles to organize a compact story

The 300 × 250 medium rectangle and 336 × 280 large rectangle share a similar visual proportion. They offer room for a headline, a recognizable product or illustration, and a clear next step. That room is not an invitation to include every feature in the product brief.

Try sketching three blocks before designing details: recognition, promise, and action. Recognition is the brand or product cue. The promise explains the useful idea. The action tells a visitor where the click will lead. The order can change, but the three blocks should not compete at equal visual weight.

When translating between these rectangle sizes, inspect line breaks and safe margins rather than assuming the larger version can simply be reduced. Small type that looked comfortable on the larger artboard may become difficult to read in the smaller export. Review both at their actual display dimensions.

Let wide units stay genuinely simple

A 728 × 90 leaderboard has a very different reading pattern from a rectangle. It rewards short messages and a deliberate relationship between left and right. A logo, one idea, and an action can be enough. Trying to preserve a rectangle’s full copy usually creates tiny type or a crowded button.

A 970 × 250 billboard gives a wider composition more vertical room. Consider a strong product detail, an editorial-style headline, or a clear split between the promise and supporting imagery. Keep the action visible without forcing the viewer to decode several unrelated panels.

For both shapes, test the creative inside a page mockup with surrounding navigation and content. An ad that looks commanding on an empty slide may disappear among competing horizontal elements. Your goal is a readable hierarchy, not the maximum amount of material that fits inside the border.

Treat tall formats as a sequence, not a brochure

The 160 × 600 wide skyscraper is narrow enough to make long words awkward. Start with short lines and a limited number of visual elements. Check that the logo remains recognizable and that required qualifications do not become a dense block at the bottom.

The 300 × 600 half-page unit offers a broader vertical canvas. One useful approach is a top-to-bottom sequence: identify the problem, show the relevant product or offer, and finish with the next step. This is a suggested composition, not a rule that every campaign must follow.

Do not depend on the audience inspecting every inch of the unit. A visitor may encounter only part of the placement while scrolling. Keep the brand and main promise understandable without requiring the whole page to be studied. Use the available height to create rhythm rather than to reproduce a full sales page.

Rebuild the message for mobile

The 320 × 50, 300 × 50, and 320 × 100 formats are compact canvases. Start by deciding which parts of the larger message are essential. A short promise and clear brand cue may be more useful than a miniature image, two lines of explanation, and a cramped action label.

The taller mobile banner gives you more vertical space, but it still needs a mobile-first composition. Check that the words can be understood without zooming. Remove decorative details that become visual noise at the intended size. Compare variants on a real phone rather than judging them only in a desktop editor.

Also inspect the destination. A mobile creative that points to a difficult page creates an avoidable break in the journey. Our mobile banner guide pairs the canvas decision with readability, proportion, and post-click checks.

Separate dimensions from delivery requirements

Keep a production matrix

Width and height tell you the shape of the creative. They do not tell you the permitted file type, total bytes, animation behavior, click handling, or asset-hosting rules. Keep those requirements in separate columns of the production matrix. This makes differences between a static export and a packaged HTML creative visible.

Use the specification checklist before delivery. Confirm whether the destination distinguishes an initial load from additional assets, whether animation must stop, and whether a static fallback is needed. Check the exported file itself rather than a design-tool estimate. Compression and packaging can change what is actually delivered.

Name files so that another person can identify the campaign, size, creative concept, language, and version without opening each one. For example, a consistent internal naming scheme is more valuable than a sequence of files called “final,” “final-new,” and “approved-final-two.”

Choose coverage you can maintain

A useful format set balances opportunity with maintenance. Every extra size creates another place where an old price, broken destination, outdated condition, or superseded logo can survive. Assign one owner to the asset register and retire versions deliberately when an offer changes.

Review performance by meaningful placement and outcome, not by shape alone. A rectangle and a leaderboard can appear in different contexts, reach different audiences, and receive different budgets. Those differences make a simple size ranking difficult to interpret. Use the findings to refine the placement plan, then design a cleaner comparison when necessary.

The practical order is straightforward: confirm inventory, identify the deliverable, compose for the canvas, inspect the export, and keep the versions organized. The right dimensions get your message into the intended space. Clear creative and a coherent destination determine whether that space is being used well.

Banner ads for lead generation: build the whole journey

Thu, 15 Feb 2024 10:00:00 +0000

A lead-generation campaign should be designed backward from a useful business conversation. Start with the people you can genuinely help, define what makes an inquiry relevant, and decide how it will be handled. Only then choose the banner message. Without those decisions, a campaign can produce a large number of submissions while leaving the business uncertain about their value.

The goal is not to make every visitor complete an action at any cost. It is to connect an appropriate audience with a clear offer and a proportionate next step. This guide follows that chain from campaign brief through qualification and follow-up. The worked examples are hypothetical and are intended to make the reporting logic easier to understand, not to predict campaign results.

Define a qualified lead before launch

Write a definition that the marketing and sales teams can apply consistently. A qualified inquiry might require a relevant business need, a serviceable location, an appropriate organization type, and a realistic next step. The exact definition belongs to your business, not to a generic conversion benchmark.

Separate the stages. A submitted inquiry is not necessarily a qualified lead. A qualified lead is not necessarily an accepted opportunity. An opportunity is not a completed sale. Give each stage a clear entry rule and assign responsibility for updating it. This prevents an ambiguous “lead” column from doing several jobs at once.

Keep rejection reasons useful rather than punitive. Categories such as duplicate inquiry, outside service area, unsupported request, or no identifiable need can help diagnose campaign fit. Avoid vague labels that make it impossible to tell whether the advertising, the offer, or the follow-up process needs attention.

Choose an offer that fits the audience’s readiness

An unfamiliar audience may be willing to inspect a sample, read a useful guide, or compare options before discussing a purchase. A returning visitor may be ready for a consultation. Match the requested commitment to the offer and the likely context instead of assuming every impression should ask for a sales call.

Describe the offer concretely. “See a sample stock-planning worksheet” tells the visitor more than “Transform your business.” A specific promise also helps you qualify the response: people who choose the sample have expressed interest in that topic, not necessarily in every product the company sells.

Decide whether an ungated resource would answer the audience’s need more honestly than a gated one. Collecting contact details is not automatically the right first step. When information is requested, explain the purpose and the expected follow-up rather than allowing the banner to imply a commitment-free download while the destination starts an unrelated sales process.

Use one primary message, a recognizable brand, and a clear invitation. Make the next step specific enough that a visitor can anticipate the destination. A message about comparing service options should not lead to a page that only asks for a telephone number without providing the promised comparison.

Recompose the offer for the placement. A 300 × 250 rectangle can support a short headline and visual. A compact mobile banner may need a shorter version of the same idea. Keep the meaning consistent even when the layout changes.

Avoid fake urgency, invented testimonials, and claims about guaranteed results. Those devices do not repair a weak offer; they create a mismatch between expectation and experience. Use a tangible detail from the actual resource or service instead, and let the destination explain the evidence behind it.

Make the destination easy to evaluate

The first visible section should confirm what is being offered, who it is for, and what the visitor can do next. Provide enough information for someone to decide whether the action is worthwhile. A page that hides basic details may collect inquiries from people who would have ruled themselves out if the offer had been clearer.

Explain the follow-up process. State whether the next step is an email response, an appointment request, a sample, or a conversation with a relevant team. The page should not promise immediate delivery if a manual review is required. Operational truth matters as much as visual polish.

Review the destination on a phone, using the exact campaign link. Check that the content is readable, the action works, and important information is not obscured by navigation or overlays. The landing-page guide provides a more detailed review of the transition from creative promise to visitor decision.

Build the follow-up process before buying traffic

Name the person or team responsible for receiving inquiries. Define how they will be routed, how duplicates will be handled, and what happens when the usual owner is unavailable. A shared inbox with no ownership is not a complete lead-handling process.

Prepare a first response that acknowledges the visitor’s actual request. Someone who asked about a specific worksheet should not receive a generic message about an unrelated service. Give the responding team the campaign and offer context they need, while limiting access to customer information to the people who require it.

Record response activity and stage changes consistently. This allows the campaign review to distinguish weak targeting from an operational failure after a relevant inquiry. More media spend cannot solve a missing handoff. Fix the handoff first, then assess whether additional traffic would be useful.

Connect advertising to later outcomes carefully

Advertising systems may report the first online action while the business records later qualification or sales outcomes elsewhere. Google’s offline conversion import overview describes ways to connect later events to advertising interactions. Implementation requires suitable identifiers, accurate event definitions, and an appropriate data-handling process.

Do not send customer information to a platform simply because an integration is available. Review the actual information flow, permissions, retention, and relevant requirements. Hashing or matching terminology does not remove the need to understand what is being processed and why.

Define one authoritative record for each stage. Keep event names stable, avoid duplicate imports, and distinguish a correction from a new event. A clean stage history is more useful than a long list of loosely named conversions that count the same inquiry several times.

Compare cost per inquiry with cost per qualified lead

Work through the two denominators

Consider an illustrative campaign that spends $1,200 and produces 60 inquiries. Its cost per inquiry is $20. If 15 of those inquiries meet the agreed qualification definition, the cost per qualified lead is $80. Neither figure is a universal target; both simply describe this invented example.

Now compare another hypothetical campaign spending the same amount on 30 inquiries, of which 18 qualify. Its cost per inquiry is higher at $40, but its cost per qualified lead is lower at about $66.67. Looking only at the first number would favor the wrong campaign for a qualification-focused objective.

Continue the analysis through opportunities and sales when the business cycle permits. Include elapsed time and incomplete outcomes so a recent campaign is not unfairly compared with one whose leads have had longer to mature. Keep the denominator, counting rule, and cost definition visible.

Diagnose the weakest confirmed step

If delivery is limited, inspect eligibility and placement constraints. If visits arrive but the promised resource is not being used, review the offer and destination. If inquiries are common but qualification is weak, inspect audience fit and the information presented before the action. If good inquiries stall, review the handoff and response process.

Avoid changing targeting, creative, offer, destination, and follow-up simultaneously. That can make the next result difficult to interpret. Choose the most plausible problem supported by the evidence, make a focused adjustment, and record what changed.

A productive lead-generation campaign leaves the business with more than a count of names. It produces a traceable journey from relevant attention to an appropriate conversation, with clear definitions at each stage. Build that journey first. Then let the banner invite the right people into a process that is ready to serve them.

ClickToll.com — Field Notes & Guides

ClickToll.com | Banner Ads | Adtech | Affiliate Marketing | Lead Generation

Make spacefor attention.

Small space.Big possibilities.

Desktop workhorses

Mobile pocket hits

From pixelsto purpose.

Don’t just click.Connect the dots.

Display ads

Adtech

Affiliates

Lead generation

A little less guesswork.A lot more context.

Banner advertising for beginners: from brief to launch

Banner ads for lead generation: build the whole journey

Adtech explained: what happens behind a banner ad

Affiliate banner marketing: offers, placements, and trust

UTM tracking for banner campaigns: a cleaner campaign trail

Banner ad A/B testing: one useful question at a time

Good questions.Clear answers.

Banner ad sizes, without the guesswork.

Banner ad sizes, without the guesswork.

Medium rectangle

Large rectangle

Leaderboard

Wide skyscraper

Half page

Billboard

Mobile banner

Compact mobile banner

Large mobile banner

Fixed dimensions are only part of the brief

Understand the terminology

Start with the intended placement

The creative reference wall.

The creative reference wall.

Medium rectangle

Large rectangle

Leaderboard

Wide skyscraper

Half page

Billboard

Mobile banner

Compact mobile banner

Large mobile banner

Fixed dimensions are only part of the brief

Understand the terminology

Start with the intended placement

Desktop ads. Built for the space.

Desktop ads. Built for the space.

Medium rectangle

Large rectangle

Leaderboard

Wide skyscraper

Half page

Billboard

Fixed dimensions are only part of the brief

Understand the terminology

Start with the intended placement

Compose for a reading pattern

Keep the placement context visible

Mobile ads. Keep the idea clear.

Mobile ads. Keep the idea clear.

Mobile banner

Compact mobile banner

Large mobile banner

Fixed dimensions are only part of the brief

Understand the terminology

Start with the intended placement

Read it on a real phone

Review what happens after the tap

300 × 250 Medium rectangle Banner Guide

Medium rectangle

Two formats. One exact canvas.

Where this canvas fits

A useful way to compose the message

The mistake to avoid

What the blank canvas includes

Before you deliver

Compare a related shape

Make space
for attention.

Small space.
Big possibilities.

From pixels
to purpose.

Don’t just click.
Connect the dots.

A little less guesswork.
A lot more context.

Good questions.
Clear answers.