Rich Media BannerMultimedia Design

• Understand about user interactivity on rich media banner

• Understand the rules of IAB ads size & guidelines

• Understand each types of rich media banner and its interactivity

Instructional Goals

“Interactivity”

In computer science, interactive refers to software which accepts and responds to input from humans—for example, data or commands.

Interactivity can occur at many different levels and degrees of engagement:

User-to-user interaction via the internet; para-social interaction, where new forms of media are generated online; and user-to-system interactivity which is the way devices can be engaged with by a user.

Lev Manovich (2001) makes clear de"nition about interactivity; He refers to 'open interactivity' as actions such as computer programming and developing media systems, whereas 'closed interactivity' is merely where the elements of access are determined by the user.

Rich Media Creative Guidelines

With the advent of new and improved advertising technologies, rich media has developed into a popular format for reaching and engaging consumers because the technologies allow the consumer to interact with the creative asset.

Rich Media is now de"ned as:  advertisements with which users can interact (as opposed to solely animation and excluding click-through functionality) in a web page format.

These advertisements can be used either singularly or in combination with various technologies, including but not limited to sound, video, or Flash, and with programming languages such as Java, Javascript, and DHTML.

Rich Media also includes in-page and in-text digital video advertisements where the associated content is not streaming in a player environment.

Screenshot of advertisement (rich media banner on a webpage)

Additional Considerations: CPU Usage

In contrast to "le size, the complexity of drawings, gradients, slow moving animations and detailed moving elements can affect the number of calculations the CPU must make for each frame.

The IAB Ad Sizes Working Group recommends a maximum of 18 fps.

Common High CPU Usage Factors:

• Frame Rate is over 18 frames per second; reducing the number to 18 does not degrade visual performance.

• Multiple animated sequences across many layers animating at the same time.

• Animated sequences set to be translucent and animating on top of an imported graphic (ex: jpeg, png, etc.).

• Action Script-generated events set to randomly generate (ex: fog and rain).

• Imported graphics scaled up over a long period of time.

The Guidelines

Internet Advertising Board - Standard Ads Size

The IAB Ad Unit Guidelines are intended for marketers, agencies and media companies for use in the creating, planning, buying and selling of interactive marketing and advertising.

The IAB Ad Unit Guidelines concern animated in-page display ads, such as standard Flash "les, $at JPGs, or animated GIFs.

Note: All Dimensions are in pixels

RecommendedMax. InitialDownload Fileweight

RecommendedAnimation Length

(Seconds)

300 x 250 IMU - (Medium Rectangle) 40k : 15

250 x 250 IMU - (Square Pop-Up) 40k : 15

240 x 400 IMU - (Vertical Rectangle) 40k : 15

336 x 280 IMU - (Large Rectangle) 40k : 15

180 x 150 IMU - (Rectangle)  40k : 15

300x100 IMU - (3:1 Rectangle) 40k : 15

720x300 IMU – (Pop-Under) 40k : 15

Rectangles and Pop-Ups

Note: All Dimensions are in pixels

RecommendedMax. InitialDownload Fileweight

RecommendedAnimation Length

(Seconds)

468 x 60 IMU - (Full Banner) 40k : 15

234 x 60 IMU - (Half Banner) 30k : 15

88 x 31 IMU - (Micro Bar) 10k : 15

120 x 90 IMU - (Button 1) 20k : 15

120 x 60 IMU - (Button 2) 20k : 15

120 x 240 IMU - (Vertical Banner) 30k : 15

125 x 125 IMU - (Square Button) 30k : 15

728 x 90 IMU - (Leaderboard) 40k : 15

Banners and Buttons

Note: All Dimensions are in pixels

RecommendedMax. InitialDownload Fileweight

RecommendedAnimation Length

(Seconds)

160 x 600 IMU - (Wide Skyscraper) 40k : 15

120 x 600 IMU - (Skyscraper) 40k : 15

300 x 600 IMU - (Half Page Ad) 40k : 15

Skyscrapers

Additional Notes • Those sizes that are bold above are part of the Universal Ad Package

• :15 animation includes multiple loops

© 2008 - 2010 Internet Advertising Board. All Rights Reserved.

Examples

Examples

Ad server market structure

This is a lists of top ad server vendors in 2008 with "gures in millions of viewers published in an Attributor survey. Since 2008 Google controls estimated 69% of the online advertising market.

Vendors Ads Viewers (millions)

Google 1,118

DoubleClick (Google) 1,079

Yahoo! 362

MSN (Microsoft) 309

AOL 156

Adbrite 73

Total 3,087

Ad Formats

