CREATIVE & TECHNICAL SPECIFICATIONS

Size: px

Start display at page:

Download "CREATIVE & TECHNICAL SPECIFICATIONS"

Geraldine Howard
6 years ago
Views:

1 CREATIVE & TECHNICAL SPECIFICATIONS

2 CREATIVE SPECIFICATIONS EXPECTED ASSETS LANDSCAPE: 96Ox424px ipad: 768x928px 1O24x672px SAME SIZE FOR INTERSCROLLER SMARTFOOTER MPU INCONTENT INTERSTITIAL 64Ox2OOpx (or 32Ox1OOpx) 6OOx5OOpx (or 3OOx25Opx) 64Ox32Opx (or 32Ox16Opx) 64Ox96Opx (or 32Ox48Opx) IMAGERY ASSETS PREFERED PHOTOSHOP OR ILLUSTRATOR FILE (LAYERED.PSD OR.AI) PREFERED.PNG (.JPG FOR STATIC FORMAT) LARGER RESOLUTION = BETTER QUALITY VIDEO ASSETS SIZE LIMIT: 72Ox48Opx MIN. SUBTITLE:.SRT FILE LARGER RESOLUTION = BETTER QUALITY FONT BRAND FONTS IN.TTF OR.OTF

SMARTFOOTER 64Ox16Opx VIDEO AREA: 22Ox18Opx 1

3 OUT-ROLL TM TECHNICAL SPECIFICATIONS & EXPECTED ASSETS SPECIFICATIONS 3 INTERSTITIAL 64Ox96Opx 2 SMARTFOOTER 64Ox16Opx VIDEO AREA: 22Ox18Opx 1 IN-CONTENT VIDEO 64Ox4OOpx FORMAT:.MP4 15S. RECOMMANDED

4 PARALAYER SPECIFICATIONS TECHNICAL SPECIFICATIONS & EXPECTED ASSETS LAYER VIDEO 32Ox24Opx LAYER SWIPE 32Ox24Opx SMARTFOOTER 28OOx2OOpx VIDEO ASSETS:.MP4 / 15S. RECOMMANDED IMAGERY ASSETS: PREFERED.PNG WE CAN USE SPECIFIC SHAPE FOR LAYERS

5 TECHNICAL SPECIFICATIONS 1/3 TO BUILD IT YOURSELF WITH OUR GUIDELINES AND GOOD PRACTICES 1. Mozoo script The Mozoo script must be integrated within the creative to manage of the specific behaviours set by the Mozoo build. The script can be integrated in the <head> tag. In order to optimise the creative s performances, it is advised to place the tag at the end of the document, just before the body tag ends. 2. Viewport The creative viewport meta must set as follows inside the <head> tag. This allows the creative to adapt to the device s dimensions whilst keeping its original aspect ratio. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <script src= " _sc ripts/generic_inner_external.js"> </script> 3. HTTPS Protocol All the links within the creative must be set as secured ( It is applicable to external libraries and for any other link or video link. Example: <script src= " min.js"></script> Libraries can also be provided with the creative. They will be securely hosted in our servers.

6 TECHNICAL SPECIFICATIONS 2/3 TO BUILD IT YOURSELF WITH OUR GUIDELINES AND GOOD PRACTICES 4. Responsiveness The creative must be responsive. Elements positions and sizes are set as percentage, in order for the format content to adapt to any screen size (smartphone & tablet). The main creative container should always represent 100% of its layout size. #adcontainer { width : 100%; height : 100%; margin : 0; padding : 0; } Include all the media queries to ensure your creative can handle the all the screen sizes on the market. Example only screen and (max-device-width: 320px) and (max-deviceheight : 480px) and (orientation:portrait){ } /*Your css goes here for devices with a screen inferior to 320px width and 480px height and are in portrait*/ 5. CTA (Call-To-Action) To place a CTA (call-to-action) in the creative, the following question must be answered: Do you need the entire creative to be clickable or only specific elements? 5.1 Fully clickable (default behaviour) Add an empty <a> tag at the end of the #adcontainer with a mzcta id. HTML: <div id= adcontainer > </div> <a id= mzcta ></a> 5.2 Specific element clickable <div id= adcontainer > CSS: #mzcta{ position: absolute; top:0; right:0; width:100%; height:100%; } For specific elements to be clickable, this element should be placed in a #adcontainer container but you must add the following to each element: mzcta ID or class (#mzcta /.mzcta) <img src= image-cta.png id= mzcta ></img> </div>

7 TECHNICAL SPECIFICATIONS 3/3 TO BUILD IT YOURSELF WITH OUR GUIDELINES AND GOOD PRACTICES 6. Handling Rotation 7. Appendix: Notes and links The Mozoo script can generate specific assets depending on the device s orientation. A specific message will indicate that the device needs to be rotated for the ad unit to be display correctly. In order to do that, you need to place the #mz_rotate ID within an empty div. You can use the following options: <div id="mz_rotate"></div>  <div id="mz_rotate" class="portrait"></div>  <div id="mz_rotate" class="landscape fr"></div>  <div id="mz_rotate" class="portrait en"></div> Example:  To see an empty base template, click here. A few things about the creative s content: The different creative effects are integrated using CSS3 animations (keyframes). It also uses native javascript or external libraries. Use of HMTL5 video and audio or canvas tags. FLASH IS FORBIDDEN. To optimize the size of PNG or JPG images : Find here all the relevant media-queries. IAB mobile guidelines (Interactive Advertising Bureau)

TECHNICAL SPECIFICATIONS - DIGITAL 2018 DISPLAY / VIDEO / ARCH TEMPLATE / NATIVE ADS / PARALLAX SCROLLING / ING / ROOFTOP STATIC VIDEO

TECHNICAL SPECIFICATIONS - DIGITAL 2018 DISPLAY / VIDEO / ARCH TEMPLATE / NATIVE ADS / PARALLA SCROLLING / EMAILING / ROOFTOP STATIC VIDEO DISPLAY Name Max Weight Dimensions File type Comments DESKTOP