Digital Advertising · Creative Standards
Equine Network
Advertising
Creative Guide
The complete reference for building high-impact display creative — every ad product and its anatomy, HTML5 and static requirements, motion rules, how to build it all with Claude Design, and the delivery checklist.
Equine Network · Partner Creative
01 · Ad Products
What we sell
Every campaign is built from three product families, covered in order below. Design at the exact pixel dimensions listed — each unit ships in both HTML5 (animated) and static versions.
§02 · Family 01
Standard Units
In-page units placed within content and sidebars.
728 × 90Leaderboard
300 × 250Medium Rectangle
300 × 600Half Page
320 × 50Mobile Banner
§03 · Family 02
Masthead
A 6:1 billboard running full-width across the top of the page.
§04 · Family 03
Takeover Wrap
Three creatives that wrap the page as one seamless unit.
2000 × 333Top Header
450 × 1200Left Rail
450 × 1200Right Rail
02 · Standard Units
Standard ad units
The everyday in-page units. Each is built from the same four parts — a logo, a headline, a CTA button, and a background — arranged to suit the shape of the slot. Here's the layout for each.
Logo
Headline
CTA button
Background
Leaderboard728 × 90
One line: logo left · headline center · CTA right.
Medium Rectangle300 × 250
Stacked: logo top · headline · CTA bottom.
Half Page300 × 600
Tall stack — CTA sits above the bottom fold.
Rule of thumb
Wide units run the logo, message, and CTA in a single row. Tall and boxy units stack them top-to-bottom with the CTA last. Keep tap targets ≥ 44px.
03 · Masthead
Mastheads
A wide 6:1 billboard that runs full-width across the top of the page. Same four parts as a standard unit, laid out in a single row: logo and headline anchor the left, the CTA sits far right, and the photo or texture fills the background behind a scrim.
Site Masthead2048 × 300 · 6 : 1
Logo & headline left
Keep the brand and message in the left third where the eye lands first.
CTA far right
Balance the wide format by anchoring the button on the opposite end.
Scrim for legibility
A left-to-right gradient over the photo keeps text readable at any width.
04 · Takeover Wrap
The full-wrap takeover
Three creatives assemble into one wrap: the header sits in the gap between the rails, at the top of the content column. The rails run the full page height on either side.
LEFT
RAIL
450
×
1200
TOP HEADER · 2000 × 333
Publisher content column
RIGHT
RAIL
450
×
1200
Because the panels physically touch only at the two top corners, any shared texture must line up there.
Making it feel like one piece
When a texture or background should flow across all three panels, never design each ad in isolation. Build one master, then slice.
1
Build the master
Create one canvas the size of the whole wrap — 2900 × 1200 (left rail 450 + header 2000 + right rail 450). Lay the texture across it.
2
Slice each panel
Left = crop (0,0,450,1200). Header = crop (450,0,2000,333). Right = crop (2450,0,450,1200). Seams line up by construction.
3
Keep scale equal
All three must render at the same scale on-page so the corners meet. Rails become distinct Left & Right files (mirror halves).
Overlay recipe — recommended
10%
Texture / map overlay opacity over the black base. (15–20% reads too heavy.)
≈ 60%
Point at which rails begin fading to transparent at the bottom (CSS mask gradient).
1×
Bake the overlay from the master crop — don't re-scale per panel or seams drift.
Rails fade to transparent at the bottom so they dissolve into the publisher page. Keep all copy and the CTA button above the fade line (≈55% of height).
05 · Creative Type A
HTML5 (animated)
The preferred format for motion. Uploaded to GAM as a zipped bundle with a static backup image.
| Sizes |
2048×300 · 2000×333 · 450×1200 (Left & Right) |
| Creative type |
HTML5 — zipped bundle (fixed size, not fluid) |
| Bundle contents |
index.html with all assets inlined (images as base64), no external files |
| Required tags |
<meta name=“ad.size” content=“width=W,height=H”> + var clickTag |
| Max weight |
ZIP ≤ 300 KB (aim ≤ 150 KB initial load) |
| Backup image |
One static JPG/PNG per creative, same dimensions |
| Text |
Live HTML/CSS text — never rasterized (stays crisp at any scale) |
| Behavior |
Fixed ad.size; scales fluidly to fill the slot without cropping |
| Click-through |
Wire the CTA/entire ad to clickTag so clicks are tracked |
06 · Creative Type B
Static image
Simplest path — uploads directly, no ZIP. Use when motion isn't needed. Note: photographic GIFs band badly; prefer HTML5 for animation.
| Sizes |
2048×300 · 2000×333 · 450×1200 |
| Creative type |
Image (standard) — uploads directly, no ZIP |
| File format |
JPG, PNG, or GIF |
| Max weight |
≤ 300 KB |
| Color |
sRGB. Photographic GIFs band — avoid; use JPG/PNG or go HTML5 |
| Resolution |
Author at 1× native (or 2× then export down) so it stays sharp when scaled up |
| Animation |
Static, or GIF ≤ 15s and ≤ 3 loops, then stop |
| Required |
Destination URL |
07 · Motion
Animation rules
| Intro |
Each element animates in ONCE — logo, headline lines (staggered), underline rise in |
| Looping |
Only the CTA loops after intro (gentle pulse + shine sweep) |
| Loop limit |
Respect IAB: ≤ 3 loops OR ≤ 15s of total motion, then rest |
| Easing |
Ease-out for entrances; a soft overshoot (back-ease) on the CTA pop |
| Legibility |
Nothing important moves during the last frame — end on the full, readable layout |
| Reduced motion |
Final resting state must fully communicate the message with no motion |
08 · Workflow
Building with Claude Design
Claude Design builds these creatives as live HTML5 — you describe the ad in plain language, refine it in the live preview, then export the exact format each platform needs. Three steps:
1
Give it the spec
State the exact placement & pixel size, the brand, the headline, the CTA text, and the click-through URL. Attach the logo (white version for dark backgrounds) and a hi-res photo.
2
Direct the design
Ask for live text (never baked into the image), the intro-once animation with a looping CTA, and the house overlay treatment. Review in the live preview and point at what to change.
3
Export the format
For GAM: ask for the HTML5 ZIP plus a static backup. For a website slot: ask for the self-contained responsive embed / Copy-HTML page.
What to ask for
| New unit |
"Build a 728×90 leaderboard HTML5 ad for USRider — headline '…', CTA 'Join Now', click-through usrider.org." |
| Crisp text |
"Use live HTML text, not rasterized into the image, so it stays sharp at any scale." |
| Animation |
"Intro the logo, headline and CTA once, then loop only the CTA." |
| Seamless takeover |
"Build all three takeover panels from one master canvas so the texture lines up across the seams." |
| GAM file |
"Export as an HTML5 ZIP with the ad.size meta tag, clickTag, and a static backup image." |
| Website embed |
"Give me a self-contained, responsive embed I can paste into an Elementor HTML widget." |
Export A · GAM upload
An HTML5 ZIP — one index.html with all assets inlined, the ad.size meta tag, and clickTag wired up. Upload as an HTML5 creative and attach the static backup image.
Export B · Website slot
A self-contained responsive embed — paste the code straight into an Elementor HTML widget. It scales to fit the slot with no external files to break.
09 · Delivery
Hand-off checklist
Exact pixel dimensions match the slot (2048×300 / 2000×333 / 450×1200).
ad.size meta tag present and correct in every HTML5 file.
clickTag defined and the click target wired to it.
Static backup image supplied for each HTML5 creative.
ZIP under 300 KB; all assets inlined (no broken external links).
Animation ends on a complete, readable frame within loop limits.
Takeover panels sliced from one master; corners align; rails mirrored L/R.
File names identify brand, campaign, placement & size.
Do
✓Keep copy and CTA above the rail's bottom fade line (~55% height).
✓Use live text for crispness at every scale.
✓Bake shared textures from a single master canvas.
✓Keep overlays subtle — 10% is the house default.
Don't
✕Don't design takeover panels independently — seams won't match.
✕Don't loop the whole animation; only the CTA continues.
✕Don't ship photographic GIFs — they band on the dark base.
✕Don't rasterize headline text into the background image.