Expandable banner ads start with a standard size banner ad, usually done in Flash, and expand on mouse over to reveal any number of larger panels. Panels can contain interactive Flash elements and video, forms to gather information, or just about anything you can put on a web page.

As the most popular Rich Media format, expandable banners are universally accepted.

In most cases, a third party technology is used to serve the ads such as DoubleClick Studio, PointRoll, Atlas, Eyeblaster and Yahoo Rich Media.

Expandable Banner Ads

On Rollover

By Default

Video ads incorporate streaming video to create a rich ad format similar to TV advertising.

Ads can be created in in-banner, in-stream, or pre-roll formats. The most popular use of this format is to take an existing commercial (30 second spot) and place it within a standard banner ad sized unit.

This allows you to reach an online audience, with your existing creative.

Video Ads

The Floating Ad appears to “$oat” over web page content on a transparent background layer. Floating Ads have a maximum of 500x500 pixels, include a close button and do not loop.

Floating ads travel over the web page drawing the users attention to a separate ad unit.

Designed in Flash, these high impact ads can be used in conjuction with a standard Flash banner or Expandable Banner ad.

Floating Ads

By Default

Floating ads

Tear Back or Peel Back ads start in one corner of the web page, and upon mouseover, expand to cover the web page.

Peel Backs are a fun way to get the user's attention. An initial ad resides in the upper right corner of the page. On click, the ad tears down to reveal a full page ad (back page). You can include anything

In most cases, a third party technology is used to serve the ads such as DART Motif, PointRoll, Atlas, Eyeblaster and Yahoo Rich Media.

Tear Back ads

Flash interactive banners entice the user to mouse over the ad, revealing additional information or call to action.

Interactive Flash banner ads take the ever popular Flash banner ad and supercharge it. Once the user rolls over the ad, any number of things can happen within the allotted ad space. Increase messaging by showing additional frames upon interaction. Incorporate a game, or video, or your terms and conditions.

• All interaction and additional messaging happens within the ad boundaries. (There are no expanding panels).

• Generally, this type of ad does not need a third-party technology. It is done in Flash and can be served with all publishers.

• Google AdWords accepts this type of ad.

Flash Interactive Banner Ads

Flash Interactive Banner Ads Example

Polite BannerThe Polite Banner can serve larger "les without disturbing the loading of the page’s content. It is a Flash-enabled banner that uses “polite,” sequential downloading and proprietary compression

Another Ad Formats by Mediamind

Standard BannerA Standard Banner consists of an image or Flash "le that loads together with the page.

Video ExtenderThe video extender format developed by MediaMind allows viewers to play with the size and shape of video ads in real time.

Social Ads (Widgets)Widgets allow users to opt in and spread your brand message virally across the web, taking advantage of the social nature of the web.

Messenger Expandable BannerThe Messenger Ad runs in the contact list of the most popular instant messaging services; nearly half a billion people worldwide are IM users, giving IM advertising tremendous reach and branding

CarouselThe carousel format allows users to interact with an endless number of products that can be dynamically updated by the advertiser even after the campaign is live.

Sidekick AdAfter initiated by the user, the entire page scrolls to the left revealing a microsite in the wings. Really cool, and a groundbreaking media "rst.

Eyeblaster TVThe Eyeblaster TV video unit appears at the bottom right of a user’s monitor running 30 or 60-second TV commercials, with audio options, page scrolling features and ad frequency controls.

Homepage TakeoverThe Homepage Takeover provides maximum exposure for a time-sensitive advertising message.

Synchronized AdsThe Synchronized Ads format allows different types of ads to interact with each other.

Full Screen VideoUse a full screen video to excite and engage your audience. 

In Stream, Pre RollVideo or Flash ads played before, during, or after a video-content session .

VideoStripThe VideoStrip plays video within the con"nes of the banner, enticing users to interact and learn more.

Pushdown BannerThe Pushdown Banner starts in a banner space and then either automatically or upon user initiation, expands outside of the banner by pushing the content immediately below the ad downwards.

Minisite AdsA mini-site, or micro-site, launches an additional Flash movie upon user request from your ad, in place of a click-through. Clients often use mini-sites to communicate specialized information

Commercial BreakA full-page transitional ad, the Commercial Break plays video or Flash animation within the active browser window before a new page loads. Sometimes referred to as an “intromercial”

Reference:http://www.theoremcreations.com/ppc/rich_media.phphttp://www.mediamind.com/content.aspx?page=ad_formatshttp://en.wikipedia.org/wiki/Online_advertising

IAB Ad Unit & Rich Media Guidelines:http://www.iab.net/iab_products_and_industry_services/508676/508767/Rich_Mediahttp://www.iab.net/iab_products_and_industry_services/508676/508767/Ad_Unit