For general HTML5 guidelines, refer to IAB s HTML5 guidelines here: LIONS GROUP Media

Size: px

Start display at page:

Download "For general HTML5 guidelines, refer to IAB s HTML5 guidelines here: LIONS GROUP Media"

Randolf Montgomery
5 years ago
Views:

net/html5 Ad Server HTML5 Requirements In rder t run HTML5 creative thrugh the Ad Server, yur files must adhere t the fllwing requirements.

1 This dcument is intended fr users develping HTML5 creative and utlines best practices fr develping HTML5 creatives fr the Ad Server. If yu plan n running yur creative thrugh an alternative ad server, please refer t that ad server s set f guidelines. Fr general HTML5 guidelines, refer t IAB s HTML5 guidelines here: Ad Server HTML5 Requirements In rder t run HTML5 creative thrugh the Ad Server, yur files must adhere t the fllwing requirements. Failure t d s culd result in errrs in hw the creative renders. Organizing and Preparing Yur HTML5 Creative HTML5 assets shuld be delivered in a zip file frmat. Cmpress the rt.html file and all assets int a.zip. Any name is acceptable fr the file as lng as the extensin is.zip. The rt.html file may nt be placed in a subflder. Assets may be rganized int subflders within the zip file. Hwever, the subflders themselves shuld nt be individually cmpressed.!the fllwing example is incrrectly packaged as the images subflder has been cmpressed. N subflders within the zip file shuld be cmpressed: "The fllwing example is crrectly packaged, with an HTML file and assets, css and images rganized int uncmpressed subflders:

2 T uplad multiple HTML5 ads at nce, cmpress the individual zip files int a single.zip. Any name is acceptable fr the file as lng as the extensin is.zip. Rt HTML File HTML5 ads must always include ne.html file. Any name is acceptable fr the file as lng as the extensin is.html. Rendering Ensure the rt.html file renders as an HTML5 web page: Include the HTML5 dctype at the tp f the file: <!DOCTYPE html> Include a rt <html> tag belw the dctype tag Include a <head> tag inside the <html> tag Include a <bdy> tag inside the <html> tag Backup Image A backup image will be required. The image must have the same dimensins as the ad. It shuld nt be placed in the.zip file as it will be upladed separately frm the ad in the Ad Server. File Size Fr display size ads the initial paylad must be under 200Kb. Fr mbile size ads the paylad shuld be kept under 50Kb. This includes all cde and assets. Required Meta Tags The rt HTML file is required t include tw meta tags--ne t specify the ad size, and ne t specify which element in the ad triggers the click-thrugh. These tags shuld be placed inside the <head> tag. We recmmend manually adding these tags using any text editr as the final prductin step befre publishing. The fllwing sectins prvide the specific requirements fr each meta tag. See the sample HTML5 file in the Appendix fr a full example. Ad Size Requirements HTML files d nt have sizes assigned t them. Yu must add an ad size meta tag t dente the size f yur file. Specify the ad size with an ad.size meta tag: Frmat: <meta name= ad.size cntent= width=xxx,height=yyy /> Example: <meta name= ad.size cntent= width=300,height=250 /> The Ad Server des nt supprt flexible sizes. Every HTML5 creative must have a size assigned t it. Yu shuld have ne HTML5 zip file asset per size. Respnsive ad sizes are currently nt supprted in the Ad Server.

