Interactive Advertising Bureau Display & Mobile Advertising Creative Format Guidelines and Reference File Download Link
https://eu2.contabostorage.com/00f3241116844f24b628f46d81abb929:st1/folder7/7270/1656287401_iab_advertising_display_mobile_creative_guidelines_html5_2015_-_Standar_Format.xlsx
2026-05-30 22:52:04 - Admin
<style> body { font-family: Arial, Helvetica, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f9f9f9; color: #333; } header { background-color: #00458b; color: #fff; padding: 20px 15px; text-align: center; } main { max-width: 960px; margin: 30px auto; padding: 0 15px; } h1, h2, h3 { color: #00458b; } a { color: #0066cc; text-decoration: none; } a:hover { text-decoration: underline; } .example { background: #fff; border: 1px solid #ddd; padding: 15px; margin: 15px 0; } ul { margin-left: 20px; } </style> <header> <h1>IAB Display & Mobile Advertising Creative Format Guidelines</h1> </header> <main> <section> <h2>Why the Guidelines Matter</h2> <p>The Interactive Advertising Bureau (IAB) creates a set of standards that help advertisers, agencies, publishers, and technology providers speak the same language. The <strong>Display & Mobile Advertising Creative Format Guidelines</strong> are the most widelyreferenced rules for building banner, video, rich media and native ad units that run on desktop, tablet and smartphone screens.</p> <p>Following the guidelines yields three core benefits:</p> <ul> <li><strong>Consistency:</strong> Creatives render similarly across dozens of inventory sources, reducing technical surprises.</li> <li><strong>Performance:</strong> Proper file sizes, dimensions and markup improve load times, clickthrough rates and overall ROI.</li> <li><strong>Compliance:</strong> Advertisers avoid policy violations that could cause ads to be blocked or cause penalties.</li> </ul> </section> <section> <h2>Key Components of the Guidelines</h2> <h3>1. Standardized Sizes</h3> <p>The IAB defines a catalog of core and expanded dimensions that reflect the most common placements on the web. Some of the most frequently used sizes include:</p> <ul> <li>300250 Medium Rectangle</li> <li>72890 Leaderboard</li> <li>160600 Wide Skyscraper</li> <li>32050 Mobile Leaderboard</li> <li>30050 Mobile Banner</li> <li>970250 Billboard</li> </ul> <p>Using these standard sizes makes it easier for ad servers to match inventory and for creatives to be repurposed across multiple sites.</p> <h3>2. File Size and Weight Limits</h3> <p>Heavy files hurt page performance. The current IAB recommendation is:</p> <ul> <li>Static image ads 150KB (PNG, JPEG, GIF)</li> <li>Animated GIFs 200KB</li> <li>Rich media (HTML5) 200KB compressed (excluding any hosted assets such as videos)</li> <li>Video ads 100KB or less for the VAST tag; the video file itself follows the platforms specific thresholds (often 5MB for short prerolls).</li> </ul> <p>Compress assets, use sprite sheets, and minify HTML/CSS/JS to stay within limits.</p> <h3>3. Technical Specifications</h3> <p>All HTML5 creatives must meet these baseline technical rules:</p> <ul> <li>Document type: HTML5 with a <code><!DOCTYPE html></code> declaration.</li> <li>All external resources (images, fonts, scripts) must be referenced via absolute or protocolrelative URLs.</li> <li>Use CSS3 for animations; avoid deprecated HTML <code><blink></code> or <code><marquee></code> tags.</li> <li>Sandboxed iframes are preferred for security and to avoid collisions with host page CSS.</li> <li>Fallbacks: Provide a static image backup in case the browser cannot render HTML5.</li> </ul> <h3>4. Video Creative Guidelines</h3> <p>Video ads are governed primarily by the VAST (Video Ad Serving Template) standard, but the IAB adds layout and userexperience rules:</p> <ul> <li>Duration: 15seconds for preroll, 30seconds for midroll, 60seconds for outstream.</li> <li>Muted autoplay is allowed only if the user initiates playback or if the video is placed in a nonintrusive environment.</li> <li>Clear, visible close button after 5 seconds of playback.</li> <li>Audio must not start louder than the surrounding content; volume should be 50% of system default.</li> </ul> <h3>5. MobileFirst Considerations</h3> <p>Mobile screens introduce unique constraints:</p> <ul> <li>Touchfriendly: Interactive elements must be at least 4444px.</li> <li>Viewport: Use <code>meta viewport</code> tags to ensure proper scaling.</li> <li>Data usage: Keep total download weight under 150KB whenever possible.</li> <li>Orientation: Provide separate assets for portrait and landscape when the creatives layout changes significantly.</li> </ul> <h3>6. Accessibility & Brand Safety</h3> <p>Ads should be readable by screen readers and respect user preferences:</p> <ul> <li>Provide <code>alt</code> attributes for all images.</li> <li>Avoid flashing content that could trigger seizures (no more than 3 flashes per second).</li> <li>Use content rating tags (e.g., <code>ad:rating=G</code>) to enable brandsafe placements.</li> </ul> </section> <section> <h2>Typical Workflow Using the Guidelines</h2> <ol> <li><strong>Brief & Planning</strong> Identify the required dimensions, format (static, animated, rich media, video) and target devices.</li> <li><strong>Design & Prototyping</strong> Sketch using the exact pixel dimensions. Export assets at the recommended resolution (1 for standard, 2 for highDPI when supported).</li> <li><strong>Development</strong> Build the HTML5 package, embed VAST tags for video, and ensure all scripts are asynchronous.</li> <li><strong>Testing</strong> Run the ad through tools such as <em>IAB Labs Creative Validation Suite</em> or opensource validators (e.g., <code>gulphtmlvalidator</code>).</li> <li><strong>Optimization</strong> Compress files, remove unused CSS, and verify that the total weight meets the limits.</li> <li><strong>Submission & Approval</strong> Upload to the ad server or DSP; monitor for any policy rejections.</li> <li><strong>Postlaunch Reporting</strong> Track load times, viewability, and clickthrough rates to confirm the guidelines impact.</li> </ol> </section> <section> <h2>Common Pitfalls and How to Avoid Them</h2> <ul> <li><strong>Oversized Files</strong> Use image optimisation tools (TinyPNG, ImageOptim) and CSS/JS minifiers.</li> <li><strong>Incorrect Aspect Ratio</strong> Stick to the exact pixel width/height; stretching leads to blurred or cropped images on publisher sites.</li> <li><strong>Missing Fallbacks</strong> Always include a static PNG/JPEG fallback for HTML5 creatives.</li> <li><strong>Blocked Resources</strong> Host assets on CDN domains that are whitelisted by major ad exchanges.</li> <li><strong>Noncompliant Video Autoplay</strong> Follow the userinitiated rule; otherwise the video will be muted or blocked.</li> </ul> </section> <section> <h2>Resources & Tools</h2> <p>Below are useful links that help you stay up to date with the latest IAB specifications:</p> <ul> <li><a href="https://www.iab.com/guidelines/display-ads/" target="_blank">IAB Display Advertising Guidelines (official)</a></li> <li><a href="https://www.iab.com/guidelines/video-ads/" target="_blank">IAB Video Advertising Guidelines</a></li> <li><a href="https://validator.iabtechlab.com/" target="_blank">IAB Creative Validation Suite</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox" target="_blank">MDN: Sandbox attribute for iframes</a></li> <li><a href="https://web.dev/fast/#optimize-image-size" target="_blank">Google Web Dev Image Optimization</a></li> </ul> </section> <section class="example"> <h2>Example: A 300250 HTML5 Rich Media Unit</h2> <p>This simple example follows the IAB rules: 200KB total weight, sandboxed iframe, and a fallback PNG.</p> <pre style="background:#eee;padding:10px;overflow:auto;"><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body,html{margin:0;padding:0;overflow:hidden;height:100%;} #cta{position:absolute;bottom:10px;right:10px; background:#00458b;color:#fff;padding:8px 12px; font-size:14px;border-radius:4px;cursor:pointer;} </style></head><body> <img src="https://example.com/fallback.png" alt="Summer Sale 30% Off" width="300" height="250"> <script> // Simple animation moves a logo across the canvas const img = new Image(); img.src = "https://example.com/logo.svg"; img.onload = () => { const ctx = document.createElement('canvas').getContext('2d'); // ...animation logic (kept small for brevity) ... }; </script> <div id="cta">Shop Now</div></body></html> </pre> <p>The code is illustrative; a production version would be minified and bundled to stay under the 200KB ceiling.</p> </section> </main>