HTML5 Advertisement Creative Specifications · 2014-08-06 · Navigation bar Navigation bar < <...

2
Last updated: 12:47 - 17/06/2014 HTML5 Advertisement Creative Specifications For more information please email: [email protected] ASSETS BREAKDOWN Rich Media HTML5 ads only run on iPad versions 2 onwards currently. Android and iPad 1 make up a small percentageof the audience the vast majority on iPad 2 and above – the latter will see HTML5 ads with iPad1/Android users getting a non-clickable static format. Clients therefore need to provide all the following assets: 1) HTML5 Zip Bundle – consisting of the index.html file (main advert page markup), images, CSS & JavaScript and any other assets (fonts or videos you may need to package). Full HTML5 spec is on the next page. 2) Landscape and Portrait Static Assets. Spec below. STATIC ASSETS SPECS 2 static assets should be provided for the HTML5 ad for fallback/offline experiences. These should NOT contain a call to action as they are non-clickable in the app and a call to action may be misleading to our users. One image will be used for Landscape – the other for Portrait. Each image should be produced to the following spec: • Dimensions: 2048px(w) x 1382px(h) (Landscape) 1536px(w) x 1890px(h) (Portrait) / File size: 700KB per image Image formats: JPEG Portrait Landscape Navigation bar 1536px Navigation bar + iPad 1 1382px 2048px 1890px Portrait Landscape

Transcript of HTML5 Advertisement Creative Specifications · 2014-08-06 · Navigation bar Navigation bar < <...

Page 1: HTML5 Advertisement Creative Specifications · 2014-08-06 · Navigation bar Navigation bar < < HTML5 Advertisement Creative Specifications ricH MediA/HtML5 sPec • Maximum file

Last

up

dat

ed: 1

2:47

- 17

/06

/20

14

HTML5 Advertisement Creative Specifications

For more information please email: [email protected]

Assets BreAkdownrich Media HtML5 ads only run on iPad versions 2 onwards currently.

Android and iPad 1 make up a small percentageof the audience the vast majority

on iPad 2 and above – the latter will see HTML5 ads with iPad1/Android users

getting a non-clickable static format.

Clients therefore need to provide all the following assets:

1) HtML5 Zip Bundle – consisting of the index.html file (main advert page markup), images, CSS & JavaScript and

any other assets (fonts or videos you may need to package). Full HTML5 spec is on the next page.

2) Landscape and Portrait static Assets. Spec below.

stAtic Assets sPecs2 static assets should be provided for the HTML5 ad

for fallback/offline experiences. These should not

contain a call to action as they are non-clickable in

the app and a call to action may be misleading to

our users.

One image will be used for Landscape – the other

for Portrait.

Each image should be produced to the following spec:

• Dimensions: 2048px(w) x 1382px(h) (Landscape)

1536px(w) x 1890px(h) (Portrait) /

• File size: 700KB per image

• Image formats: JPEG

Portrait

Landscape

Navigation bar

1536px

Navigation bar

+ iPad 1

1382px

2048px

1890px

Portrait

Landscape

Page 2: HTML5 Advertisement Creative Specifications · 2014-08-06 · Navigation bar Navigation bar < < HTML5 Advertisement Creative Specifications ricH MediA/HtML5 sPec • Maximum file

Navigation bar

Navigation bar

< << <

HTML5 Advertisement Creative Specifications

ricH MediA/HtML5 sPec• Maximum file size: 2.2MB

• The file size should be the total weight of your HTML5 ad – HTML, JavaScript, CSS, images and any other assets compressed (i.e when made into a .zip file). We recommend hosting video on a CDN or external URL that your ad references to ensure that it doesn’t contribute towards your overall ad-weight.

• Dimensions – ads should be designed to take up a full screen. Landscape: 1024px(w) x 768px(h), Portrait: 768px(h) x 1024px(w)

• Images – ideally you should code your ad to detect retina display and provide/ package your ad to contain both retina and non-retina images where possible.

• Avoid using iframes in your creative – these conflict with our app security settings and open a new browser window.

• Video – ideally use the HTML5 video tag rather than embedded players such as youtube – again as most third party players will be embedded via an iframe which conflicts with our app.

• Click Thru’s/Interactive content that connects out to the internet should have offline detection built into the creative. If a video that is externally hosted cannot be accessed by the ad creative (due to the device being offline) a alert/popup should be displayed to the user. Any content within an ad that is depedent on an active internet connection can make use of the browser navigator.onLine property to check if the device is connected or not before showing a prompt or connecting out to the internet.

• Reporting – any bespoke metrics/interactions you are trying to track should be hardcoded in your ad HTML. News UK can only report on views for these ads and nothing else. When using pixels – ensure you load them in image tags and not iframes to avoid security issues with our app.

• Creatives are directly hosted by News UK in the form of a zip bundle which is delivered to users devices within the edition and unpackaged there.

nAtiVe BUttonsWe apply native page turning buttons to the left and right of the ad to avoid conflicts with any JavaScript used to detect touch/swipe events in the ad with our own native application detection for swiping. These buttons are overlaid on top of your creative automatically and it’s worth noting their positons (screenshots below) to ensure any vita copy or imagery isn’t covered by these.

nAViGAtion BAr In both portrait and landscape mode – allow for 80px at the bottom to be reserved as a safe area for our native navigation that is fixed throughout the app – ensure no text copy or call to actions or important imagery is placed here.

sUPPLyinG yoUr AdVertiseMentAll assets and the asset list must be uploaded via FTP to:https://ipadcontent.news.co.uk/EFTClient/Account/Login.htmUsername: Agency1 Password: @gency12

Please note: we cannot accept any files by e-mail.