Tag: interactive banner

DoubleClick: Fly over France HTML5 banner

You open a banner and, instead of a product shot, you get a hot-air balloon. You pick up speed, drift across a map, and “tour” famous French locations from above, including the Eiffel Tower, Notre-Dame de la Garde in Marseille, and the Château de Versailles.

This demo came out of the DoubleClick HTML5 Banner Challenge, with Biborg Interactive and Alpha Layer showing what happens when a banner is treated like a mini experience instead of a static placement.

The rich media build, meaning a banner unit that runs real-time code in the browser rather than a fixed image, leans on several HTML5 capabilities at once. Geolocation can drop you near your own location at the start. WebGL handles the 3D-like rendering layer in capable browsers. Audio and video tags add atmosphere. Google Maps-style navigation does the heavy lifting for exploration.

HTML5-rich media lets a banner behave like a lightweight web app, while still living inside a standard media buy.

An HTML5 rich media banner is a display unit that runs real-time code in the browser. It can detect location (with permission), render interactive graphics, and respond to user input without plugins.

What makes this feel different from “banner interactivity”

Most interactive banners ask for clicks. This one offers navigation. If your goal is time-in-unit, navigation is the better default than click-to-reveal. The moment you give people directional control, the experience shifts from “ad” to “toy”, and time-in-unit rises naturally because curiosity takes over.

Extractable takeaway: When you turn a banner into something navigable with one obvious control, you trade “interaction” for exploration, and exploration reliably buys you time.

Why the tech stack choice matters

Geolocation is not a gimmick here. It personalizes the first frame by making “your world” the default starting point, if the user opts in. WebGL is not decoration. It signals modernity and smoothness, making the experience feel closer to a game than a widget.

In programmatic display buys, weight and cross-browser reach still win, so the core interaction has to survive even when advanced features fall back.

The business intent behind the challenge demo

This is less about selling France and more about selling a capability. The real question is whether your banner is built to be explored or merely clicked through. It is a proof point for what DoubleClick Studio and HTML5 workflows can support, and it is a portfolio-grade demonstration for the teams who built it.

Steal these patterns for your next HTML5 banner

  • Give viewers one clear control. Navigation beats click-to-reveal when you want time spent.
  • Use “permissioned” personalization. Geolocation works best when it improves the first 3 seconds, not when it tries to be clever later.
  • Design a graceful fallback. If 3D is not available, the core experience should still be enjoyable.
  • Make the value visible without instructions. If someone can understand the interaction from across the room, they will try it.

A few fast answers before you act

What is the DoubleClick HTML5 Banner Challenge demo here?

It is a rich media banner concept that lets users “fly” a hot-air balloon over a map of France and discover landmarks, built to showcase what HTML5 banners can do beyond animation.

Which HTML5 features does the banner use?

It is described as using geolocation (with permission), WebGL for interactive graphics, and native audio and video support, alongside map-based navigation to create a lightweight exploration experience.

Why is geolocation useful in a banner?

Because it can personalize the first moment. Starting near a user’s own location makes the experience feel immediately relevant, as long as it is optional and clearly explained.

What does WebGL add to rich media ads?

WebGL enables GPU-accelerated 2D and 3D graphics in the browser. In advertising units, that can translate into smoother motion, depth effects, and more game-like interaction.

What is the biggest risk with “mini-app” banners?

Weight and compatibility. If the unit is too heavy or too fragile across browsers, you lose reach. The best builds keep a simple core loop and treat advanced effects as optional upgrades.

GOL Airlines: Mobile Check-in banner you fly

Here is a pretty innovative banner ad from AlmapBBDO in Brazil for GOL Airlines. The banner challenges you to imagine what it would be like to “fly” on your mobile phone.

You submit your mobile number into the banner. Seconds later you get a live call with flight instructions. At the same time the page transforms into a flying game controlled directly from your phone keypad.

You then fly a virtual plane across a major Brazilian travel site while destination deals appear underneath the route you choose. Flying is simple. Touch numbers to change direction and trigger special manoeuvres. The ad finishes by reminding you that flying is easier when you check in via your mobile phone.

In travel categories where products feel interchangeable, interactive creative wins when it turns a service benefit into a felt experience in seconds.

A banner that calls you back

The key move is not the game. It is the phone call. The call instantly makes the experience feel “live” and personal, and it bridges the banner and the handset into one connected moment. Once the call happens, the user is no longer passively viewing an ad. They are inside a two-device interaction.

The real question is whether your creative can make the service benefit happen inside the unit, rather than only claiming it.

This is a classic example of making the handset part of the unit. The mobile phone becomes the interface, which proves the check-in promise instead of describing it.

The mechanic: second-screen control without an app

Most second-screen ideas fail because they ask people to download something or switch contexts. This one uses what every phone already has. The keypad. In other words, the phone becomes a simple remote control for what happens on the page. That choice removes onboarding friction and makes the interaction feel surprisingly accessible for a banner unit.

It also creates a clean narrative arc. Number entered. Call received. Instructions delivered. Game begins. Deals appear. The brand claim lands as the closing line rather than the opening pitch.

