Ära koba pimeduses

Mis on HTML5?

1996. aastast veebidisainerite üheks lemmikformaadiks olev Adobe Flash kaotab tasapisi oma positsiooni. Seetõttu on Eesti veebidisainerite huvi alternatiivsete formaatide, eelkõige HTML5 vastu viimasel ajal plahvatuslikult suurenenud.

Eelkõige on tähtis jälgida nii mahupiiranguid kui ka efektide mõistlikku kasutust. HTML5 vale kasutamine tingib tegelikkuses selle tagajärje, mille vastu brauserid paljuski Flashi blokeerimisega võidelda soovivad: kasutaja brauseri töö kergendamise asemel võib valesti koostatud HTML5 fail röövida hoopis rohkem arvutiressurssi.

HTML5 tugevused

Kiire
Universaalne
Mobiilne
Elastne

HTML5 bännerid tuleb saata vähemalt 2 (kaks) täistööpäeva enne lähetuse esimest päeva. Kui reklaammaterjali esitamise tähtaega ei järgita, ei garanteeri Ekspress Meedia reklaammaterjali aktiveerimist. Hüvitist sel puhul ei anta.


Technical specifications for HTML5 creatives

Single Zip
Creative should be sent in a single zip file that contains the static HTML and all of the resources required (the creative should not include resources from 3rd party sites unless stated otherwise).

Weight
Creative weight (total file size) should not exceed the allowed weight limit of the placement.

Effects
Special effects should be used reasonably (respect user experience and hardware load).

Browsers
Creative must work in all modern browsers (oldest supported browser are IE10, Chrome 20, Firefox 20)

Alternative Image
For older browsers we automatically show alternative image instead of HTML5 creative. JPG is prefered.

Trackers
If you want to use a 3rd party viewtracker, then send it with the creative. Don't inject trackers to the creative code.

Responsiveness
Some placements require responsive creatives:

Multimedia
Video/audio tags are not allowed by default.


Click tracking

Insert url params feature script to your creative header:

<script src="//g.delfi.ee/scms/?g=dparams.js"></script>

That defines the dparams variable that can be used in one of the following ways:


Good Practices

Make your creative light

Your creative should load as fast as possible. If your creative loads faster than other creatives then it's your goal :)

– Don't use anything what you don't really need (extra graphics, extra fonts, etc) - everything will slow down loading.

– Make your designs as flat as possible - try avoid extra graphic files. Do it in HTML :)

– Optimize your raster images (jpg, png, gif):

Using Custom fonts

Custom fonts should also have always fallback to a web-safe font (Arial, etc). NB! Do not forget to test your fallback font.

Fonts should be provided by Google fonts or included inside of the zip file with rest of the creative resources.

If you are using Adobe Edge the default fonts are recommended - they have websafe font fallback defined for them.

WebGL

WebGL creatives are special case and not allowed by default. Please contact us before you use them.


Special Cases

Interstitial Ad

Interstitial creatives have auto-close - to cancel auto-close timer with on to activity, the following javascript should be executed:

window.parent.postMessage('InterstitialBannerInteraction', '*');

Adobe Animate CC

Clicktag: Using Delfi template file for Adobe Animate CC

For single, whole banner clicktag, the simplest way is to use a custom pre-built template file that includes the requiered dparams file and has the clicktag set up on the canvas element.

  1. Download Delfi template file
  2. Open Adobe Animate CC
  3. Create new HTML5 Canvas
  4. Go to advanced Publish Settings (File > Publish Settings > Advanced)
  5. Click on Import New
  6. Choose the downloaded delfi_template.html
  7. Continue making your creative as normal

NB! The Delfi template file is not meant to be opened in a browser!
The template is used by Adobe Animate CC to generate the final creative. Download the file and use it in Adobe Animate CC.

Clicktag: Adding JavaScript code on the Main timeline in Adobe Animate CC

NB! Use the following instructions only if you are unable to use our template file.

  1. Open Adobe Animate CC
  2. Create new HTML5 Canvas
  3. Open the Actions window (Window > Actions)
  4. Copy the code below
  5. Paste the code into the Actions window
  6. Close the Actions window
  7. Continue making your creative as normal
(function() {
if(window.dpexist) return; window.dpexist = true;
var dp = document.createElement('script'); dp.type = 'text/javascript';
dp.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//g.delfi.ee/scms/?g=dparams.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(dp, s);
canvas.addEventListener("click", function() {window.open(dparams.getVar('clicktag'), '_blank')});
canvas.style.cursor = 'pointer';
})();

This will download and include the dparams file in the head of the creative and also set up an event listener on the canvas element on the first frame of your creative timeline.

Google Web Designer

By default Google Web Designer includes Enabler.js library with every creative that is used in Google Ads Network. That causes the creative load time to be too long and display an empty banner for approximately 2.5 seconds. Please make sure that the creatives environment is set to Non-Google Ad!

NB! Make sure the Tap Area layer is the top-most layer in the creative timeline.

Cliktag: how to add a clicktag in Google Web Designer

  1. Open Google Web Designer
  2. Click on CREATE NEW FILE
  3. Fill the name field
  4. Choose Non-Google Ad as the Environment and click OK
  5. Open Code View and add the following code between the head tags, before any other script
<script src="//g.delfi.ee/scms/?g=dparams.js"></script>
  1. Open Design View
  2. Click on Components
  3. Drag and drop Tap Area component to your creative
  4. Position and resize the Tap Area component so that it covers the whole creative
  5. Right click on the Tap Area and choose Add Event > Tap Area > Touch/Click > Custom > Add Custom Action
  6. Add a name for the custom function and insert the following code in the function body
window.open(dparams.getVar('clicktag'), '_blank');
  1. Click OK

Adobe Edge

– If you remove images from the creative while developing, remove these images also from the published creative images dir

– Resize the images to correct size before adding them to Adobe Edge (Edge doesn't change/resize the image files - this could create great overhead if a large image was added to the creative)

– Don't use "Down-Level Stage" - there is no need - we will show an alternative image instead of the HTML5 solution in older browser.

– Don't use CSS filters

– Follow and fix the warnings given by Adobe Edge about possible problems

Video: How to make HTML5 creative in Adobe Edge Animate

Download Example project: banner_edge.zip

Publishing settings

Load the runtime files from Adobe CDN:

Tip! Delete old exported files before you export your final project - otherwise your export directory may also contain old design files what you exported when you was making creative

Adding clicktag

– Add the script in the Library section as JS File from URL:

– For script URL enter:

//g.delfi.ee/scms/?g=dparams.js

– Create an invisible rectangle that covers the whole creative.

– Add click event to the rectangle:


– Add the following code as clickevent:

window.open(dparams.getVar('clicktag'), '_blank');


– For multi-url creatives use the following code for clickevent:

window.open(dparams.getVar('clicktag', 'http://www.yourlink.com/'), '_blank');

Responsive scaling banners

Only needed for banners on responsive placments (e.g m.delfi)

– check the checkbox "Center Stage" and choose "Both" in the dropdown

– check the checkbox "Responsive Scaling" and choose "Both" in the dropdown

It is also recommened to set creative background color or mark it as transparent (default background color is white)