html5 accelerator: why & how to start now

26
Accelerator Paul Vincent, CEO Cory Hudson, Senior Creative Director Why & How To Start Now

Upload: iab-canada

Post on 15-Jan-2015

322 views

Category:

Marketing


3 download

DESCRIPTION

Paul Vincent (Neuranet) and Cory Hudson (AOL) spoke about the importance of moving to HTML5 ad creative at our MIXX conference on March 20, 2014.

TRANSCRIPT

Page 1: HTML5 Accelerator: Why & How to Start Now

Accelerator

Paul Vincent, CEOCory Hudson, Senior Creative Director

Why & How To Start Now

Page 2: HTML5 Accelerator: Why & How to Start Now

Why is the best solution for sites, apps and ad creative?

Page 3: HTML5 Accelerator: Why & How to Start Now

MULTI-SCREEN

Page 4: HTML5 Accelerator: Why & How to Start Now

…and even more screens are coming

Page 5: HTML5 Accelerator: Why & How to Start Now

Screen Technology Advancing Fast

Touch

Larger touch screens everywhere

Page 6: HTML5 Accelerator: Why & How to Start Now

Screen Technology

Advancing FastScreen Mirroring

Page 7: HTML5 Accelerator: Why & How to Start Now

Screen Resolutions Advancing Fast

720p > 1080p > 4K

Page 8: HTML5 Accelerator: Why & How to Start Now

2009-2013: Desktop vs Mobile 2014+: more complex

Non-Mobile

Mobile

@workNon-Touch

All Touch

@home

Page 9: HTML5 Accelerator: Why & How to Start Now
Page 10: HTML5 Accelerator: Why & How to Start Now

Flash (.SWF) doesn’t work on mobile devices

IAB has asked advertisers to demand ad agencies build in HTML5…

“To guarantee the ads you pay for actually appear and look great on all screens, you should insist to your ad agencies that your advertising creative be developed in a mobile-compatible format. And the one open, industry-standard, universal format for building mobile-ready creative is HTML5.”

http://www.iab.net/mobilecenter/makemobilework/letter

Page 11: HTML5 Accelerator: Why & How to Start Now

… and Flash is fading fast

Page 12: HTML5 Accelerator: Why & How to Start Now

Solution: BUILD ONCE. DEPLOY EVERYWHERE.

Page 13: HTML5 Accelerator: Why & How to Start Now

The time…IS NOW

Page 14: HTML5 Accelerator: Why & How to Start Now

USER INTERACTION IS KEY• Unique to HTML5• Engagement and interaction metrics• Not just my opinion, engaging experiences

perform better• Relevant interactivity

Page 15: HTML5 Accelerator: Why & How to Start Now

Animated Ads on Mobile = BETTER PERFORMANCE

HIGHER CTR

3.5x

.5 -15%

ENGAGEMENT RATES

*industry averages

Page 16: HTML5 Accelerator: Why & How to Start Now

HTML5 + supporting technologies.

+ many more!

Page 17: HTML5 Accelerator: Why & How to Start Now

• Industry currently uses fixed ad sizes (300x250, 728x90 etc) that don’t work well with responsive design

• Responsive sized & larger HTML5 ads may replace fixed ad size units

• RWD improves ad view-ability due to using more ‘above the fold’ screen real estate.

Responsive Web Design (RWD)

What is RWD? - One codebase that adapts to many devices

Page 18: HTML5 Accelerator: Why & How to Start Now

Website

Native AppHybrid Web/Native App Shared codebase

Browser & Native App worlds may merge

Page 19: HTML5 Accelerator: Why & How to Start Now

“ANYWHERE” (Cross-Device) AD UNIT

• Cost Effective• Better Monetization of Impressions • Growing towards 100% Ubiquity and Adoption

• HTML5 is Not an Option, but a Requirement

Page 20: HTML5 Accelerator: Why & How to Start Now

Step 3. Generate URL for creative • URL can be trafficked in any ad server• No change to current reporting process

Step 1. Add Creative Components Step 2. Optimize Layout

- Creative responds to any ad size.

- Image files are optimized.

• Allows for responsive ads that resize to any ad unit or resolution• Responsive ad size creative doesn’t require a responsive website

“ANYSIZE” (Responsive) AD UNIT

DEMO responsive ad examples

Page 21: HTML5 Accelerator: Why & How to Start Now

SO WHAT’S THE HOLD UP?

Page 22: HTML5 Accelerator: Why & How to Start Now

HTML5 Challenges• No SWF• Performance & Optimization Across Devices• Cross Browser Support• Production/QA Lead Times• Requires a Different Skillset• Lack of Tools for Rapid Development• Lack of Industry Specs & Guidelines

Page 23: HTML5 Accelerator: Why & How to Start Now

MATURATION & ADOPTION OF TOOLS• Scale & Cost• Engage & Collaborate with Industry Leaders• Adobe Edge • Google Web Designer• Famous• CreateJS • GreenSock Animation Platform

Page 24: HTML5 Accelerator: Why & How to Start Now

IAB HTML5 Working Group• Establish True Specs• Responsive Ad creation & Serving• Widespread Industry Collaboration

and Participation is Vital

Page 25: HTML5 Accelerator: Why & How to Start Now

US IAB HTML5 Ad Standards – in development

http://www.iab.net/html5

HTML5 for Digital Advertising 1.0: Guidance for Ad Designers & Creative Technologists

Page 26: HTML5 Accelerator: Why & How to Start Now

Accelerator -

[email protected]@teamaol.com

Why & How To Start Now

Thanks! Questions?