web sponsorships and takeover guidelines - the · pdf file ·...

Web Sponsorships and Takeover Guidelines Updated November 2015

1

1. Technical

a. Sponsorship skins should be 2560 pixels in width and 1200 pixels high. Skins cannot run the full length of the page.

b. Sponsorships running on a city page that have their ad in the right rail integrated into the skin will be executed

differently to accommodate times when a weather warning exists on the page.

o On a regular day when there is no warning, the skin’s vertical position will be set at -‐74 pixels. o During times when the weather warning bar is present, the skin’s vertical position will be set to 0 pixels to

ensure that the skin’s design will always align with the ad in the right rail.

c. There are 3 options to end a skin:

i. Fade -‐ Fade to solid should happen within the 1200px area. It should be 350 pixels high. Fade should start 850 pixels from the top of the skin down to the 1200px mark.

ii. Hard edge iii. Border – This cannot be red in colour

d. Skin should fade to TWN/MM’s default blue background colour #2670af.

e. All skins will have a ( X CLOSE) button in the top right corner at 1885px from the left and 76px from the top. When

clicked, it will close the skin to reveal the original background of the site. All associated ads running in existing ad

spots will remain as is. The close button font and colour can match the creative design but it must be clearly visible

and be a minimum of 60px wide and 20px high. The close is user-‐initiated and can only happen AFTER the skin has

already loaded. The skin will reappear if the page is refreshed.

f. Skins running on pages with sidekick ads should be a complete skin with the image continuing behind the TWN/MM

site. Sidekick ads will push the TWN/MM site to the side showing the part of the skin that usually hides behind our

content.

g. There should always be a navy bar running across the top of our site. It should always be TWN/MM’s shade of navy