3 Click-thrugh Tag Requirements The HTML file must include a meta tag indicating which element in the ad triggers the click- thrugh. Specify the click-thrugh element with a click.thrugh meta tag. Insert yur HTML file s clickable element ID where it says myclickableelementid: Frmat: <meta name= click.thrugh cntent= myclickableelementid /> Ensure the HTML file cntains an element with the specified ID. Example: <img id= myclickableelementid src= buttn.png /> D nt hardcde the click thrugh URL in yur HTML file. D nt add yur wn click tracking events t the click-thrugh element as this will cnflict with LGM click tracking. If yu wuld like t track clicks in anther system, yu shuld use 1x1 click trackers which can be implemented in the LGM UI during creative tag creatin. SSL Cmpliance In rder t run n secure inventry all netwrk calls frm the ad must be secure. This includes all links t images, fnts, stylesheets, Javascript, and any calls made frm Javascript cde. T maximize the number f exchanges n which yur ad can run, ensure that all calls are befre yu send the asset. HTML5 Creative Develper Guidelines Rich Media Rich media features such as expandables and in-banner vide are currently nt supprted in the Ad Server. Animatin Either CSS r Javascript may be used fr animatins. The chice depends n the cmplexity f the animatin and perfrmance. The tp pririty is ensuring cnsistently smth animatin. Use CSS fr lightweight animatins, such as tggling a buttn state r glwing. Use Javascript fr advanced animatins like slideshws, buncing, and pausing. If using Javascript t animate we recmmend using the Web Animatins API t ensure best perfrmance. Open surce animatin libraries such as CreateJS are als available t ease develpment--just remember these cunt against the ttal ad paylad size.

4 Media Files Fr Display There are a number f ptins available fr generating display creatives. Image frmats (.gif,.jpeg,.png) are better suited fr phtrealism but generally have much larger file sizes. Other frmats (.css,.svg) are better suited fr scaling t any size withut lsing reslutin r requiring large file sizes. Belw are the mst cmmn frmats and the best use cases fr each: Frmat Use case css svg gif jpeg png best fr slid clrs and gradients, smaller file size than images best fr vectr images and lgs, scales well t large size, smaller file size than images best fr simple animatin lps best fr full-clr images best fr full-clr images with transparency Fnts Custm fnts are available in HTML5 ads using web fnts. Fnts are typically hsted n a CDN (such as Ggle Fnts), ensuring that all users are able t dwnlad the fnt and render the ad cnsistently. Our recmmendatins fr using custm fnts: Hst fnts n a CDN t imprve availability and take advantage f caching. Use a family f fnts t prvide graceful degradatin if a fnt is unavailable. Use fnt subsetting t nly lad required character sets and minimize file sizes Recmmended Develpment Tls HTML5 ads may be hand-cded in any text editr r develped in an ad builder tl. Ad builders have a number f advantages--graphical user interfaces, asset management, preview, and ptimizatins fr publishing. Hwever, the ad builders typically inject supprt cde int the ads which increases the paylad size and ptentially limits the brwsers n which the ad can run. This tradeff fr ease f develpment is typically wrth the cst as lng as the ad remains under the recmmended maximum file size. If using an ad builder we recmmend using either Adbe Edge Animate r Ggle Web Designer. Bth ffer cnvenient GUIs and can publish HTML5 ads capable f running anywhere. Each will inject its wn Javascript runtime library int the HTML file--we highly recmmend lading the runtime library frm a CDN t take advantage f caching and cmpressin. These runtime libraries will limit the number f brwsers n which the full ad can run due t technlgy requirements. If required brwser features are nt available the backup image will be served instead. Adbe Edge Animate is a paid ptin. It ffers a rbust user interface that will feel familiar t designers cming frm Flash. It has pwerful tls fr develping cmplex animatins and interactivity. It has a decent editr fr custm-cding Javascript if needed, but lacks a cde editr fr the HTML file itself.

5 Ggle Web Designer is a free ptin. It s still in Beta but is relatively mature and capable f creating prductin-ready ads. It ffers a number f templates as starting pints. Its interface and user experience is less plished than Adbe Edge Animate. It includes a minimal editr fr the HTML file, but heavy manual editing is nt recmmended. Sample HTML5 File See the Appendix fr an example HTML file. Additinal Resurces Appendix Sample HTML5 File Belw is an example HTML5 file. It illustrates several key pints: Prper structure and rendering as an HTML5 page Prper inclusin f the ad.size meta tag Prper inclusin f the click.thrugh meta tag Ensuring an element exists with an id matching the click.thrugh meta tag Use f Web Fnts Lading media files frm a subflder

Getting Started with the Web Designer Suite

Getting Started with the Web Designer Suite The Web Designer Suite prvides yu with a slew f Dreamweaver extensins that will assist yu in the design phase f creating a website. The tls prvided in this suite