Tekniska riktlinjer för kreativt material baserat på HTML5.
Generell information
De här riktlinjerna är ämnade för producenter av kreativt material baserat på HTML5 och som ska användas till digital annonsering på Bonnier News.
Följande riktlinjer är viktiga för leverans och kampanjens framgång. Material som inte följer riktlinjerna kommer tyvärr inte att godkännas.
Vi använder Google Ad Manager (GAM) annonshanteringssystem (ad server) och riktlinjerna nedan är skrivna för att fungera med detta system.
Vi använder oss av Safe Frames som leveranssätt.
- Det är per default inte tillåtet att bryta sig ut från iframe (frame busting). Kontakta AdOps om formatet kräver det.
- SVG inom HTML stöds ej. Det är däremot möjligt att inkludera stand-alone .svg-filer och använda dom som referenspunkter i HTML-materialet.
- Animering av element får inte överstiga 30 sekunder.
- Material måste påbörja rendering av visuella element inom 0,5 sekunder.
- Genomsnittlig processoranvändning ska vara maximalt 30%, med maximal topp på 60%.
- Maximalt antal anrop (requests) är 15 st per annonsmaterial.- Materialets huvudfil ska döpas till index.html.
- Relativa sökvägar ska användas till resurser och filer i materialet.
- Referenser till externa resurser[1] ska vara absoluta och starta med //: Vidare måste de av säkerhetsskäl stödja SSL/TLS.
- Det är inte tillåtet förhindra vertikal sidskroll[2].
- JavaScript console -metoder är inte tillåtna.
- Geo Location och liknande Web API:er som kräver användares godkännande får enbart användas efter användarinteraktion.
[1] Så som CDN och externa fontbibliotek.
[2] Använd inte touchstart som trigger för interaktion (eftersom touchstart triggas vid scroll)
Filstorlek
Vi mäter materialens totala vikt eftersom HTML5 består av flera olika resurser och kontrollerar hur varje resurs laddas in och i vilken ordning.
Mobila enheter (Smartphones)
150 kB
Desktop/Tablet
200 kB
Filstorleken beräknas på alla resurser inklusive spårningsskripts, JavaScript-bibliotek, font-filer, stilmallar etc. Ni kan välja att använda vitlistade CDN:er, men dessa kommer att räknas in i den totala filstorleken på materialet. Viktigt: Om ert material kräver att gränsen överskrids, kontakta AdOps i god tid.
Notera att mätskript och skript från 3:e-part så som Google, Sizmek och Adform i snitt väger 70-90kb extra (utöver det faktiska annonsmaterialet) och att denna extra vikt räknas in som en del av totalvikten.
Det innebär att man som annonskreatör inte kan använda lika mycket av totalvikten till annonsmaterialet när man levererar annonser med mätskript alt levererar via 3:e-part, då mätskriptet och/eller 3:e-partskriptet kommer ta delar av totalvikten.
Kom ihåg att det är fullt möjligt att ladda in extra resurser efter användarinteraktion. Dessa resurser räknas inte in i de totala initiala storleksbegränsningarna.
Prestanda
Bonnier News testar allt material med AdValidation enligt specifika parametrar. Material som blir underkänt när vi testar i Ad Validation kommer ej att godkännas.
- Försök använda CSS för animationer så långt det går istället för JavaScript-bibliotek.
- Animera aldrig gömda element.
- Försök få ner antalet anrop.
- Undvik att ladda in tungt material som t ex video innan användarinteraktion (detta gäller ej våra specifika video-produkter).
- Maximalt antal anrop (requests) är 15 st per annonsmaterial.
- Material måste påbörja rendering av visuella element inom 0,5 sekunder.
- Genomsnittlig processoranvändning ska vara maximalt 30%, med maximal topp på 60%.
Ljud (HTML material med video)
- Ljud får endast aktiveras vid klick – ej mouse-over.
- Ljudet måste ha en på-/av-knapp.
Graceful degradation / Progressive enhancement
På grund av fragmentationen av webbläsare stöds W3C:s specifikation för HTML5 inte av alla webbläsare. Bonnier News rekommenderar att ni tillhandahåller en alternativ version (fallback) för ert material genom antingen designstrategin graceful degradation eller progressive enhancement. Material som går “sönder” i vanliga webbläsare kommer att avvisas vid validering eller tas bort från sajten om fel uppenbarar sig i produktion.
Graceful degradation (elegant degradering) - Innebär att man utvecklar på ett sätt så att man tillhandahåller en viss nivå av användarupplevelse i mer moderna webbläsare, men också degraderar till en lägre nivå när äldre webbläsare används. Den lägre nivån ger en sämre användarupplevelse men tillhandahåller ändå basfunktionalitet. Det går inte “sönder” så att det blir oanvändbart.
Progressive enhancement (progressiv förbättring) - Är liknande men gör sakerna tvärtom. Man upprättar en basnivå för användarupplevelsen som alla webbläsare kan tillhandahålla vid rendering av materialet. Men man bygger också mer avancerad funktionalitet som automatiskt blir tillängligt för webbläsare som stödjer det.
Struktur, paketering och leverans
Eftersom HTML inte kan komprimeras och levereras till en enda fil så är det viktigt att beakta filstrukturen. Ert kreativa material bör baseras på en index-fil som ska heta index.html. Detta är huvudfilen som kommer att laddas in först och initiera andra komponenter som t ex CSS- och JavaScript-filer. Klicktracking-komponenten som nämns ovan ska befinna sig i index.html-filen. Materialen ska levereras i individuella .zip-filer som innehåller alla kreativa resurser i rotmappen. Resurser och bibliotek ska inte levereras i separata mappar som t ex “img”, “css”, “js”-mappar.