In consumer travel marketing, where attention is scarce and booking friction is high, this kind of second-screen viewer control turns “convenience” into something you can feel.

Why the “flying game” format fits the job

The game is not meant to be deep. It is meant to create one sensation. Control. When you steer the plane with your own phone while destination deals appear under your route, the ad links that felt control to the check-in promise.

Extractable takeaway: If your benefit is “ease,” build a small interaction that gives the viewer control and a useful reward in the same moment. In a “message as mechanism” execution, the claim is delivered through the interaction itself, not a line of copy.

Steal this from GOL’s mobile check-in banner

  • Use a real-world channel as the trigger. A live call is stronger than a visual prompt because it changes the user’s state immediately.
  • Make the phone the interface. If you are selling a mobile service, let the mobile device do the work inside the experience.
  • Keep controls primitive and universal. Keypad inputs beat complex gestures when you need instant comprehension.
  • Reward the interaction with utility. Deals, destinations, availability, or next steps should appear as part of play, not after it.
  • End with the service tie-back. Let the experience earn the claim, then state it plainly.

A few fast answers before you act

What is the core idea of the GOL mobile-controlled banner?

You enter your phone number into a banner, receive a live call with “flight” instructions, and then control an on-page flying game using your phone keypad while travel deals appear as you fly.

Why does a phone call change the effectiveness of a banner ad?

It makes the experience feel immediate and real, and it creates a bridge from passive viewing to active participation without asking the user to install anything.

What category situations benefit most from this pattern?

Categories where the product is hard to differentiate visually and the benefit is “convenience” or “ease.” Airlines, ticketing, banking, utilities, and service platforms.

What is the biggest execution risk?

Operational friction. If the call is delayed, fails, or feels spammy, the experience collapses. Timing, consent clarity, and reliability are everything.

How would you modernise the mechanic without changing the concept?

Keep the phone as controller, but use a consent-forward trigger and fast connection method. For example, a one-tap call prompt or a verified in-browser handoff that still preserves the “live instructions” feeling.

Yellow Pages: Location Based Banner

Here is the next generation of interactive web banners. Tel Aviv agency Shalmor Avnon Amichay/Y&R promoted the Yellow Pages augmented reality location-based app by creating a banner that does the same thing. Here “location-based” means it surfaces nearby businesses based on where you are.

The banner opens your webcam and lets you see the businesses around you. Wave your hand to switch between businesses. Click a business to jump straight to its Yellow Pages listing.

A banner that behaves like the product

The clever part is that this is not “interactive” for decoration. It is a working demo of the core value proposition. If the app helps you find what is near you, the banner proves that promise immediately, inside the placement, without asking you to imagine anything. Utility products should be advertised by demonstrating usefulness, not by describing features.

The mechanic: webcam as context, hand wave as UI

The flow is intentionally simple. Turn on the camera. Overlay nearby business options. Use a wave to move through results. Use a click to convert curiosity into action via the listing page.

In local discovery experiences, the strongest persuasion is a live, context-matched preview of usefulness rather than a feature claim.

Why it lands: it removes the “so what” gap

Most directory and local-search advertising dies in the space between promise and proof. The real question is whether your ad can turn a promise into proof without leaving the page. This banner collapses that gap, because it starts with your own context, then shows results, then lets you act. The interaction is the explanation.

Extractable takeaway: The fastest way to make a utility app feel essential is to let people experience the “aha” moment before they ever leave the page they are on.

What Yellow Pages is really trying to achieve

The business intent is to reposition Yellow Pages as modern, digital, and situationally useful, not just a legacy directory brand. The banner also creates a clear performance path. Engagement inside the unit, then click-out to a listing that can drive calls, visits, or follow-on app consideration.

Steal the demo-first local discovery pattern

  • Mirror the product in the ad. If the product is a tool, make the ad behave like the tool.
  • Use one gesture people understand. A wave as “next” is instantly legible. No tutorial needed.
  • Keep the ladder of commitment short. Preview. Browse. Click through. No extra steps.
  • Make the experience readable for bystanders. Obvious motion plus clear on-screen change sells the mechanic in shared environments.
  • Watch privacy optics. If you turn on a camera, be explicit that it is for interaction and context, not identification.

A few fast answers before you act

What is a “location based banner”?

It is a banner ad that adapts its content to the user’s situation, typically location or environment cues, so the ad can show relevant nearby options instead of generic messaging.

How does this Yellow Pages banner work?

It opens a webcam view, overlays nearby business options, lets you wave to cycle through businesses, and lets you click a result to open the corresponding Yellow Pages listing.

Why use a webcam at all?

Because it makes the experience feel immediate and personal. The ad becomes a live “finder” interface rather than a static claim about finding things.

What makes gesture-controlled banners risky?

Friction and variability. If the gesture detection fails or is unclear, users assume the ad is broken. The interaction must be forgiving and the feedback must be instant.

What is the safest way to replicate the idea today?

Keep the mechanic to one simple input, provide clear on-screen feedback, and ensure the user can still get value even if they do not enable the camera.