HTML5

O Chrome sofreu uma atualização em setembro/2015 onde conteúdos em Flash não prioritários e/ou que não estavam no centro das páginas permanecerão pausados até que o usuário ative-os com um clique (documentação do google). O Chrome representa mais de 50% do trafégo na web e e mais de 70% no UOL, além disso outros browsers como o Safari e Firefox já possuem recursos similares

Os principais motivos são:

- Alto consumo de processamento do computador e de bateria;
- Falta de segurança;
- Necessidade do plugin ser constantemente atualizado;
- Flash não funcionalidade em dispositivos mobile;

Boas práticas

Com o objetivo de diminuir problemas de implementação e veiculação disponibilizamos algumas especificações e boas práticas para o uso de HTML5: O banner HTML5 deve ter todas suas referências externas como relativas. É importante lembrar que o anúncio será veiculado em páginas mais complexas e com diversos elementos, portanto é fundamental que o funcionamento do banner seja compatível com o SafeFrame do DFP.

Não utilizar as boas práticas descritas neste documento pode impactar negativamente o funcionamento do anúncio e da página. Além de prejudicar a experiência do usuário. A construção da peça não pode depender de qualquer outro elemento da página ou bibliotecas javascript externas. Fontes, CSS, JS, HTML e imagens devem ser enviadas no pacote da peça.
Sugerimos para a criação e conversão - de peças publicitárias em HTML5 - as opções abaixo:

Doubleclick Studio Layouts:

Templates "Plug n' play", sem nenhum desenvolvimento/código. Demo - HTML5 YouTube Masthead; Desktop, Tablet e Mobile

(Google Webdesigner):

Diferentemente do Doubleclick Studio, são 100% customizáveis. Serve de ponto de partida e existem mais de 30 templates em vários formatos e tamanhos https://support.google.com/webdesigner/

Vanilla HTML5:

http://www.cssreflex.com/2014/01/vanilla-html-minimal-semantic-html5-framework.html

Flash CC

Também pode exportar HTML5: https://helpx.adobe.com/flash/using/creating-publishing-html5-canvas-document.html

Peso máximo dos anúncios

Desktop / Tablet: 150KB (DESCOMPACTADO)

Mobile (mWEB ou In-App) 40kB (DESCOMPACTADO)

Polite Download (somente via tag de terceiros)
Todos os arquivos subsequentes ao carregamento de peças in-page, que ultrapassam os tamanhos citados acima só poderão ser descarregados após o carregamento completo da página seguindos os limites abaixo:

Desktop / Tablet 1MB (DESCOMPACTADO)

Mobile (mWEB ou In-App) 300KB (DESCOMPACTADO)

clickTag

Existem diversas maneiras de criar a clickTag (área de clique do anúncio) e em todas elas a página do anunciante deve abrir em uma nova janela ou aba do navegador. Abaixo temos alguns exemplos de como fazer, porém em resumo: sempre inclua a macro abaixo como URL de redirecionamento da peça.

%%CLICK_URL_ESC%%%%DEST_URL%%

Javascript

Uma forma simples de usar a variável clickTag é atribuir o href dinamicamente após o carregamento da página via JavaScript:

<a href="" id="clickArea" target="_blank"></a> <script type="text/javascript"> var clickTag = "%%CLICK_URL_ESC%%%%DEST_URL%%"; document.getElementById('clickArea').href = clickTag; </script>
Obs Lembrando que a 'clickArea' precisa existir em seu HTML e seja a área clicável para redirecionamento. Além disso a chamada javascript deve vir após a existência do elemento clickArea no HTML.

HTML

Outra possibilidade é feito no próprio elemento HTML, conforme exemplos abaixo:

Ex 1 HTML puro:
<a href="%%CLICK_URL_ESC%%%%DEST_URL%%" target="_blank" ></a>

Ex 2 HTML + Javascript:
var clickTag = '%%CLICK_URL_ESC%%%%DEST_URL%%'; <a href="javascript: window.open(clickTag, '_blank'); void(0)"></a>

Ex 3 HTML + Javascript em um elemento DIV:
<div id="clickArea" onclick="javascript: window.open(clickTag, '_blank'); void(0)" style="cursor:pointer;" ></div>
Obs. No uso de DIV clicável, ela deve sempre exibir o cursor de 'mão'.

Múltiplos Cliques

