Designing Full Page Takeovers 101



Imagine going to your favorite website for news on your particular interest in life (sports, tech, games etc.). You’re used to mentally screening out the banner ads on the page–they’re always in the same place and seem the same. You’re about to check out the latest news when suddenly the web page opens up to reveal some strange new ad you’ve never seen before.

These are full page takeovers–an immersive ad experience that hijacks the page for a few seconds. They emerged due to increasing pressure on advertisers to be entertaining enough to cut through the daily clutter of the online world. They make a much bigger impact, are more easily remembered and get more interaction than banner ads.

Also given other names such as website takeovers, rich media takeovers, page morphs or overlays, full page takeovers are appearing more frequently all over the web. They run the fine line between having web users who think they are annoyingly intrusive and those who think they are really cool. In this post I will be looking at the best practices for designing the latter.

In this Mediamind takeover the ship draws the user into the trailer below–click above to see original


As with all new art forms they tend to replicate a previous art form e.g. early silent films mimicked theater productions and early TV replicated radio. So too with the web as most publishing sites mimic newspapers and magazines. Most web terminology even comes from its print predecessors. Animated ads may be more eye-catching but their placement is still treated like press ads.

The notion of webpages being finite like paper is a misnomer. Really the web experience is more like a window onto a layered digital world made of pixels. Emphasizing what is unique to the web as an art form, it can appear to change format, often tricking the eye into reacting as though it was a real world object in the process. The size of the canvas available to play with is big, both physically and metaphorically.

Thus the web context is key for full page takeovers to be successful. For example in the Tron example above, the ship draws you into the lower ad where the trailer plays while the top ad allows you to buy tickets to see the movie. By contrast, this Playstation Vita example from Ireland is so involved that it may as well be its own site rather than a full page takeover.

This Luftansa takeover from Flashtalking interacts with it’s host page nicely–click above to see original


A good full page takeover tells a story in about 8 seconds (the usual length before the ad experience automatically closes). Some kind of meta story needs to remain in the mind once the ad ends. The user may remember the experience but not necessarily the details. This kind of subconscious impact is more appealing to an individual and drives them to want to do something such as clicking to learn more, watch a videos, etc.

Because they are so intrusive a good full page takeover needs to create a sense of awe so the user thinks ‘how did they do that?’. In order to elevate the brand in a user’s mind, a takeover should not be gimmicky but rather it should use an effect that is intrinsic to the brand. For example in this Insidious pushdown when you click ‘watch the trailer’ the eyes follow the cursor as it moves around, adding to the innate creepiness of the experience (designed by Justin Herman).

I often like to keep some part of the original page visible, even if it is just the masthead. This keeps the eye engaged and avoids the user feeling like they have been sent off to a new site unexpectedly. Clients may feel they have a larger canvas in which to put their brand but in reality the average user finds it annoying since they would rather be enticed to the experience and not driven unwillingly to it. In the Luftansa example above the takeover was placed over the page regardless of content–as a result it was also able to be served across many sites in one day (a Flashtalking specialty–third party hosters of full page takeovers).

RFP illustrating the HP OfficeJet’s ability to print to a printer anywhere in the world (design Rick Byrne)


In order to look at how a full page takeover can organically grow out of a brand and still be entertaining I thought I would detail one project’s conception process.

The original brief for HP Officejet printers was generic with none of the usual clues/restrictions of an RFP except for the request for custom creative. CBS Interactive had already done this 300×600 Filmstrip for HP so I thought it didn’t need to be a nuts and bolts ad unit but something more splashy.

For inspiration I asked myself what is so unique about these printers? Researching further I discovered that HP Officejet printers all have the AirPrint feature which means they can print from the web to a printer located anywhere in the world.

Looking at HP’s official page for AirPrint I saw they used a paper plane as part of the feature’s imagery. I then asked myself what would be interesting to the astute, tech focused audience of CNET. I soon hit upon the idea that the CNET page could fold up into a paper plane that sends itself from the web to the printer. A simple story that is hard to forget even if the advertising copy isn’t read.


