HTML5

O Chrome sofrerá uma atualização gradual começando em setembro/2015 onde conteúdos em Flash não prioritários e/ou que não estejam 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é 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
GWD (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é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.