Ad Specifications

iPad Bespoke Ads Guidelines

1. Keep it simple!

2. The creatives should be designed for the full iPad screen in both portrait (768×1024) and landscape (1024×768) modes. You can use CSS media queries to detect orientation.
@media screen and (orientation: landscape) { … }
@media screen and (orientation: portrait) { … }

3. There should be only 1 HTML file within the creative (advert.html). You can have multiple CSS and JS files, but try to keep these to a minimum.The advert should be self-contained, so please avoid linking to external resources, unless you are featuring a video (see point 6), or have a tested fallback for when the users are offline or on slow connections.

4. Content changes should be JS driven. If you must use a DOM manipulation library, http://zeptojs.com is recommended over jQuery.

5. Animations should use CSS3 transitions; performance is a lot better.

6. Video is allowed, but the asset file MUST be hosted on the web and not included within the creative. Keep in mind readers on slower connections when encoding the video and that it may incur extra charges for those on 3G. Also bear in mind that the app can be used in offline mode, so it’s advisable to not show the video in those cases. You can use if (navigator.onLine) { … } to check the status.

7. Swipe gestures should be restricted to small areas of the screen, and not close to the left and right screen edges, as this may interfere with the navigation of the main app. Listening for swipe/touchmove events across the entire creative is NOT allowed.

8. Links within the creative need to open in a separate browser window. Please note that javascript links will open inside the app. Only html links will open in a separate browser window. One possible way of emulating html links in javascript is suggested here: http://stackoverflow.com/questions/7930001/force-link-to-open-in-mobile-safari-from-a-web-app-with-javascript.

9. Please keep the final ZIP file to around 1.2MB

10. The adverts run within a Webkit driven webview. Please make sure you test your advert in Ipad Safari. Although this will not give you a full picture of the advert’s performance inside the app, at least it will help you notice and debug some of the common issues which are likely to occur. Please note that while we are happy to help you diagnose any issues that you are unable to test for, you are responsible for running your initial testing in Ipad Safari.

11. Simplicity (yes again!). While bespoke ads allow a lot of flexibility; fewer moving parts (AJAX, lightboxes, galleries, etc), means less chances of things going wrong.

Previewing:
The ads can be previewed at
http://ipadpreview.gutools.co.uk/upload

(uploader / password)


Checklist:
- The final creative should be in ZIP format
- It MUST include one file called advert.html
- It MUST include one file called bespoke.json

bespoke.json should contain:

{
  "type": "bespoke",
  "campaignID": "%%CAMP%%",
  "advertAssets": "%%CDN%%/RealMedia/ads/Creatives/%%CAMP%%/NAME-OF-FINAL-CREATIVE.zip"
}