Leveraging brand exposure by maximising visibility when booking online advertising space should be a top priority for digital savvy marketers. And website takeover banners provide an ideal opportunity to do that. Yet, few understand how to design homepage takeover skins.
This guest post by Rick Byrne, Interactive Creative Director at CBS Interactive (re-published with acknowledgement to Design Career), provides advice on how to design homepage takeover skins with examples.
WHAT ARE SKINS?
Known by many other names, including wallpapers, wrappers, homepage takeovers, gutter ads or left & right rails, a ‘skin’ is a static background image that serves as a branded frame for a web page. By wrapping the page’s banner ad, a “perfect” skin focuses the user’s attention towards the page’s clickable ad units similar to a painting’s frame–focusing the viewer’s attention onto the picture but not competing with it.
Skins are now beginning to appear everywhere on the web from corporate websites to IMDB. Despite this, if you Google ‘designing homepage takeover skins’ (their most common name), or any of the other names above, you come up with nothing. I’ve been working on skins daily now for many years and devised the CBS Interactive’s standards for them so I thought it was time to examine them in detail.
THE USER’S EXPERIENCE
Many advertisers think of “skin” as even more space in which to put their advertising messages (logos, products, ‘buy now’ etc). However, a website’s user is often overlooked in the attempt to bombard them with the same repeated messaging. Fewer premium sites tend to facilitate the latter approach. More premium sites tend to expend extra energy juggling the user’s, advertiser’s and site’s need to create a more balanced skin experience. It takes more effort but it is definitely worth it to keep a site’s audience happy.
Skins should be thought of as part-UX design and part advertising. Ideally, advertisers want the site’s user to be entertained by an immersive experience rather than wince at an eyesore. As a result, creating one expansive brand experience is the key to a good homepage takeover rather than a series of smaller distracting experiences (see the two Walking Dead takeovers below).
Another consideration is the type of audience. Skins on gaming sites are part educational as it’s users want to be visually entertained and yet be informed of new games. A skin on a business site may be more toned down for a more conservative audience who may see a skin as distracting. Entertainment sites usually feature a film, tv or music star in their skins.
WHY SHOULD SKINS AVOID REPETITION?
I used to see a lot of clients asking for an exact repetition of the page’s banner ads in the skins as though they were two skyscrapers on either side. This approach is similar to thinking “maybe the user will look over here, or up here or down here” and that everywhere they look the message must be the same. In reality, the user reacts badly to these types of skins for three major reasons:
- It creates a negative user experience by being visually unattractive. After all, the user is on that particular webpage for a specific reason. They may already mentally wince at a takeover. Why blow the chance to make a good impression because of the visuals when the offer/price/product is already good.
- By exactly repeating a banner ad’s imagery and messaging in the skin it makes the latter look clickable. Since the mouse tends to follow where the eye is on a page a distracting skin steers the user’s attention away from the banner ads which actually are clickable. As a result, the click-through rate (CTR) is driven down.
- The average user already sees so many brands creating great web experiences through skinned homepage takeovers all across the internet. As a result, a brand that creates a sub-premium experience is seen by a user as a sub-premium brand.
SCREEN FACTORS
A skin is ‘ad served’ to slot under all the page’s content. While a skin’s specs could state that there are maximum dimensions of 1600 x 1000 px of this slot, in reality, the site’s ad server can usually take a file of any dimensions. Consequently, skins are often designed to be huge because of the maximum dimensions available (see the IMDB example above). Physically, the only real limitation is the file’s k size cap (e.g. CBS Interactive’s is 150k, IMDB’s is 120k, YouTube is 256k).
However, what the end user is likely to see varies greatly depending on their individual monitor size or settings. At CBS Interactive we recommend keeping the key imagery within a designated “Safe Area” approximately 1200 px wide and 600 px deep. We can assume most (but not all) of our sites’ users will see everything in that area. We recommend putting all logos, product shots and key messaging within that area in order to create a user experience that will work across multiple browsers and screen resolutions. Anything beyond that should be seen as a ‘bonus’ and would ideally just feature supporting imagery rather than the fine detail of banner ads.
To get a feel for what this display screen issue is like Google set up an interactive page here. Simply type in a particular site’s URL to see their matrix overlaid on top of it. The matrix is a little too small by current standards and is left aligned instead of centre aligned (like most current sites) but you get a general idea.
Added to this are other variables, none of which can be controlled by the host site:
- Individual users can have their browsers set to zoom in or out
- Gamers are likely to have wider than average monitors
- Manufacturers are increasing the physical size of their monitors’ size over time
- Apple is now supporting a 1680 x 1050 px display size.
SKIN DESIGN TIPS
Since I’ve done thousands of skins over the years, 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:
Logos in the skin
- I frequently advise that logos be left off skins
- Large logos get cut-off if they are partially outside the safety area
- Logos within the safety end up being too small for a dominant brand presence
- Clients frequently agree when shown a jpeg of the safety area in place
- Logos should be on the right side of the skin to avoid clashing with the site’s logo in the masthead.
Scrolling or Static skins
- Sites have either ‘scrolling’ skins or ‘fixed’ skins
- Fixed skins stay in place and remain constantly visible as the user scrolls down the page
- Scrolling skins move and disappear as the user scrolls down the page
- Most skins on the web are now scrolling.
Page shadows
- Page shadows direct the user’s attention to the clickable area/ads
- However, skins without a shadow around the clickable areas look more elegant
- Skins without shadows are like banner ads without buttons i.e. they get fewer clicks
- Increasingly skins are appearing on the web without shadows
- The shadow layer can also have a black panel (covered by the content) to keep the final file size down.
Backgrounds
- Add a gradient at the bottom of a skin in order to fade to a solid background colour
- This background colour (hex code) continues the expansive feel of the skin
- A product image can be large in the skin as a texture instead of being small inside the safe area
- Background imagery in the form of clouds, forests, cityscapes etc. make excellent supporting skins.
OTHER TYPES OF SKINS
Not all skins have to be static although they are by far the easiest to create. There is a range of options that we’ll see more of on the web as skins become more commonplace. As with regular skins, the key is to enrich the immersive branding experience for the user not to drive them away by bombarding them with messaging.
Toggle skins allow the user to change the page’s skin from a set of options such as the Sucker Punch example above where the user could pick a character to skin the page. Other fun things can be done in a skin such as the mouse giving off bubbles in this ABC example (seen by clicking here). It doesn’t take attention away from the existing takeover but enriches it.
CBS Interactive now supports animated skins such as the Skyline one found here (also designed by Justin Herman). The key is to make sure the animation isn’t overdone by treating it as another space for an animated Flash ad e.g. think of beer pouring into the skin filling from the bottom up for a Budweiser skin. Combined with the Toggle skin the takeover could also do something interesting that changes as the day progresses e.g. the skin could switch out to gradually darker scenes from a cityscape with undead creatures emerging from the shadows.
Some skins are also clickable. These initially have a higher CTR but this is generally caused by a lot of false clicks as users don’t realize that the sides of the page will direct them elsewhere on the web. The whole process creates a bad user experience and as a result, non-clickable skins are generally seen as a more premium offering.
CONCLUSION
Skins will become increasingly relevant as display sizes and monitor widths increase. More of the non-content area will be visible over time and rather than leaving a vacuum, I can see skins being increasingly omnipresent across the web. They could be intrusive or they could be cleverly entertaining like the Lumension example above. In developing these best practices for skins I chose the latter approach by putting the user’s experience as the cornerstone of the process.
By taking the user’s perspective, the craft of designing effective skins is easier since their role becomes that of supporting the page’s banner ads. Bad skins, like bad paintings, have a kaleidoscope of competing distractions that all sap the eye’s focus. Just like good paintings, good takeovers have a focus (banner ads) and a background that gives the eye a break (the toned down skin). Paintings may move you emotionally but good takeovers move you to click.
And maybe they’ll move you emotionally too…
Editors’ Note: This website works with designers to maximise clients homepage takeover skins. For rates see our advertising page.
