Designing Homepage Takeover Skins 101

WHAT ARE SKINS?

Called many other things such as wallpapers, wrappers, homepage takeover skins, 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 experience 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.

CNET Networks (now CBS interactive) was one of the early adopters of skins on it’s Gamespot site and now hosts approximately 900 skins a year across it’s network of sites. Skins are now beginning to appear everywhere on the web from corporate websites to IMDB. If you want to have a go at making your own skin go to Twitter’s page here

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 5 years and devised the CBS Interactive’s standards for them so I thought it was time to examine them in detail.

One of the most elegant skins I have ever seen

THE USER’S EXPERIENCE

Many advertisers think of a 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. Less 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 needs 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.

Compare the single high impact of the top takeover to the smaller multiple impacts of the bottom takeover

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:

1. 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.

2. 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.

3. 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.

Top: the IMDB client approved the elegant skin Middle: with safety area Bottom: what most users saw

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 center aligned (like most current sites) but you get the 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 1680 x 1050 px display size

Shadows highlight the clickable areas in a takeover

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 the 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 less 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 color
• this background color (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

A good example of a toggle skin for the movie Sucker Punch (designed by Justin Herman)

OTHER TYPES OF SKINS

Not all skins have to be static although they are by far the easiest to create. There are 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 enrichs 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.

This skin cleverly supports its ads: balls get flicked across the top ad and drop down to the bottom hand

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 a bad painting, 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…

LINKS

http://browsersize.googlelabs.com
https://twitter.com/settings/design

Specs
http://www.imdb.com/adspecifications/wrap
http://www.imdb.com/adspecifications/stickywraps
http://ads.ign.com/specs/IGNSpec.html

More details
http://en.wikipedia.org/wiki/Clickthrough_rate
http://en.wikipedia.org/wiki/Pixel#Resolution_of_computer_monitors
http://en.wikipedia.org/wiki/Display_resolution
http://en.wikipedia.org/wiki/List_of_common_resolutions