Em casos de várias urls de clique dentro do mesmo anúncio, declare as variáveis de click da seguinte forma: clickTag, clickTag1, clickTag2, caso deseje utilizar via javascript.
var clickTag = "%%CLICK_URL_ESC%%http://www.uol.com.br"; var clickTag1 = "%%CLICK_URL_ESC%%http://economia.uol.com.br"; var clickTag2 = "%%CLICK_URL_ESC%%http://esporte.uol.com.br"; var clickTag3 = "%%CLICK_URL_ESC%%http://entretenimento.uol.com.br";
Caso deseje usar em HTML puro basta adicionar as urls logo após %%CLICK_URL_ESC%%

Ex:
<a href="%%CLICK_URL_ESC%%http://www.uol.com.br" target="_blank" >Clique 1</a> <a href="%%CLICK_URL_ESC%%http://economia.uol.com.br" target="_blank" >Clique 2</a> <a href="%%CLICK_URL_ESC%%http://esporte.uol.com.br" target="_blank" >Clique 3</a> <a href="%%CLICK_URL_ESC%%http://entretenimento.uol.com.br" target="_blank" >Clique 4</a>

Backup

Os anúncios devem servir imagem de backup para os browsers que não oferecem suporte à HTML5. O mesmo deve ocorrer se algum recurso externo não esteja disponível. Por exemplo no uso de XML para peças dinâmicas.

Scripts

Não recomendamos:
Usar frameworks javascript como jQuery, Prototype, YUI, Dojo, MooTools, EXTJS e AngularJS pois a probabilidade da página já utilizar um desses recursos é grande e o uso em um anúncio pode comprometer o funcionamento da página ou de outros anúncios. Não recomendamos o uso de jQuery pois além de comprometer outras funcionalidades da página, serão adicionados 97KB e neste caso pode-se optar por zepto.js que conta com as principais funções e mesma sintaxe, porém com 9.1KB

Recomendamos:
Minifying, existem ferramentas online que fazem a compressão (minifying) de scripts, além disso os principais editores de código também contam com essa funcionalidade.

Imagens

Muitos efeitos (como o gradiente) são possíveis com o uso de CSS. (http://www.cssmatic.com/gradient-generator e http://www.w3schools.com/css/) Para uso de vetores a melhor opçã é PNG

O uso de PNG e JPG como 'Save for web do Photoshop', não usam a melhor compreensão. logo experimente outras opções como TinyPNG (https://tinypng.com/ ) e TinyJPG (https://tinyjpg.com/)

Obs: O uso de animações utilizando o SVG não é permitido!! Utilize o canvas.

Fontes

Fontes fora do padrão do sistema acrescentarão diversos KBs ao anúncio, podendo aumentar consideravelmente o tempo de carregamento. Sempre que possível utilize suas fontes como imagens/vetor ou defina-as em classes css especificas.

Google Fonts:
(https://developers.google.com/fonts/docs/getting_started): Biblioteca com 698 fontes para uso livre ou integrado ao Google Web Designer.

Fontsquirrel:
(http://www.fontsquirrel.com/tools/webfont-generator ): Faz a conversão de fontes proprietárias para formatos WebFonts, reduzindo o peso.

Font Subsetting:
http://demosthenes.info/blog/878/Slash-Page-Load-Times-With-CSS-Font-Subsetting: t: Técnica para reduzir peso de fontes, utilizando apenas o necessário

CSS

Nunca use CSS em tags globais como: body, div, span. Isso pode interferir na página e essa boa prática garante que o CSS será aplicado apenas nos elementos corretos do seu anúncio. Coloque CSS in-line ou crie seus próprios IDs ou Classes que não sejam genéricos. Por ex: container, wrapper, header, etc.

Vídeo

Para o uso de vídeo, recomendamos o uso do player do Youtube embedado. Além disso com algumas restrições abaixo:

Autoplay:
Não recomendamos o uso e não permitimos o uso sem polite download.
Browsers como Safari e Opera não aceitam este atributo, assim como iPad e iPhone.

Poster:
É importante adicionar o thumb enquanto o vídeo não é carregado.

Controls:
Caso não desenvolva os próprios controles, este atributo é necessário para que o usuário tenha o controle do vídeo.

Track:
Se houver a necessidade de legenda externa nos vídeos, deve-se observar que esta tag funciona apenas nos browsers abaixo a partir das versões:
- Google Chome 18+
- Internet Explorer 10+
- Mozilla Firefox: 31+
- Safari 6+
- Opera 15+

Browsers Suportados

Todos os browsers modernos suportam o uso de HTML5:
- Chrome 40+
- Firefox 35+
- Internet Explorer 10+ (incluindo Edge)
- Opera 20+
- Safari 7.0+

É essencial que todos anúncios funcionem nos determinados browsers e versões.

Este site: https://html5test.com/results/desktop.html mostra a classificação de cada browser e versão e seu desempenho.