PPA’S INTERACTIVE ADVERTISING GUIDELINES INTRODUCTION These guidelines can be used as a starting point for anyone creating and supplying an HTML interactive ad unit. As there is no industry standard as yet for interactive ads, the aim is to give designers, developers and media buyers the basic questions to ask a publisher’s app container. The second part of the document provides a glossary for commonly used terminology. These guidelines will be updated frequently to make sure they are applicable to the current publishing environment.
QUESTIONS TO ASK APP/PLATFORM Which app container do you use? Possible answers Adobe DPS Kaldor/Pugpig App Studio Exact Editions Padify Yudu Is this available on every platform? Possible answers: No, it is only available on iOS/Android platform(s). Yes, it’s available on all the platforms we support which are XXX. Is it available to every device on that platform? Possible answers: ● Yes, so your ad must be responsive to fit on each sized device ● No, but we support the following list of ‘hero’ devices ● Yes, but your ad will appear ‘letterboxed’ if the aspect ratio does not fit the device size. Do you provide assets per platform, or as one bundle that works on all platforms? Possible answers: One bundle must work on all sizes and platforms, so must be able to fit on portrait, landscape and tablets and phones. No, we require specific bundles for each platforms. Does the app work in both orientations, or is it locked? September 2014
CREATIVE CONSIDERATIONS What is the size of the live/safe area? Possible answers: We only take in iPad size (768x1024, 1024x768). The size must take into account navigation bars of xx pixels You should supply iPad retina and non-retina assets Are there any restrictions on gestures or interactions? Possible answers: Gestures must not conflict with our app’s gestures such as XX You cannot use non-supported gestures on XX platform What happens when there is no online connection? How does the app handle it? Possible answers: The app will display a ‘please connect to internet’ message The app will revert to a ‘fallback’ image that must be provided as part of the bundle Can I provide my own analytics? If so, what can I track? Possible answers: You can provide any analytics you want We provide XX analytics as part of every ad No, there are no analytics Do you allow the reader journey to take you out of app, for example when streaming videos? Possible answers No, videos must be played in app Yes, this is fine to allow access to external Safari Browser
SPECIFICATIONS What data capture do you allow? Possible answers: Allowed: Email, geolocation, username Not allowed: UDID, passwords How should I handle fonts? Possible answers: If you are providing HTML5 fonts must be OTF or WOFF fonts in a separate folder. Must be Webfonts What is the maximum file size? Possible answers: Economist: 10mb for interactive ad. September 2014
Do you have a maximum allowed length for videos? Possible answers: All videos must be streamed, they cannot be embedded Anything over 3 minutes is not allowed YouTube or other third party only
September 2014
GLOSSARY Aspect Ratio Generally refers to screen sizes, but rather than pixel dimensions it is the ratio between the length and height of a device. Common aspect ratios are 16:9, 4:3. Images are increasingly defined by aspect ratios. API (Application Programme Interface) An API enables applications to talk to each other. Break point The point at which layout changes. For example, the point where a two column layout on a tablet becomes a single column scrolling on a phone. Cache When you first enter a page the images and content are ‘cached’ (literally meaning stored) on your device. It means if you go back to the page it doesn’t need to load the date again. It’s already stored locally on your device. CSS (Cascading Style Sheet) CSS works in much the same way as style sheets work in print. They define a set of rules or styles that are associated with specific elements. Whereas in print they would refer to paragraphs or text elements in HTML they can refer to all elements, such as backgrounds, images, or boxes. Chrome (1) Google Chrome, a web browser (2) The chrome is a native element of an app that often provides navigation items, settings and functional elements of an app. Device Independent Pixel (DIP) A relative, rather than absolute, measurement that allows sizes to be defined across differently sized devices. Digital edition A version of a publication that is available on digital platforms. It might be a replica digital edition where it is exactly the same content and running order as the print edition. Or it could be a version of that publication that includes the same content plus exclusive content only available via the digital editions. Device size A device size is the combination of the pixel dimensions, the physical size and the aspect ratio. Some points to consider below: Pixels vs Points: Pixels can be used to define sizes of devices or content. Points can also be used, but there is no direct mapping of pixels to points. Pixel size: Pixels can be different sizes. The smaller the pixel, the greater the density and higher screen resolution. It is important to consider the physical size of a device in September 2014
conjunction with the pixel size. Physical size: Devices come in a wide variety of sizes. Physical sizes are normally expressed in millimetres or inches.
Enhanced The next step up from a basic replica edition or static ad. Enhanced means that there are limited interactive functions. This can differ between publishers. An example might be a flat image with a single tap through to a website. Error message A message that is displayed if content is unavailable or there is a connection problem. For example - you may wish to display an error message to readers who are offline and trying to access online data. Fonts Typography, a certain weight style and format of a typeface. Fonts can be embedded, vectorised or outlined. Hotspot/tappable/click through Interactive item on a page. A button you can click or tap that will launch more content or link through to another page/object. HTML (HyperText Markup Language) HTML is the standard markup language used to create web pages. By applying markup to elements browsers can render content in a specific way. HTML5 The combination of HTML, CSS and Javascript that enables users to create more elaborate pages. Interactive Ads that have functionality beyond a background image. This could be anything from moving text, website tapthroughs to an ad that functions as a game. Interstitial (the gap between two spaces) Meaning ‘in between’ An empty space or gap between two objects. For example an advert that exists between editorial content. Javascript A programming or scripting language that works across all platforms and can be used to add automation & interactive features to web pages Native An app that is built specifically for the platform is on. For example, an app that is written for iOS specifically and would not work on Android because it is iOS code. Offline A device is ‘offline’ when it has no access to network connectivity via WiFi or 3 or 4G. If your September 2014
content requires internet connectivity to display you may consider an ‘offline’ view or holding image for readers that have no connection. PDF (Portable Document Format) A closed file format that allows easy transfer of documents. Files are self-contained and are platform independent. Preload Pre-loading is a way of getting content before a user accesses a page. When a reader arrives the content is already loaded rather than a user waiting for a page/video to launch. Replica A facsimile of the print edition using the same creative elements. Probably starting off as a PDF, the files are generally reformatted for digital devices. Basic replicas editions tend to have no interactive elements. Responsive layout Responsive layout, intelligently responds to the size of the screen the content is displayed on. For example, where there is a larger screen such as a desktop it will include every content element, but on a small device such as a phone it will exclude non-essential elements. RGB Used in all digital devices. CMYK colours maybe be unpredictable as will display in RGB. Safe area Area which will always appear on specific device and not interfere with navigation tools. Similar to the type area in print. Static An ad that has no interactive functionality such as tap through link, video or photo gallery. Often just an image. Streaming A way of continuously transferring data. A progressive download of data that isn’t store on your computer/device. The user can receive audio or video without having the content stored on their device. Wrapper Wrapper might be native container which holds platform independent content. For example, an app might have a native wrapper, but the content is HTML. XML (Extensible Markup Language) XML is data about data. It is designed to structure, transport and/or store data rather than display it. It is a method/technique for marking or tagging content (text, graphics, other elements) as code to identify it for a secondary purpose or application.
September 2014