(#3e618f) and 4px high. Below the navy bar will always be a grey tool bar that is 35px high.

h. Sponsorship skins cannot run behind our content area.

i. For an effective sponsorship, key elements on a skin should be within our most popular supported screen resolution.

Please refer to our most current “Top Browsers, Devices, Operating Systems & Screen Resolutions” document for our

latest statistics.

j. All sponsorship/takeover/skin wrapper images must be hosted on the TWN/MM servers. This does not include the ad

units within the sponsorship (such as the leaderboard ad, big box etc.), which may be hosted on third party ad

servers.

Please provide detailed feedback for each revision. There is a 3 revision limit by our design team.


2

2. Creative

Any creative submitted by the client will be reviewed by our internal Design Team to ensure it meets the criteria laid out in

this document and the TWN/MM brand guidelines. Sponsorship skins are offered to complement the ad units and should act

as supportive imagery to the client messaging. Skins should not over-‐power our brand and content. Takeover skins that make

it difficult to read our weather content due to excessive and multiple imagery will not be approved.

i. Branding

TWN/MM logo or site should never be overshadowed by graphics, messaging and/or logos, and should always remain

the primary brand. The TWN/MM website’s logo, size and colour should never change. Client logos, messaging and

graphics will not compromise The Weather Network and Météo Media brand. This includes oversized logos placed

next to ours and repeating logos tiled as a background.

a. Only one logo can appear a maximum of one (1) placement within the skin. b. The logo can be a maximum of 190 pixels high and 190 pixels wide. c. Placement of the logo can be anywhere on the skin below the y-‐coordinate of 640 pixels such that it does not

interfere with the TWN/MM brand logo and content. d. Logos that have images and numerical elements that may be confused with a weather condition or temperature

will have to be approved by the internal TWN/MM team. e. The area of the skin behind the TWN/MM brand logo may have to be altered by our team to ensure that our

brand standards are met and not altered by the background skin elements.

ii. Weather Alerts

a. Client creative will not mimic, interfere, cover or obscure weather data or warnings.

b. Executions should not use bold, striking colours that may be perceived as warnings or alerts (ESPECIALLY RED MUST BE AVOIDED since it is a reserved colour for Alerts). If red is a part of the client’s brand/campaign colours and has to be used, it has to be used sparingly and is subject to approval by the internal TWN/MM design team. This is to ensure the integrity of our alerts and warnings distribution system.

* Please note that whenever there is a weather alert present, on first load, a red weather alert info page will populate the entire city page where the alert exists. Sponsorship skins will not populate an alerts page. The skin will be viewable as soon as the user exits the alerts page to view their city page (refer to 6.ii).


3

iii. Copy

Sponsorships should complement the ad unit and should act as supportive imagery. They should not include

additional ad units. These types of skins will not be approved. In addition:

a. Minimize the use of repetitive copy. Copy should not completely mirror the copy within the ad. b. Copy within the sponsorship skin will be limited to 50 characters total and not exceed the font cap height of 58

pixels depending on copy orientation. See options below. c. Copy should reside below the y-‐coordinate of 640 pixels. d. If the skin is integrated with the ad in the right rail, copy (and logo) should reside below the y-‐coordinate of 714

pixels. e. There should be a 25-‐pixel breathing space between the TWN/MM site and takeover copy (and logo) on the skin. f. Copy should not take away from the TWN/MM brand and content (refer to 2i).

Options for including copy on takeover skins, only one option can apply per takeover skin: Option 1: Use of a header tag with copy running vertically along one or both sides of the TWN/MM site.

Specifications • Maximum cap height of 58 pixels

• One line of text per side

• Maximum 50 characters total on the skin including spaces

Option 2: Use of a header tag with copy running horizontally within one or both sides of the TWN/MM site. Specifications • Maximum cap height of 30 pixels

• Can run into multiple lines

• Maximum 50 characters total on the skin including spaces

iv. Click Thrus

Skins will not be clickable and must not contain buttons or messaging that suggests a click through.

v. Other

a. The purpose of the skin should be to support the ad units on the page. It should not be used to display additional ad units.

b. Sponsorships & takeovers should avoid repetition e.g. avoid using the same ad in the leaderboard, billboard or big box and skin. As an alternative to repeating ads, a transparent ad unit can be substituted for better integration (either in the masthead or in place of the right column ads).

c. We’re a family friendly, brand safe company and we do not allow images of nudity, sexual innuendo, discrimination and/or violence on our website. Derogatory messages and images are not allowed.


4

3. Reference

i. EFFECTIVE TAKEOVERS: Designing Homepage Takeover Skins 101

http://designcareer.wordpress.com/2012/05/14/designing-‐homepage-‐takeover-‐skins/

4. Submission

i. Sponsorship Assets

Clients should have the proper rights for all assets provided. All assets should be submitted to the Interactive Design

Team using the following guidelines:

a. In order to facilitate revisions, we ask that all sponsorship assets be submitted in their original format. Acceptable file formats include (in order of preference):

1. .PSD

o Photoshop CS5 or higher o Layered working file o High quality images

2. .AI

o Illustrator CS5 or higher o Layered working file o Vector, high quality images

3. .EPS

o Layered working file o Vector, high quality images

4. .PDF

o Layered working file o Vector, high quality images

5. .JPG

o High quality images

6. .TIF

o High quality images

http://designcareer.wordpress.com/2012/05/14/designing-homepage-takeover-skins/


5

b. Fonts used should either be provided to us, or converted to outlines (Illustrator). Acceptable font formats are: 1. .OTF 2. .TTF

c. Creative assets usually expected from clients include: logos, stock photography, fonts and brand guides (if applicable).

d. If a flattened file is provided, please make sure to send along the source file as well (PSD working file).

ii. Ads

For ad specs, please refer to our “Online Advertising Specifications” document.

iii. FTP Client Access

Large files (> 3MB) that cannot be sent via e-‐mail, should be sent to our FTP site. Upon successful upload of all files please

email to your Sales Representative the location of the assets and the folder’s names.

FTP Host Address: ftp2.twncs.com

Username: clientaccess

Password: ftpsite

Directory naming convention: CLIENT_DATE (ex. Pelmorex_june122011)

*Please contact your Sales Representative if there are any questions or issues that arise.

5. Timeline

We need at the very least, a 5-‐business day lead time for internal approvals, revisions, and implementation. Please keep in

mind that lead time starts as soon as we receive all assets including banner ads.


6

6. Examples

i. Integrated Skins

When a weather warning is present, skin moves down 74 pixels to align with the integrated ad unit in the right rail.

Without a weather warning, the skin sits 74 pixels higher.


7

ii. Weather Alert

Info Page: Cannot run with a skin.

Alert banner on a city page: Can run with a skin


8

iii. Guides

Screen resolutions


9

User Experience: We want our users to be entertained by an immersive takeover creating one expansive brand experience.

Sample: Do’s

i. Skin that does not integrate into the right rail ad but uses supportive imagery


10

ii. Supportive Imagery with minimal copy


11

iii. Product packaging placement

iv. Logo on skin


12

Samples: Don’ts

i. Don’t: Background skin that distracts from our logo

ii. Don’t: Excessive amount of copy on skin


13

iii. Don’t: Numerical messaging that interferes with content and weather data

iv. Don’t: Skin displaying additional ad units


14

v. Don’t: Oversized repetitive logos

vi. Don’t: Copy and logo too close to the masthead


15

vii. Don’t: TWN brand lost in the background.

viii. Don’t: Red skin that could be mistaken as an alert If red is a part of the client’s brand/campaign colours and has to be used, it should be used sparingly.

web sponsorships and takeover guidelines - the · pdf file ·...

Documents