RFP for Lenscrafters: the user can move the in focus area around via the cursor (design Rick Byrne)


For most of these full page takeovers a Flash file is placed over the page’s content. Some full page takeovers can demo a more involved process/activity before collapsing. If the demo strikes a chord with the user they could click to relaunch the takeover but this time with a deeper and more involved experience such as sound or longer videos.

For some takeovers a snapshot of the site’s page is taken via an automated screenshot tool every 15-30 minutes (news changes throughout the day). The jpeg is then fed into the code and distorted from there. Frequently a standard banner ad on the page draws the takeover files from the publisher’s server. Frequently it will come from the third party hosting the ad (e.g. MediaMind, FlashTalking, Pointroll etc.)

In the example above for Lenscrafters, two screenshots of the page would be fed into the Flash file simultaneously (one blurred on top and one sharp below). The upper blurred jpeg would have a circular mask with a blurred edge that can be moved with the cursor. The usual arrow image of the cursor is substituted for a pair of glasses. The automated version of the takeover demos the cursor moving around before collapsing back into the banner ads. If clicked, a second, user initiated version would launch where the cursor/crisp area could be moved around the page.

The file size limit caused the animation‘s bitmapping-compare it to the sharpness of background image


Since I’ve done several full page takeovers and pitched many more here are some tips that I’ve picked up. Apologies if they seem obvious. I’m stating them here because I see these points constantly not applied:

– have a clear call-to-action in the takeover for users that are interested
– add a replay button: if it’s that good users will want to see it again
– add a ‘click to hear sound’ button if sound is present
– add a close button as some people will not like the intrusion of a full page takeover

– Pay attention to a takeover’s CPU usage–some sites will have caps
– file size limitations may be low–bitmapped imagery destroys an ad’s believability (see above)
– many sites have frequency caps i.e. the takeover will only auto initiate once a day
– some sites have cut-off on the duration of a full page takeover–CBS Interactive’s is 8 seconds
– avoid auto-initiated sound as it is considered one of the most annoying experiences online
(if you don’t believe me click here to see what it’s like-make sure your audio is switched on)

Banner ads
– the takeover and its leave-behind banner ads should be designed together
– the page’s banner ads will need to summarize the experience and house a replay button
– some pop-up blockers may prevent the full page takeover from launching from the banner ad

inception_takeover_620 Discovering hidden layers beneath reality–click above to see original (design: Keith Echeverria)


This post provides a good understanding of full page takeovers that if done well, really get through to the user. Don’t just take my word for it. The numbers back me up as takeovers have a much higher click through rate (2-3%) compared to the average for banner ads (0.01%). However, eventually we, the users of the internet, will get jaded of full page takeovers as they become commonplace.

So what will happen then? As in all art forms something else will replace them either technologically (such as HTML 5) or new thinking on how they should be handled will emerge (or more likely both). With geotargetting, cookies and word search cues, ads may become much more specific to the individual’s headspace at that time. Users may expect less intrusive generic takeovers and more engagingly customized ones for a better web experience.

However, no matter what comes along to replace full page takeovers it will still need to tell a story intrinsic to the brand that uses the medium uniquely and still retains that sense of wonder in the user to be effective.


Companies that specialize in creating full page takeovers:
and showcase
MediaMind showcase
Pointroll showcase

Some live links to takeovers:
FedEx on The Economist
Ford page chainsaw
In Bed photo tagger iPhone App
Luftansa passenger iPad
Norwegian Cruises wave turn
MSN DK Gaming Mod Nation

MSN UK Green Lantern movie
MSN Mazda
MSN Fr MacDonald’s
Unstoppable movie on
Volvo on (Click the buttons to the side)
Windows on CBSSports

3 thoughts on “Designing Full Page Takeovers 101

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s