Tag: HTML5

DoubleClick: Fly over France HTML5 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.

McDonald’s: Pick N’ Play Billboard Game

McDonald’s: Pick N’ Play Billboard Game

You are walking through central Stockholm and a McDonald’s billboard does something unusual. It invites you to play a quick Pong-style challenge on the screen, using your own phone as the controller.

DDB Stockholm has created another interactive outdoor campaign for McDonald’s Sweden called Pick N’ Play. Passers-by use their mobile phones as controllers to play for a chosen McDonald’s treat. If they last for more than 30 seconds, they score a coupon that earns them free fast food at a nearby McDonald’s.

Reportedly, the interaction avoids an app download and instead uses a simple mobile web flow, with proximity checks (via phone location) so only people physically near the screen can play.

Why this one pulls a crowd

The mechanic is instantly legible. Most people recognize Pong in a split second, which lowers hesitation and increases participation. The billboard also creates a public spectacle, which adds social proof and makes stopping feel normal, not awkward.

Extractable takeaway: This is rewarded interactivity, meaning the payoff is gated behind sustained attention instead of a tap. In outdoor, that simple “earn it” rule turns a public glance into a deliberate, measurable action.

What McDonald’s is really buying

The prize is not the point. The real value is a measurable bridge from street attention to store visit. A time-based win condition filters for people who are actually willing to pause, focus, and then act, which makes the coupon a higher-signal trigger than a generic discount blast.

The real question is whether your DOOH idea can turn a public moment into a private, trackable action without adding friction.

In global consumer brands and retail environments, interactive digital out-of-home earns its keep when it connects a public moment of attention to a private, trackable action on a personal device.

Steal these moves for your next DOOH game

  • Use a mechanic people already know. Familiar rules beat clever rules in outdoor contexts.
  • Make the phone the interface. It turns a billboard into a controllable experience and a trackable session.
  • Reward endurance, not clicks. Time-in-game is a simple proxy for real attention.
  • Close the loop fast. A coupon that can be redeemed nearby turns novelty into footfall.

Last year they had challenged pedestrians to take pictures of McDonald’s food to get it for free.

A few fast answers before you act

What makes an interactive billboard work in practice?

An interactive billboard works when the invite is understood in seconds and the first action feels effortless on a phone.

Do you need an app to control a billboard with a phone?

No. Campaigns like this are often built as mobile web experiences so participation is immediate and friction stays low.

How do you stop people from playing remotely?

By verifying proximity. A common approach is using phone location to confirm the player is physically near the screen before the session starts.

Why use a 30-second target?

It is long enough to prove engagement, short enough to feel achievable, and simple enough to explain with one line of copy.

What is the business upside versus a normal coupon?

You get a higher-intent audience. The coupon is earned through attention and action, which tends to correlate with stronger redemption and store visitation.